.globalMessageHeaderTitle {
    display: none;
}

/* Market: create offer — modern two-column composer for all phone layouts. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 22px !important;
        direction: rtl !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellTraderCount {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        float: none !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 0 6px !important;
        padding: 6px 9px !important;
        gap: 8px !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px !important;
        background: #f1f6ed !important;
        color: #465640 !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellTraderCount > strong {
        display: inline-flex !important;
        align-items: center !important;
        direction: rtl !important;
        gap: 4px !important;
        color: #60891d !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellTraderCount > strong > span,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellTraderCount > strong > b {
        direction: ltr !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellForm {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellResourceRow {
        position: relative !important;
        z-index: 4 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        gap: 6px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellResourceCard {
        position: relative !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 5px 6px !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px !important;
        background: #fff !important;
        overflow: visible !important;
        box-shadow: 0 1px 2px rgba(66, 76, 55, .08) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellResourceCard > h4 {
        display: block !important;
        width: calc(100% + 10px) !important;
        min-height: 29px !important;
        margin: 0 -5px 6px !important;
        padding: 5px 7px !important;
        border: 0 !important;
        border-bottom: 1px solid #ccd6c7 !important;
        border-radius: 4px 4px 0 0 !important;
        background: #e5efe1 !important;
        color: #3f4e39 !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellResourceControls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 54px !important;
        align-items: center !important;
        width: 100% !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 input.trav47MarketSellAmount {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 4px !important;
        border: 1px solid #b9c4b3 !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #343b31 !important;
        font: 700 12px/24px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        text-align: center !important;
        box-shadow: inset 0 1px 2px rgba(61, 72, 53, .1) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceSelect {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceSelect.is-open {
        z-index: 20 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceTrigger,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceOption {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 5px !important;
        gap: 4px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-image: none !important;
        color: #46533f !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-shadow: none !important;
        appearance: none !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceTrigger {
        height: 34px !important;
        justify-content: center !important;
        border: 1px solid #aebb9f !important;
        border-radius: 4px !important;
        background: linear-gradient(#fff, #edf3e9) !important;
        box-shadow: inset 0 1px 0 #fff !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceTrigger > span {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceTrigger > i,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceOption > i {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceTrigger > span,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceOption > span {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceTrigger > b {
        flex: 0 0 auto !important;
        color: #68814f !important;
        font: 700 14px/16px Arial, sans-serif !important;
        transition: transform .12s ease !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceSelect.is-open .trav47MarketResourceTrigger > b {
        transform: rotate(180deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceMenu {
        position: absolute !important;
        z-index: 30 !important;
        top: calc(100% + 3px) !important;
        right: 0 !important;
        display: none !important;
        width: max(100%, 108px) !important;
        margin: 0 !important;
        padding: 3px !important;
        border: 1px solid #9eae92 !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-shadow: 0 5px 12px rgba(44, 53, 38, .23) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceSelect.is-open .trav47MarketResourceMenu {
        display: grid !important;
        gap: 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceOption {
        height: 30px !important;
        border-radius: 3px !important;
        background: #f7f9f5 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceOption:hover,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketResourceOption.is-selected {
        background: #dceacb !important;
        color: #3c6018 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47NativeResourceSelect {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellOptionsRow {
        position: relative !important;
        z-index: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellOption {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 5px !important;
        gap: 4px !important;
        border: 1px solid #c5cec0 !important;
        border-radius: 5px !important;
        background: #f6f9f3 !important;
        color: #4d5848 !important;
        font: 400 9.5px/16px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellOption:only-child {
        grid-column: 1 / -1 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellOption input.check {
        flex: 0 0 auto !important;
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        accent-color: #6d942e !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellTimeOption input.text {
        flex: 0 0 29px !important;
        width: 29px !important;
        height: 27px !important;
        margin: 0 !important;
        padding: 2px !important;
        border: 1px solid #b9c4b3 !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #374033 !important;
        font: 700 10px/21px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 button.trav47MarketSellSubmit {
        display: block !important;
        float: none !important;
        min-width: 92px !important;
        margin: 0 auto 7px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage > p.hint {
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 7px 8px !important;
        border: 1px solid #d2d8ce !important;
        border-radius: 5px !important;
        background: #f8faf7 !important;
        color: #687164 !important;
        font: 400 9.5px/16px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage > h4.spacer {
        width: 100% !important;
        min-height: 31px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px 5px 0 0 !important;
        background: #e5efe1 !important;
        color: #3f4e39 !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview {
        width: 100% !important;
        margin: 0 !important;
        border: 1px solid #bdc9b3 !important;
        border-top: 0 !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        background: #fff !important;
        font: 400 9px/16px Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview td {
        height: 31px !important;
        padding: 3px 2px !important;
        border: 1px solid #dde2da !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview thead td {
        background: #f1f5ef !important;
        color: #4d5848 !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview thead td:nth-child(1) {
        width: 8% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview thead td:nth-child(2),
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview thead td:nth-child(3) {
        width: 25% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview thead td:nth-child(4) {
        width: 9% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview thead td:nth-child(5) {
        width: 14% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview thead td:nth-child(6) {
        width: 19% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview tbody tr:nth-child(even) td {
        background: #f8faf6 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview td.val {
        color: #3f4c39 !important;
        font-weight: 700 !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        font-variant-numeric: tabular-nums !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview td.val > i {
        display: inline-block !important;
        margin: 0 0 0 2px !important;
        vertical-align: -2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage .trav47MarketOfferAmount {
        display: inline-block !important;
        max-width: calc(100% - 19px) !important;
        color: inherit !important;
        font: inherit !important;
        direction: ltr !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage .trav47MarketOfferAmount.is-long {
        font-size: 8px !important;
        letter-spacing: -.25px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage .trav47MarketOfferResource,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage .trav47MarketOfferDuration {
        display: inline-flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        direction: ltr !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview td.tra,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview td.dur {
        direction: ltr !important;
        unicode-bidi: isolate !important;
        font-variant-numeric: tabular-nums !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview td.al {
        color: #5c762d !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview td.abo form {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSellPage table#sell_overview td.abo {
        padding: 1px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 button.trav47MarketOfferDelete {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 19px !important;
        min-width: 19px !important;
        height: 19px !important;
        min-height: 19px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #b9877c !important;
        border-radius: 4px !important;
        background: linear-gradient(#fff5f2, #ead1ca) !important;
        background-image: linear-gradient(#fff5f2, #ead1ca) !important;
        color: #9a3f31 !important;
        font: 700 14px/16px Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 0 #fff !important;
        box-shadow: inset 0 1px 0 #fff !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 button.trav47MarketOfferDelete:hover,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 button.trav47MarketOfferDelete:active {
        border-color: #a86658 !important;
        background: #e6c2b8 !important;
        color: #7f2f23 !important;
    }
}

/* Alliance / embassy interior: one clean phone skin for the native mobile
   layout and both web-on-phone directions.  This block deliberately resets
   the old carved/sprite fragments instead of layering another partial patch
   over them. */
.trav47-alliance-header-title {
    display: none;
}

@media screen and (max-width: 1024px) {
    /* Alliance sections can be much taller than the viewport (description,
       diplomacy and permission forms).  Keep the page shell fixed like the
       other phone windows and make the wrapper the single touch scroller. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage:not(.village1):not(.village2) {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage:not(.village1):not(.village2) #bodyWrapper {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: calc(100dvh - 84px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 84px) !important;
        margin: 0 !important;
        padding: 0 0 calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage:not(.village1):not(.village2)::-webkit-scrollbar,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage:not(.village1):not(.village2) #bodyWrapper::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage:not(.village1):not(.village2) #center {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage:not(.village1):not(.village2) #center #contentOuterContainer.trav47-alliance-window {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 4px 4px 6px !important;
        overflow: hidden !important;
        border: 1px solid #3e2b1d !important;
        border-radius: 6px !important;
        background: linear-gradient(90deg, #4a3222 0 4px, #a88456 4px calc(100% - 4px), #4a3222 calc(100% - 4px)) !important;
        box-shadow:
            inset 0 1px 0 #ecd5ad,
            inset 1px 0 0 rgba(255, 238, 199, .35),
            inset -1px 0 0 rgba(37, 23, 14, .7),
            inset 0 -2px 0 #5a3c27,
            0 2px 5px rgba(25, 15, 9, .42) !important;
        transform: none !important;
        box-sizing: border-box !important;
        isolation: isolate !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window {
        top: 37px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window {
        top: 37px !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window::before,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window::after,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentContainer::before,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentContainer::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentTitle {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 2px solid #b68a43 !important;
        border-radius: 4px 4px 0 0 !important;
        background-color: #4f392b !important;
        background-image:
            linear-gradient(180deg, rgba(255, 239, 205, .16) 0, rgba(255, 255, 255, 0) 32%, rgba(26, 16, 11, .22) 100%),
            url('../../images/ui/hud/content/header.jpg') !important;
        background-position: center, center bottom !important;
        background-repeat: no-repeat, repeat-x !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 238, 201, .42),
            inset 0 -1px 0 rgba(54, 35, 23, .68) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentTitle .trav47-alliance-header-title {
        position: absolute !important;
        top: 9px !important;
        right: 43px !important;
        left: 43px !important;
        display: block !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #fff4df !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 24px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 1px #2e1b10 !important;
        white-space: nowrap !important;
        -webkit-text-fill-color: #fff4df !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentTitle > #answersButton {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentTitle > #closeContentButton {
        position: absolute !important;
        top: 9px !important;
        right: auto !important;
        left: 9px !important;
        z-index: 6 !important;
        display: block !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 #263d19 !important;
        border-radius: 4px !important;
        background-color: #52772f !important;
        background-image: linear-gradient(180deg, #89aa53 0, #52772f 54%, #354f22 100%) !important;
        box-shadow: inset 0 1px 0 rgba(235, 250, 207, .48), 0 1px 2px rgba(24, 15, 9, .55) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentTitle > #closeContentButton::before {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentTitle > #closeContentButton::after {
        top: 6px !important;
        right: 6px !important;
        width: 10px !important;
        height: 10px !important;
        background-size: 10px 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentTitle > #closeContentButton svg {
        width: 10px !important;
        height: 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentContainer {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 1px solid #7e603c !important;
        border-top: 0 !important;
        border-radius: 0 0 3px 3px !important;
        background: #f5f1e7 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentFooter {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window #content.alliance {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 7px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: visible !important;
        background: #f5f1e7 !important;
        color: #403b32 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window #content.alliance > h1.titleInHeader {
        display: none !important;
    }

    /* Primary alliance tabs: no scroll arrows, sprite caps, or overhanging
       strip.  Every available tab receives the same share of the window. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance > .trav47-alliance-main-tabs {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: block !important;
        width: calc(100% + 14px) !important;
        max-width: none !important;
        height: 35px !important;
        min-height: 35px !important;
        margin: 0 -7px 9px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 1px solid #5c412b !important;
        background: #4a3427 !important;
        box-shadow: inset 0 1px 0 rgba(255, 231, 188, .22), 0 2px 3px rgba(62, 44, 29, .2) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage .trav47-alliance-main-tabs > :is(.scrollFrom, .scrollTo) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage .trav47-alliance-main-tabs > .scrollingContainer {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 35px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage .trav47-alliance-main-tabs .scrollingContainer > .content {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        display: block !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 35px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid rgba(218, 183, 124, .34) !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage .trav47-alliance-main-tabs .scrollingContainer > .content:last-child {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage .trav47-alliance-main-tabs a.tabItem {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 35px !important;
        min-height: 35px !important;
        margin: 0 !important;
        padding: 0 3px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #6b4d38 0, #513827 55%, #3d291e 100%) !important;
        color: #f6e5c8 !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 1px rgba(28, 16, 10, .85) !important;
        white-space: nowrap !important;
        box-shadow: inset 0 1px 0 rgba(255, 230, 186, .18) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage .trav47-alliance-main-tabs a.tabItem.active {
        background: linear-gradient(180deg, #8eaf4c 0, #62882c 56%, #4e711e 100%) !important;
        color: #fff !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 1px #2d4715 !important;
        box-shadow: inset 0 1px 0 rgba(238, 255, 205, .62), inset 0 -1px 0 rgba(42, 65, 20, .42) !important;
    }

    /* Section cards and headings. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance :is(h4.round, h4.chartHeadline, .trav47-alliance-section-title) {
        position: static !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 30px !important;
        margin: 8px 0 0 !important;
        padding: 5px 9px !important;
        border: 1px solid #c8d3bf !important;
        border-radius: 4px 4px 0 0 !important;
        background: linear-gradient(180deg, #edf4e9 0, #dfeadc 100%) !important;
        color: #34442e !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: right !important;
        text-shadow: none !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance :is(h4.round, h4.chartHeadline, .trav47-alliance-section-title)::before,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance :is(h4.round, h4.chartHeadline, .trav47-alliance-section-title)::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-summary-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        gap: 6px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-summary-card {
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #c8d0be !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(65, 55, 41, .08) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-summary-card > h4 {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin-top: 0 !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 1px solid #c8d0be !important;
        border-radius: 0 !important;
        line-height: 30px !important;
        text-align: right !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-summary-card > table {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        margin-bottom: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance #memberTitles table.transparent th {
        width: 58% !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
        overflow: hidden !important;
        font-size: 10.5px !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance #memberTitles table.transparent td {
        width: 42% !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
        overflow: hidden !important;
        font-size: 10.5px !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-management-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        align-self: start !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance #memberTitles {
        align-self: start !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance #memberTitles > table.transparent {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance #memberTitles > table.transparent tbody,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance #memberTitles > table.transparent tr {
        height: auto !important;
        min-height: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance #memberTitles > table.transparent tr:not(:last-child) > :is(th, td) {
        border-bottom: 1px solid #cbc4b7 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-chat-field {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        width: auto !important;
        min-width: 96px !important;
        max-width: calc(100% - 12px) !important;
        min-height: 30px !important;
        margin: 1px auto 0 !important;
        padding: 5px 14px !important;
        overflow: hidden !important;
        border: 1px solid #3d5d20 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #8eb44e 0, #678f2d 54%, #4c7020 100%) !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        line-height: 18px !important;
        text-align: center !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 1px #314a1c !important;
        box-shadow: inset 0 1px 0 rgba(237, 255, 207, .55), 0 1px 2px rgba(45, 54, 29, .32) !important;
        cursor: pointer !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-chat-field:hover,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-chat-field:focus-visible {
        background: linear-gradient(180deg, #9fc45c 0, #75a035 54%, #567e25 100%) !important;
        outline: none !important;
        box-shadow: inset 0 1px 0 rgba(244, 255, 222, .65), 0 0 0 2px rgba(120, 158, 68, .24) !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        border-spacing: 0 !important;
        border-collapse: separate !important;
        table-layout: fixed !important;
        border: 1px solid #c9c4b8 !important;
        border-radius: 0 0 4px 4px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(65, 55, 41, .08) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table :is(th, td) {
        height: auto !important;
        min-height: 27px !important;
        padding: 6px 7px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 1px solid #ebe6dc !important;
        border-left: 1px solid #ebe6dc !important;
        background: #fff !important;
        color: #403b32 !important;
        font-size: 11.5px !important;
        line-height: 16px !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        vertical-align: middle !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table tr:last-child > :is(th, td) {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table tr > :last-child {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table thead :is(th, td),
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers tbody > tr:first-child > td {
        background: #eee8da !important;
        color: #4c4337 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.transparent th {
        width: 42% !important;
        background: #faf8f2 !important;
        color: #5c5549 !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.transparent td.empty {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers .counter {
        width: 24px !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers .tribe {
        width: 32px !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
        overflow: visible !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers .tribe > i {
        position: static !important;
        display: inline-block !important;
        float: none !important;
        margin: 0 auto !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers .hab {
        width: 78px !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers tbody > tr:not(:first-child) > td.hab {
        font-variant-numeric: tabular-nums !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers .vil {
        width: 48px !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers tbody > tr:not(:first-child) > td.player {
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers tbody > tr:not(:first-child) > td.player > :is(img.online, a) {
        display: inline-block !important;
        float: none !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers tbody > tr:not(:first-child) > td.player > img.online {
        margin: 0 0 0 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers tbody > tr:not(:first-child) > td.player > a {
        max-width: calc(100% - 16px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#events .event {
        width: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#events .dat {
        width: 92px !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#events .dat center {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#offs .sub {
        width: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#offs .al {
        width: 58px !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#offs .dat {
        width: 76px !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#offs tbody td.sub > a {
        display: inline-block !important;
        float: none !important;
        width: 16px !important;
        margin: 0 0 0 4px !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#offs tbody td.sub > div {
        display: inline-block !important;
        max-width: calc(100% - 22px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#offs tbody td.sub > div > a {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#offs tbody td.none {
        width: auto !important;
        padding: 10px 6px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] .allianceNewsItem .allianceNewsText {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* The description/member switch is a compact two-segment control. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-profile-tabs {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 4px 0 8px !important;
        padding: 2px !important;
        gap: 2px !important;
        overflow: hidden !important;
        border: 1px solid #c8c1b3 !important;
        border-radius: 4px !important;
        background: #e7e1d5 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-profile-tabs > .container {
        position: static !important;
        float: none !important;
        display: block !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 3px !important;
        background: #f8f5ed !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-profile-tabs > .container.active {
        background: linear-gradient(180deg, #8eaf4c 0, #62882c 100%) !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-profile-tabs :is(.background-start, .background-end, #nestedTabFavorButton, .favorIcon) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-profile-tabs .content {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-profile-tabs a.tabItem {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 5px !important;
        color: #4b463d !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-profile-tabs > .container.active a.tabItem {
        color: #fff !important;
        text-shadow: 0 1px 1px #314b1b !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-description-card {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 0 8px !important;
        padding: 10px !important;
        border: 1px solid #d0c9bc !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #4a443b !important;
        font-size: 12px !important;
        line-height: 19px !important;
        box-shadow: 0 1px 2px rgba(61, 50, 37, .08) !important;
        box-sizing: border-box !important;
    }

    /* Attack filters: keep the icons, discard the nine-piece legacy box. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .reportFilter {
        position: relative !important;
        width: max-content !important;
        min-width: 88px !important;
        min-height: 38px !important;
        margin: 4px auto 9px !important;
        padding: 4px 7px !important;
        border: 1px solid #c8c1b3 !important;
        border-radius: 4px !important;
        background: #ebe6dc !important;
        box-shadow: inset 0 1px 0 #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .reportFilter > :not(.boxes-contents),
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .reportFilter .boxes-contents > :not(button) {
        background: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .reportFilter > :is(.boxes-tl, .boxes-tr, .boxes-tc, .boxes-ml, .boxes-mr, .boxes-mc, .boxes-bl, .boxes-br, .boxes-bc) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .reportFilter .boxes-contents {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Management options and forms. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .allianceOptionList {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        list-style: none !important;
        border: 1px solid #c9c4b8 !important;
        border-top: 0 !important;
        border-radius: 0 0 4px 4px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .allianceOptionList > li {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 4px !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .allianceOptionButton {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 5px 13px !important;
        border: 1px solid #769844 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #f6faee 0, #dce9c8 100%) !important;
        color: #385517 !important;
        font: 700 12px/17px Tahoma, Arial, sans-serif !important;
        line-height: 17px !important;
        text-align: center !important;
        text-shadow: none !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(58, 78, 29, .16) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .allianceOptionButton:hover,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .allianceOptionButton:focus-visible {
        border-color: #527b20 !important;
        background: linear-gradient(180deg, #fff 0, #d5e7b9 100%) !important;
        color: #29460d !important;
        outline: none !important;
        box-shadow: inset 0 1px 0 #fff, 0 0 0 2px rgba(92, 135, 36, .18) !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceOptionsBackWrap {
        display: flex !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin: 8px 0 5px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceOptionsBack {
        min-height: 29px !important;
        margin: 0 !important;
        padding: 4px 10px !important;
        border: 1px solid #9c927f !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fffdf8 0, #e9e2d5 100%) !important;
        color: #4b4439 !important;
        font: 700 11px/17px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(55, 45, 34, .14) !important;
        cursor: pointer !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance :is(input[type="text"], input[type="number"], input[type="password"], textarea, select) {
        max-width: 100% !important;
        min-height: 32px !important;
        padding: 6px 8px !important;
        border: 1px solid #b9b2a4 !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #3f3a32 !important;
        font: 12px/18px Tahoma, Arial, sans-serif !important;
        box-shadow: inset 0 1px 2px rgba(49, 39, 28, .09) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance textarea {
        min-height: 96px !important;
        resize: vertical !important;
    }

    /* Alliance invitation page: compact field, centered action, feedback
       directly below the action, and a touch-scroll-safe sent list. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance form.trav47AllianceInviteForm {
        width: 100% !important;
        margin: 0 !important;
        padding: 2px 0 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInviteField {
        display: grid !important;
        grid-template-columns: 67px minmax(0, 1fr) !important;
        align-items: center !important;
        width: 100% !important;
        overflow: hidden !important;
        border: 1px solid #c3d0b8 !important;
        border-radius: 5px !important;
        background: #f8faf5 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInviteField label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        padding: 6px 4px !important;
        border-left: 1px solid #c3d0b8 !important;
        background: #e7efe1 !important;
        color: #405536 !important;
        font: 700 11px/19px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInviteField input.text {
        display: block !important;
        width: calc(100% - 12px) !important;
        min-width: 0 !important;
        min-height: 34px !important;
        margin: 6px !important;
        padding: 6px 8px !important;
        border: 1px solid #9fb18f !important;
        border-radius: 5px !important;
        background: #fff !important;
        color: #34432b !important;
        font: 12px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-shadow: inset 0 1px 2px rgba(54, 70, 45, .09) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInviteSubmit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 9px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInviteSubmit > button {
        float: none !important;
        min-width: 154px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInviteSubmit .button-content {
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInviteFeedback {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceQuitFeedback {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInvitationsCard {
        width: 100% !important;
        margin: 0 0 28px !important;
        overflow: hidden !important;
        border: 1px solid #c6d1bd !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceInvitationsTable {
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        table-layout: fixed !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceInvitationsTable td {
        height: 36px !important;
        padding: 5px 7px !important;
        border: 0 !important;
        border-bottom: 1px solid #e0e6da !important;
        background: #fff !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceInvitationsTable tr:last-child td {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceInvitationsTable td.abo {
        width: 39px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceInvitedPlayer {
        display: block !important;
        overflow: hidden !important;
        color: #5f861f !important;
        font: 700 11px/19px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance button.trav47AllianceInvitationCancel {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 23px !important;
        min-width: 23px !important;
        height: 23px !important;
        min-height: 23px !important;
        margin: 0 !important;
        padding: 0 0 2px !important;
        border: 1px solid #ca9d94 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fff 0, #f3ded9 100%) !important;
        color: #a33a2d !important;
        font: 700 17px/20px Arial, sans-serif !important;
        box-shadow: inset 0 1px 0 #fff !important;
        box-sizing: border-box !important;
    }

    /* Add-administrator form: compact copy, a wider modern member picker,
       and a centered action shared by all three phone layouts. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceAssignAdmin {
        width: 100% !important;
        margin: 0 !important;
        table-layout: fixed !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceAssignAdmin .trav47AllianceAssignIntro {
        width: 100% !important;
        padding: 8px !important;
        color: #445b31 !important;
        font-size: 12px !important;
        line-height: 18px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceAssignAdmin tr:last-child > th {
        width: 28% !important;
        padding: 7px 6px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceAssignAdmin tr:last-child > td {
        width: 72% !important;
        padding: 6px 8px !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceSelectWrap {
        position: relative !important;
        display: inline-flex !important;
        width: min(190px, 100%) !important;
        max-width: 100% !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceSelectWrap::after {
        content: "▾" !important;
        position: absolute !important;
        top: 50% !important;
        left: 9px !important;
        color: #4f702a !important;
        font-size: 12px !important;
        line-height: 1 !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance select.trav47AllianceMemberSelect {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 100% !important;
        min-height: 34px !important;
        padding: 6px 9px 6px 28px !important;
        border: 1px solid #91a675 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #fff 0, #f0f5e9 100%) !important;
        color: #34432b !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(55, 75, 35, .14) !important;
        cursor: pointer !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance select.trav47AllianceMemberSelect:focus {
        border-color: #628b32 !important;
        outline: none !important;
        box-shadow: inset 0 1px 0 #fff, 0 0 0 2px rgba(101, 143, 51, .18) !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance select.trav47AllianceMemberSelect option {
        padding: 6px !important;
        background: #fff !important;
        color: #34432b !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceAssignSubmit {
        display: flex !important;
        clear: both !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceAssignSubmit > button {
        float: none !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance form.trav47AllianceKickForm {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceKickTable {
        overflow: hidden !important;
        border: 1px solid #c8d3bf !important;
        border-radius: 0 0 5px 5px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceKickTable tr:last-child > :is(th, td) {
        height: 48px !important;
        border-bottom: 0 !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceKickTable tr:last-child > th {
        background: #e8f0e3 !important;
        color: #405536 !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceKickTable tr:last-child > td {
        background: #f8faf5 !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceKickSelectWrap {
        width: min(220px, 100%) !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance select.trav47AllianceKickSelect {
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-align-last: center !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance select.trav47AllianceKickSelect option {
        font-family: Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceDiplomacyHint {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 7px 0 0 !important;
        padding: 6px 8px !important;
        border: 1px solid #d9b3ab !important;
        border-radius: 4px !important;
        background: #fff2ef !important;
        color: #a13429 !important;
        font: 700 11px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        white-space: normal !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceDiplomacyHint.success {
        border-color: #b8cf98 !important;
        background: #f1f8e8 !important;
        color: #4e7421 !important;
    }

    /* Alliance name editor: replace the old compact table/input skin with
       two balanced rows and site-native typography. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance form.trav47AllianceRenameForm {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceRenameTable {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        overflow: visible !important;
        border: 1px solid #c8d3bf !important;
        border-radius: 0 0 5px 5px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceRenameTable > tbody {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceRenameTable tr {
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 42px !important;
        overflow: hidden !important;
        border: 1px solid #dce4d6 !important;
        border-radius: 4px !important;
        background: #f8faf5 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceRenameTable :is(th, td) {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceRenameTable th {
        justify-content: center !important;
        width: 68px !important;
        min-width: 68px !important;
        padding: 5px 6px !important;
        border: 0 !important;
        border-left: 1px solid #d2dec9 !important;
        background: #e8f0e3 !important;
        color: #405536 !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceRenameTable td {
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 4px 7px !important;
        border: 0 !important;
        background: transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceRenameTable input.text {
        display: block !important;
        width: min(100%, 230px) !important;
        min-width: 0 !important;
        max-width: 230px !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 auto !important;
        padding: 0 9px !important;
        border: 1px solid #9ead91 !important;
        border-radius: 4px !important;
        outline: 0 !important;
        background: #fff !important;
        color: #344436 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 30px !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-shadow: none !important;
        box-shadow: inset 0 1px 2px rgba(58, 75, 46, .1) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.trav47AllianceRenameTable input.text:focus {
        border-color: #6f963e !important;
        box-shadow: 0 0 0 2px rgba(111, 150, 62, .18), inset 0 1px 2px rgba(58, 75, 46, .08) !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceRenameSubmit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceRenameSubmit > button {
        float: none !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceRenameError {
        width: 100% !important;
        margin: 9px 0 0 !important;
        padding: 7px 9px !important;
        border: 1px solid #d9aaa3 !important;
        border-radius: 4px !important;
        background: #fae9e6 !important;
        color: #9b3028 !important;
        font: 700 11.5px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* One full-width alliance description editor.  The legacy form exposed
       two floated textareas; the public profile now uses a single field. */
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance form.trav47AllianceDescriptionForm {
        width: 100% !important;
        margin: 0 !important;
        padding: 9px 0 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance textarea.trav47AllianceDescriptionField {
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 190px !important;
        min-height: 190px !important;
        margin: 0 0 8px !important;
        padding: 10px 11px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid #a9b99d !important;
        border-radius: 5px !important;
        outline: 0 !important;
        background: #fff !important;
        color: #354238 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 19px !important;
        text-align: right !important;
        text-shadow: none !important;
        resize: vertical !important;
        box-shadow: inset 0 1px 3px rgba(54, 70, 45, .1) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance textarea.trav47AllianceDescriptionField:focus {
        border-color: #6f963e !important;
        box-shadow: 0 0 0 2px rgba(111, 150, 62, .18), inset 0 1px 2px rgba(54, 70, 45, .08) !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceDescriptionTools {
        position: relative !important;
        z-index: 6 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 7px 0 0 !important;
        gap: 6px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceMedalsSwitchWrap,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceGuideTool {
        position: relative !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceMedalsSwitchWrap #switchMedals,
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance button.trav47AllianceGuideToggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 5px 7px !important;
        border: 1px solid #a9bb98 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #f8fbf5 0, #e2edd9 100%) !important;
        color: #405d2d !important;
        font: 700 11.5px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 0 #fff !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(61, 78, 44, .12) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceGuideArrow {
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        margin-right: 6px !important;
        border-right: 4px solid transparent !important;
        border-left: 4px solid transparent !important;
        border-top: 5px solid #58783e !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceGuideMenu {
        position: absolute !important;
        top: calc(100% + 3px) !important;
        left: 0 !important;
        z-index: 30 !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 3px !important;
        overflow: hidden !important;
        border: 1px solid #aebda1 !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: 0 4px 10px rgba(48, 60, 38, .24) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceGuideMenu[hidden] {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceGuideMenu button {
        display: block !important;
        width: 100% !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 4px 7px !important;
        border: 0 !important;
        border-bottom: 1px solid #e1e8dc !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #3d5230 !important;
        font: 700 10.5px/19px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceGuideMenu button:last-child {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceGuideMenu button.trav47AllianceGuideOptionUsed {
        background: #eeeeec !important;
        color: #8a8a84 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance form.trav47AllianceDescriptionForm #medals {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
        padding: 6px !important;
        border: 1px solid #c9d4c1 !important;
        border-radius: 5px !important;
        background: #f4f7f1 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceMedalsGrid {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: start !important;
        width: 100% !important;
        gap: 5px 3px !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance button.trav47AllianceMedalButton {
        display: flex !important;
        flex: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 76px !important;
        margin: 0 !important;
        padding: 3px 1px 2px !important;
        overflow: hidden !important;
        border: 1px solid #bdceae !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #fbfdf8 0, #e7efe0 100%) !important;
        color: #46652b !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(61, 78, 44, .13) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance button.trav47AllianceMedalButton.trav47AllianceMedalButtonUsed {
        border-color: #c7c7c7 !important;
        background: linear-gradient(180deg, #f2f2f2 0, #dddddd 100%) !important;
        color: #777 !important;
        box-shadow: inset 0 1px 0 #fff !important;
        cursor: default !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceMedalImage {
        display: block !important;
        width: 34px !important;
        height: 47px !important;
        margin: 0 auto 2px !important;
        object-fit: contain !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceMedalButtonUsed .trav47AllianceMedalImage {
        filter: grayscale(1) saturate(.2) !important;
        opacity: .36 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceMedalName {
        display: block !important;
        width: 100% !important;
        min-height: 12px !important;
        overflow: hidden !important;
        color: inherit !important;
        font: 700 9.5px/12px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceMedalsEmpty {
        margin: 0 !important;
        padding: 8px !important;
        color: #687364 !important;
        font: 11px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceDescriptionSubmit {
        display: flex !important;
        clear: both !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceDescriptionSubmit > button {
        float: none !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceDescriptionError {
        width: 100% !important;
        margin: 9px 0 0 !important;
        padding: 7px 9px !important;
        border: 1px solid #d9aaa3 !important;
        border-radius: 4px !important;
        background: #fae9e6 !important;
        color: #9b3028 !important;
        font: 700 11.5px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance :is(p.option, form > p:not(.error):not(.error3)) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .switchWrap:not(.trav47AllianceMedalsSwitchWrap) {
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 7px !important;
        border: 1px solid #cbc4b7 !important;
        border-radius: 4px !important;
        background: #f0ece3 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .openedClosedSwitch {
        float: none !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .boxes.infos {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 9px 0 !important;
        padding: 9px !important;
        border: 1px solid #c7d3bd !important;
        border-radius: 4px !important;
        background: #edf4e9 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .boxes.infos > :is(.boxes-tl, .boxes-tr, .boxes-tc, .boxes-ml, .boxes-mr, .boxes-mc, .boxes-bl, .boxes-br, .boxes-bc) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .boxes.infos > .boxes-contents {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: #405038 !important;
        font-size: 11.5px !important;
        line-height: 18px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .boxes.infos .title {
        margin: 0 0 4px !important;
        color: #34442e !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 1px solid #c8d3bf !important;
        border-radius: 0 0 5px 5px !important;
        background: #fff !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration > thead {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration > tbody > tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration > tbody > tr > td {
        position: static !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 6px 9px !important;
        overflow: visible !important;
        border: 1px solid #e0e5d8 !important;
        border-radius: 4px !important;
        background: #f8faf5 !important;
        color: #3f4938 !important;
        direction: rtl !important;
        text-align: right !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration > tbody > tr > td::before {
        content: attr(data-permission-label) !important;
        display: inline-block !important;
        min-width: 0 !important;
        padding-left: 8px !important;
        color: #455b34 !important;
        font: 700 11.5px/17px Tahoma, Arial, sans-serif !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration td.name {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 38px !important;
        overflow: visible !important;
        border-color: #c7d6b7 !important;
        background: linear-gradient(180deg, #eef5e8 0, #e2edd9 100%) !important;
        color: #547c22 !important;
        font-weight: 700 !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration td.right input.check {
        flex: 0 0 19px !important;
        width: 19px !important;
        height: 19px !important;
        margin: 0 !important;
        accent-color: #648e2c !important;
        cursor: pointer !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration td.title {
        gap: 8px !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table#memberAdministration td.title input.text {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 190px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AlliancePermissionsSubmit {
        display: flex !important;
        clear: both !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47AlliancePermissionsSubmit > button {
        float: none !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance :is(.error, .error3) {
        width: 100% !important;
        margin: 7px 0 !important;
        color: #b33a2f !important;
        font-size: 11.5px !important;
        line-height: 17px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .clear {
        clear: both !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
}

#oasesOwned .ownedOasisMobileResources {
    display: none;
}

html.trav47OasisConfirmOpen {
    overflow: hidden !important;
}

.trav47OasisConfirm[hidden] {
    display: none !important;
}

.trav47OasisConfirm {
    position: fixed !important;
    z-index: 100000 !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    background: rgba(25, 33, 27, .62) !important;
    backdrop-filter: blur(2px) !important;
    direction: rtl !important;
}

.trav47OasisConfirm__dialog {
    box-sizing: border-box !important;
    width: min(330px, calc(100vw - 32px)) !important;
    overflow: hidden !important;
    color: #314047 !important;
    background: linear-gradient(180deg, #fbfdf9 0%, #eef5eb 100%) !important;
    border: 1px solid #9eb493 !important;
    border-radius: 11px !important;
    box-shadow: 0 14px 38px rgba(10, 18, 12, .34), inset 0 1px 0 #fff !important;
    font-family: Tahoma, Arial, sans-serif !important;
    text-align: right !important;
}

.trav47OasisConfirm__dialog h3 {
    box-sizing: border-box !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 10px 14px 9px !important;
    color: #344b36 !important;
    background: linear-gradient(180deg, #e9f2e4 0%, #d8e7d1 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid #b9cbb1 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 19px !important;
}

.trav47OasisConfirm__dialog p {
    margin: 0 !important;
    padding: 18px 16px 14px !important;
    color: #43514d !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

.trav47OasisConfirm__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 16px 16px !important;
}

.trav47OasisConfirm__actions button {
    position: static !important;
    box-sizing: border-box !important;
    min-width: 92px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(48,62,45,.18) !important;
    font: 700 12px/32px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
    text-shadow: none !important;
    cursor: pointer !important;
}

.trav47OasisConfirm__delete {
    color: #fff !important;
    background: linear-gradient(180deg, #c76554 0%, #a94436 100%) !important;
    border: 1px solid #8f392e !important;
}

.trav47OasisConfirm__cancel {
    color: #314538 !important;
    background: linear-gradient(180deg, #f9fbf7 0%, #dfe9da 100%) !important;
    border: 1px solid #a9bba0 !important;
}

.trav47OasisConfirm__actions button:focus-visible {
    outline: 2px solid #6f951f !important;
    outline-offset: 2px !important;
}

.heroOasesPanel .oasisReleasePending {
    display: inline-grid !important;
    flex: 0 0 106px !important;
    grid-template-columns: auto auto !important;
    align-items: center !important;
    gap: 2px 5px !important;
    box-sizing: border-box !important;
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    overflow: hidden !important;
    padding: 3px 6px 4px !important;
    color: #7b4639 !important;
    background: #fff4ec !important;
    border: 1px solid #d6aa94 !important;
    border-radius: 6px !important;
    font: 700 9px/1.15 Tahoma, Arial, sans-serif !important;
    white-space: nowrap !important;
    direction: rtl !important;
}

.heroOasesPanel .oasisReleasePending__time {
    display: inline-block !important;
    min-width: 39px !important;
    color: #a34635 !important;
    font: 700 9px/1 Tahoma, Arial, sans-serif !important;
    text-align: center !important;
    white-space: nowrap !important;
    direction: ltr !important;
}

.heroOasesPanel .oasisReleasePending__track {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    overflow: hidden !important;
    background: #e7d6cc !important;
    border-radius: 3px !important;
    direction: ltr !important;
}

.heroOasesPanel .oasisReleasePending__track i {
    display: block !important;
    width: 100%;
    height: 100% !important;
    margin: 0 !important;
    background: linear-gradient(90deg, #c85c49, #e18a67) !important;
    border-radius: inherit !important;
    transition: width .25s linear !important;
}

/* Hero's Mansion oasis overview: compact cards for all three phone layouts. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesPanel {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 3px 18px !important;
        color: #2f3d42 !important;
        font-family: Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTitle {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        box-sizing: border-box !important;
        min-height: 35px !important;
        margin: 0 0 7px !important;
        padding: 7px 10px !important;
        color: #31454d !important;
        background: linear-gradient(180deg, #f2f7ef 0%, #e3eee1 100%) !important;
        border: 1px solid #c7d7c3 !important;
        border-radius: 7px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(72, 91, 63, .09) !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTitle strong {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #587d16 !important;
        font-weight: 700 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTitle em {
        flex: 0 0 auto !important;
        min-width: 30px !important;
        margin-inline-start: auto !important;
        padding: 2px 6px !important;
        color: #66736b !important;
        background: rgba(255, 255, 255, .76) !important;
        border: 1px solid #ccd6ca !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        text-align: center !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTitle.spacer {
        margin-top: 12px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable tbody {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-collapse: separate !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable.isEmpty,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable thead {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable tbody {
        display: grid !important;
        gap: 7px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(92px, auto) !important;
        grid-template-areas:
            "type coords"
            "owner village"
            "resources resources" !important;
        gap: 0 8px !important;
        box-sizing: border-box !important;
        min-height: 82px !important;
        padding: 8px 9px !important;
        background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,245,236,.98)) !important;
        border: 1px solid #c8d6c4 !important;
        border-radius: 8px !important;
        box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(67, 83, 61, .09) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td {
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 24px !important;
        padding: 2px 0 !important;
        overflow: visible !important;
        color: #45535a !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: right !important;
        direction: rtl !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td::before {
        flex: 0 0 auto !important;
        margin-left: 5px !important;
        color: #7b877f !important;
        content: attr(data-label) ":" !important;
        font-size: 9.5px !important;
        font-weight: 400 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td.type {
        grid-area: type !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td.type::before,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td.coords::before {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td.type a {
        color: #5d850c !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td.coords {
        grid-area: coords !important;
        justify-content: flex-end !important;
        color: #53656e !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        direction: ltr !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.nam,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned td.zp {
        grid-area: owner !important;
        justify-content: flex-start !important;
        padding-top: 5px !important;
        border-top: 1px solid rgba(156, 173, 151, .35) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.vil,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned td.owned {
        grid-area: village !important;
        justify-content: flex-end !important;
        padding-top: 5px !important;
        border-top: 1px solid rgba(156, 173, 151, .35) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td.res {
        grid-area: resources !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        padding-top: 5px !important;
        border-top: 1px solid rgba(156, 173, 151, .35) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td.res span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        color: #314a38 !important;
        font-weight: 700 !important;
        direction: ltr !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesTable td.res i {
        display: inline-block !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned tbody tr {
        grid-template-columns: minmax(76px, auto) minmax(0, 1fr) !important;
        grid-template-areas:
            "coords type"
            "village owner" !important;
        min-height: 62px !important;
        padding: 7px 9px !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned td.type {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned td.coords {
        justify-content: flex-start !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned .ownedOasisMobileResources {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        gap: 5px !important;
        color: #314a38 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned .ownedOasisMobileResources > span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned .ownedOasisMobileResources i {
        display: inline-block !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesOwned td.res {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesPanel .nextOases {
        position: relative !important;
        box-sizing: border-box !important;
        min-height: 34px !important;
        margin: 5px 0 0 !important;
        padding: 8px 37px 8px 9px !important;
        color: #68736d !important;
        background: linear-gradient(180deg, #fafbf8, #f0f3ed) !important;
        border: 1px dashed #c6cec2 !important;
        border-radius: 7px !important;
        font-size: 10.5px !important;
        line-height: 1.35 !important;
        opacity: 1 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content .heroOasesPanel .nextOases::before {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        width: 17px !important;
        height: 17px !important;
        color: #6f8f35 !important;
        content: "+" !important;
        transform: translateY(-50%) !important;
        border: 1px solid #aebc9b !important;
        border-radius: 50% !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
        text-align: center !important;
    }

    /* Nearby oases are comparison data: keep them as a real, compact table. */
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        overflow: hidden !important;
        background: #f9fbf7 !important;
        border: 1px solid #c5d1bf !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 3px rgba(66, 83, 59, .08) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround thead {
        display: table-header-group !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround tbody {
        display: table-row-group !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround tr,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround tbody tr {
        display: table-row !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: #fbfcfa !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround tbody tr:nth-child(even) {
        background: #f0f5ed !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.type,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.nam,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.vil,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.coords,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.res {
        display: table-cell !important;
        box-sizing: border-box !important;
        height: 34px !important;
        min-height: 0 !important;
        padding: 4px 3px !important;
        overflow: hidden !important;
        color: #435047 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #d5ddd1 !important;
        border-left: 1px solid #e0e6dd !important;
        font: 400 9.5px/1.25 Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround thead td {
        height: 30px !important;
        padding: 4px 2px !important;
        color: #344139 !important;
        background: linear-gradient(180deg, #eaf1e5, #dce7d7) !important;
        border-bottom-color: #b8c7b2 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td:last-child {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td::before {
        display: none !important;
        content: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td:nth-child(1) { width: 21% !important; }
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td:nth-child(2) { width: 15% !important; }
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td:nth-child(3) { width: 23% !important; }
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td:nth-child(4) { width: 20% !important; }
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td:nth-child(5) { width: 21% !important; }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.nam,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.vil {
        padding-right: 4px !important;
        padding-left: 4px !important;
        font-size: 9px !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.type,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.type a {
        color: #5c800f !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.coords {
        direction: ltr !important;
        font-weight: 700 !important;
        padding-right: 1px !important;
        padding-left: 1px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.coords a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.coords .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.res span {
        display: inline-flex !important;
        gap: 1px !important;
        margin: 0 1px !important;
        font-size: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround td.res i {
        flex-basis: 15px !important;
        width: 15px !important;
        height: 15px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround tr.dualResourceOasis td {
        height: 44px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround tr.dualResourceOasis td.res {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #oasesSurround tr.dualResourceOasis td.res span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 18px !important;
        margin: 0 !important;
    }
}

/* Hero's Mansion: reuse the phone oasis-card visual language on desktop. */
@media screen and (min-width: 1025px) {
    html#mainLayout body.build #content #build.gid37 .heroOasesPanel {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 5px 20px !important;
        color: #2f3d42 !important;
        font-family: Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout body.build #content #build.gid37 .heroOasesTitle {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        min-height: 37px !important;
        margin: 0 0 8px !important;
        padding: 8px 11px !important;
        color: #31454d !important;
        background: linear-gradient(180deg, #f2f7ef 0%, #e3eee1 100%) !important;
        border: 1px solid #c7d7c3 !important;
        border-radius: 7px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(72, 91, 63, .09) !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    html#mainLayout body.build #content #build.gid37 .heroOasesTitle strong {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #587d16 !important;
        font-weight: 700 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout body.build #content #build.gid37 .heroOasesTitle em {
        flex: 0 0 auto !important;
        min-width: 34px !important;
        margin-inline-start: auto !important;
        padding: 2px 7px !important;
        color: #66736b !important;
        background: rgba(255, 255, 255, .76) !important;
        border: 1px solid #ccd6ca !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        text-align: center !important;
        direction: ltr !important;
    }

    html#mainLayout body.build #content #build.gid37 .heroOasesTitle.spacer {
        margin-top: 13px !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned,
    html#mainLayout body.build #content #build.gid37 #oasesOwned tbody {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-collapse: separate !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned.isEmpty,
    html#mainLayout body.build #content #build.gid37 #oasesOwned thead {
        display: none !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned tbody {
        display: grid !important;
        gap: 7px !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned tbody tr {
        display: grid !important;
        grid-template-columns: minmax(88px, auto) minmax(0, 1fr) !important;
        grid-template-areas:
            "coords type"
            "village owner" !important;
        gap: 0 10px !important;
        box-sizing: border-box !important;
        min-height: 66px !important;
        padding: 8px 10px !important;
        background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,245,236,.98)) !important;
        border: 1px solid #c8d6c4 !important;
        border-radius: 8px !important;
        box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(67, 83, 61, .09) !important;
        direction: ltr !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td {
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 25px !important;
        padding: 2px 0 !important;
        overflow: visible !important;
        color: #45535a !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: right !important;
        direction: rtl !important;
        white-space: normal !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td::before {
        flex: 0 0 auto !important;
        margin-left: 5px !important;
        color: #7b877f !important;
        content: attr(data-label) ":" !important;
        font-size: 9.5px !important;
        font-weight: 400 !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td.type {
        grid-area: type !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        color: #5d850c !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td.type::before,
    html#mainLayout body.build #content #build.gid37 #oasesOwned td.coords::before {
        display: none !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td.type a {
        color: #5d850c !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td.coords {
        grid-area: coords !important;
        justify-content: flex-start !important;
        color: #53656e !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        direction: ltr !important;
        white-space: nowrap !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td.zp {
        grid-area: owner !important;
        justify-content: flex-start !important;
        padding-top: 5px !important;
        border-top: 1px solid rgba(156, 173, 151, .35) !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td.owned {
        grid-area: village !important;
        justify-content: flex-end !important;
        padding-top: 5px !important;
        border-top: 1px solid rgba(156, 173, 151, .35) !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned .ownedOasisMobileResources {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        gap: 6px !important;
        color: #314a38 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        direction: ltr !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned .ownedOasisMobileResources > span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        white-space: nowrap !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned .ownedOasisMobileResources i {
        display: inline-block !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesOwned td.res {
        display: none !important;
    }

    html#mainLayout body.build #content #build.gid37 .nextOases {
        position: relative !important;
        box-sizing: border-box !important;
        min-height: 34px !important;
        margin: 5px 0 0 !important;
        padding: 8px 37px 8px 9px !important;
        color: #68736d !important;
        background: linear-gradient(180deg, #fafbf8, #f0f3ed) !important;
        border: 1px dashed #c6cec2 !important;
        border-radius: 7px !important;
        font-size: 10.5px !important;
        line-height: 1.35 !important;
        opacity: 1 !important;
    }

    html#mainLayout body.build #content #build.gid37 .nextOases::before {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        width: 17px !important;
        height: 17px !important;
        color: #6f8f35 !important;
        content: "+" !important;
        transform: translateY(-50%) !important;
        border: 1px solid #aebc9b !important;
        border-radius: 50% !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
        text-align: center !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround {
        display: table !important;
        width: 100% !important;
        margin: 0 !important;
        table-layout: fixed !important;
        overflow: hidden !important;
        background: #f9fbf7 !important;
        border: 1px solid #c5d1bf !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 3px rgba(66, 83, 59, .08) !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround thead {
        display: table-header-group !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround tbody {
        display: table-row-group !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround tr,
    html#mainLayout body.build #content #build.gid37 #oasesSurround tbody tr {
        display: table-row !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: #fbfcfa !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround tbody tr:nth-child(even) {
        background: #f0f5ed !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround td {
        display: table-cell !important;
        box-sizing: border-box !important;
        height: 36px !important;
        min-height: 0 !important;
        padding: 5px 4px !important;
        overflow: hidden !important;
        color: #435047 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #d5ddd1 !important;
        border-left: 1px solid #e0e6dd !important;
        font: 400 10px/1.3 Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround thead td {
        height: 32px !important;
        color: #344139 !important;
        background: linear-gradient(180deg, #eaf1e5, #dce7d7) !important;
        border-bottom-color: #b8c7b2 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround td:last-child {
        border-left: 0 !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround td:nth-child(1) { width: 21% !important; }
    html#mainLayout body.build #content #build.gid37 #oasesSurround td:nth-child(2) { width: 15% !important; }
    html#mainLayout body.build #content #build.gid37 #oasesSurround td:nth-child(3) { width: 23% !important; }
    html#mainLayout body.build #content #build.gid37 #oasesSurround td:nth-child(4) { width: 20% !important; }
    html#mainLayout body.build #content #build.gid37 #oasesSurround td:nth-child(5) { width: 21% !important; }

    html#mainLayout body.build #content #build.gid37 #oasesSurround td.type,
    html#mainLayout body.build #content #build.gid37 #oasesSurround td.type a {
        color: #5c800f !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround td.coords {
        direction: ltr !important;
        font-weight: 700 !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround td.coords .clear {
        display: none !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround td.res span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
        margin: 0 2px !important;
        font-size: 9.5px !important;
        direction: ltr !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround td.res i {
        display: inline-block !important;
        width: 15px !important;
        height: 15px !important;
        margin: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    html#mainLayout body.build #content #build.gid37 #oasesSurround tr.dualResourceOasis td {
        height: 44px !important;
    }
}

/* Desktop link-list editor: reuse the phone shortcut catalogue in a focused
   modal, while keeping every rule away from the three phone layouts. */
@media screen and (min-width: 1025px) {
    html#mainLayout[data-trav47-layout="desktop"] {
        scrollbar-gutter: auto !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body {
        overflow-y: auto !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow {
        min-height: 40px !important;
        margin: -4px 0 5px !important;
        padding: 2px 5px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .boxTitle {
        line-height: 32px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl {
        display: flex !important;
        flex: 0 0 36px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl > #buttonSbCOS5JTM2euX {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl > #buttonSbCOS5JTM2euX svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47DesktopQuickLinksOpen {
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .travian-mobile-quick-access.trav47-desktop-link-editor-open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 120500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 18px !important;
        overflow: hidden !important;
        direction: rtl !important;
        background: rgba(27, 24, 18, .28) !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open > .travian-mobile-quick-buttons {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-popover[hidden],
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-notice[hidden] {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-popover:not([hidden]) {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: min(450px, calc(100vw - 36px)) !important;
        max-height: calc(100vh - 36px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #493222 !important;
        border-radius: 10px !important;
        color: #3e2d1b !important;
        direction: rtl !important;
        background: linear-gradient(to bottom, #f7ecd1 0%, #ead8ad 100%) !important;
        box-shadow: 0 12px 32px rgba(24, 15, 9, .5), inset 0 1px 0 rgba(255, 248, 222, .78) !important;
        font-family: Tahoma, Arial, sans-serif !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-panel-header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 7px 48px !important;
        border-bottom: 1px solid #493222 !important;
        background: linear-gradient(to bottom, #87684a 0%, #60452f 52%, #3f2c20 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 239, 201, .34) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-panel-title {
        position: relative !important;
        margin: 0 !important;
        padding-right: 20px !important;
        color: #fff3d2 !important;
        font: 700 15px/28px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #24160e !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-panel-title::before {
        content: "↗" !important;
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        color: #b8d86a !important;
        font: 700 16px/1 Arial, sans-serif !important;
        transform: translateY(-50%) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-panel-close {
        position: absolute !important;
        top: 7px !important;
        left: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 29px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 0 0 2px !important;
        border: 1px solid #2e5012 !important;
        border-radius: 6px !important;
        color: #fff9df !important;
        background: linear-gradient(to bottom, #78aa34, #436f18) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 1px 2px rgba(0,0,0,.35) !important;
        font: 700 19px/24px Arial, sans-serif !important;
        text-shadow: 0 1px 1px #26340f !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-links-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        max-height: 330px !important;
        overflow: auto !important;
        padding: 12px 12px 8px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-links-list a {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 7px 11px 7px 30px !important;
        border: 1px solid #b79a69 !important;
        border-radius: 6px !important;
        color: #315b14 !important;
        background: linear-gradient(to bottom, #fffaf0, #efe1bd) !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(81,57,30,.14) !important;
        font: 700 13px/22px Tahoma, Arial, sans-serif !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-links-list a::after {
        content: "‹" !important;
        position: absolute !important;
        top: 50% !important;
        left: 10px !important;
        color: #70962c !important;
        font: 700 19px/1 Arial, sans-serif !important;
        transform: translateY(-52%) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-empty,
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-editor-empty {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 70px !important;
        padding: 10px !important;
        border: 1px dashed #b79a69 !important;
        border-radius: 7px !important;
        color: #745d3a !important;
        background: rgba(255, 250, 235, .56) !important;
        font: 700 13px/21px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-link-actions,
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-form-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        margin: 5px 12px 12px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-edit,
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-suggestions-button,
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-save,
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-cancel {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 110px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 6px 16px !important;
        border: 1px solid #365d13 !important;
        border-radius: 6px !important;
        color: #fff9df !important;
        background: linear-gradient(to bottom, #7eaf35, #4d811c) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(47,35,19,.28) !important;
        font: 700 13px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #29420f !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-suggestions-button,
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-cancel {
        border-color: #8b7045 !important;
        color: #59401f !important;
        background: linear-gradient(to bottom, #fff8e6, #dcc38e) !important;
        text-shadow: 0 1px 0 #fff4d2 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-editor-head,
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-editor-row {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 7px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-editor-head {
        margin: 9px 18px 0 !important;
        color: #735b38 !important;
        font: 700 11px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-editor-rows,
    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-suggestions-list {
        display: grid !important;
        gap: 7px !important;
        max-height: 390px !important;
        overflow: auto !important;
        padding: 10px 12px 5px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-editor-row {
        padding: 7px !important;
        border: 1px solid #b89b6c !important;
        border-radius: 7px !important;
        background: rgba(255, 249, 232, .72) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-order {
        grid-column: 1 !important;
        width: 100% !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 4px !important;
        border: 1px solid #a98d61 !important;
        border-radius: 5px !important;
        color: #47341e !important;
        background: #fffdf7 !important;
        font: 400 13px/20px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-editor-name {
        grid-column: 2 !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 4px 9px !important;
        color: #3f321f !important;
        font: 700 13px/22px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-suggestion {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 7px 11px !important;
        border: 1px solid #b79a69 !important;
        border-radius: 6px !important;
        color: #4a391f !important;
        background: linear-gradient(to bottom, #fffaf0, #efe1bd) !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(81,57,30,.14) !important;
        font: 700 13px/22px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-suggestion > b {
        flex: 0 0 auto !important;
        min-width: 48px !important;
        padding: 2px 7px !important;
        border: 1px solid #aa8e5f !important;
        border-radius: 10px !important;
        color: #725a37 !important;
        background: #eadbb6 !important;
        font: 700 10px/16px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-suggestion.is-selected {
        border-color: #72962e !important;
        color: #315b14 !important;
        background: linear-gradient(to bottom, #f3f8df, #dce9b9) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-suggestion.is-selected > b {
        border-color: #628728 !important;
        color: #fff !important;
        background: #638d27 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body > .trav47-desktop-link-editor-open .travian-mobile-quick-notice:not([hidden]) {
        position: fixed !important;
        top: 24px !important;
        left: 50% !important;
        z-index: 120510 !important;
        display: block !important;
        max-width: calc(100vw - 40px) !important;
        padding: 7px 12px !important;
        border: 1px solid rgba(91,61,28,.85) !important;
        border-radius: 5px !important;
        color: #fff7db !important;
        background: rgba(66,43,27,.96) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.38) !important;
        font: 700 13px/18px Tahoma, Arial, sans-serif !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
    }
}

/* Phone layouts only: hero piggy-bank shortcut at the very end of the
   information drawer opened by the right footer ear. */
#trav47PiggyMobileSidebarBox {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    html#mainLayout body #trav47PiggyMobileSidebarBox {
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
        width: calc(100% - 10px) !important;
        min-height: 55px !important;
        margin: 8px 5px 4px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #a9b99e !important;
        border-radius: 7px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(232, 239, 225, .96) 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(51, 70, 37, .14) !important;
    }

    html#mainLayout body #trav47PiggyMobileSidebarBox[hidden] {
        display: none !important;
    }

    html#mainLayout body #trav47PiggyMobileSidebarBox > .content {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 53px !important;
        margin: 0 !important;
        padding: 5px !important;
        border: 0 !important;
        background: transparent !important;
    }

    html#mainLayout body #trav47PiggyMobileSidebarBox .trav47PiggyMobileLauncher {
        position: relative !important;
        display: block !important;
        box-sizing: content-box !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background-color: transparent !important;
        background-image: url('../../images/Piggy.png') !important;
        background-repeat: no-repeat !important;
        background-size: 100% 300% !important;
        background-position: center top !important;
        box-shadow: none !important;
        filter: drop-shadow(0 2px 2px rgba(24, 19, 10, .38)) !important;
        cursor: pointer !important;
        transform: none !important;
    }

    html#mainLayout body #trav47PiggyMobileSidebarBox .trav47PiggyMobileLauncher.is-full {
        background-position: center center !important;
    }

    html#mainLayout body #trav47PiggyMobileSidebarBox .trav47PiggyMobileLauncher.is-empty {
        background-position: center bottom !important;
        opacity: 1 !important;
        cursor: default !important;
        filter: drop-shadow(0 1px 1px rgba(24, 19, 10, .25)) !important;
    }

    html#mainLayout body #trav47PiggyMobileSidebarBox .trav47PiggyMobileLauncher.is-empty::after {
        content: "فارغ";
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        padding: 0 4px 1px;
        border: 1px solid rgba(239, 213, 146, .8);
        border-radius: 6px;
        color: #fff2c9;
        background: rgba(48, 34, 17, .86);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
        font: 700 9px/13px Tahoma, Arial, sans-serif;
        white-space: nowrap;
        pointer-events: none;
        transform: translate(-50%, -50%);
    }

    html#mainLayout body #trav47PiggyMobileSidebarBox .trav47PiggyMobileLauncher:not(.is-empty):active {
        transform: scale(.96) !important;
    }

    html#mainLayout body .trav47PiggyModal:not([hidden]) {
        position: fixed !important;
        z-index: 120000 !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        direction: rtl !important;
    }

    html#mainLayout body .trav47PiggyModalBackdrop {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: rgba(19, 23, 18, .28) !important;
    }

    html#mainLayout body .trav47PiggyModalPanel {
        position: relative !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        width: min(420px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: auto !important;
        border: 1px solid #8f795d !important;
        border-radius: 9px !important;
        background: linear-gradient(180deg, #fbf6e9 0%, #f2e8d2 58%, #e7d8bb 100%) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
        color: #3a352d !important;
        font-family: Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout body .trav47PiggyModalPanel > header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 6px 9px !important;
        border-bottom: 1px solid #bbaa89 !important;
        background: linear-gradient(180deg, #f8f1df 0%, #e9dcc0 52%, #d9c6a2 100%) !important;
    }

    html#mainLayout body .trav47PiggyModalPanel > header > div {
        display: flex !important;
        align-items: baseline !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    html#mainLayout body .trav47PiggyModalPanel > header strong {
        color: #4b6923 !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    html#mainLayout body .trav47PiggyModalPanel > header span {
        overflow: hidden !important;
        color: #746d60 !important;
        font-size: 11px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout body .trav47PiggyModalClose {
        display: inline-flex !important;
        flex: 0 0 28px !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 0 2px !important;
        border: 1px solid #8d8778 !important;
        border-radius: 5px !important;
        background: linear-gradient(#fff, #ded8ca) !important;
        color: #655e50 !important;
        font: 700 21px/1 Arial, sans-serif !important;
    }

    html#mainLayout body .trav47PiggyTransferForm {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 10px !important;
        background: linear-gradient(180deg, rgba(255, 251, 240, .74), rgba(231, 216, 187, .76)) !important;
    }

    html#mainLayout body .trav47PiggyTransferFields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    html#mainLayout body .trav47PiggyTransferFields label {
        display: block !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 7px !important;
        border: 1px solid #c5b38f !important;
        border-radius: 6px !important;
        background: linear-gradient(180deg, #fffaf0 0%, #eee2ca 100%) !important;
    }

    html#mainLayout body .trav47PiggyTransferLabel {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
        min-width: 0 !important;
        margin: 0 0 5px !important;
        font-size: 12px !important;
    }

    html#mainLayout body .trav47PiggyTransferLabel > span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    html#mainLayout body .trav47PiggyTransferLabel i {
        display: inline-block !important;
        flex: 0 0 auto !important;
    }

    html#mainLayout body .trav47PiggyTransferLabel b {
        direction: ltr !important;
        color: #617d2d !important;
        font: 700 10px/15px Arial, Helvetica, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout body .trav47PiggyTransferFields input[type="number"] {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 4px 6px !important;
        border: 1px solid #aaa28f !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #302d28 !important;
        font: 700 13px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        appearance: textfield !important;
    }

    html#mainLayout body .trav47PiggyTransferFields input[type="number"]::-webkit-inner-spin-button,
    html#mainLayout body .trav47PiggyTransferFields input[type="number"]::-webkit-outer-spin-button {
        margin: 0 !important;
        appearance: none !important;
    }

    html#mainLayout body .trav47PiggyModalStatus {
        box-sizing: border-box !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 6px 0 0 !important;
        color: #537321 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    html#mainLayout body .trav47PiggyModalStatus.is-error {
        color: #b1271b !important;
    }

    html#mainLayout body .trav47PiggyTransferForm footer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout body .trav47PiggyTransferForm footer button {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-width: 78px !important;
        height: 31px !important;
        margin: 0 !important;
        padding: 5px 11px !important;
        border: 1px solid #506d24 !important;
        border-radius: 5px !important;
        background: linear-gradient(#98c452, #668f2e) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .45) !important;
        color: #fff !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        text-shadow: 0 1px #3e5d1e !important;
    }

    html#mainLayout body .trav47PiggyTransferForm footer button:disabled,
    html#mainLayout body .trav47PiggyModal.is-loading .trav47PiggyTransferForm footer button {
        border-color: #999 !important;
        background: #b8b8b8 !important;
        box-shadow: none !important;
        color: #eee !important;
        text-shadow: none !important;
    }

    body.trav47PiggyModalOpen {
        overflow: hidden !important;
    }
}

/* Embassy: polished layout for every real desktop screen, independent of the per-browser layout cookie. */
@media screen and (min-width: 1025px) {
    html#mainLayout body.build #content #build.gid18 .embassyCard {
        box-sizing: border-box;
        width: calc(100% - 12px);
        margin: 18px 6px 0;
        overflow: hidden;
        color: #36413a;
        background: #f8faf6;
        border: 1px solid #b9c9b1;
        border-radius: 7px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px rgba(55, 72, 48, .12);
        font-family: Tahoma, Arial, sans-serif;
    }

    html#mainLayout body.build #content #build.gid18 .embassyCardTitle {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        float: none !important;
        clear: both !important;
        align-items: center !important;
        box-sizing: border-box;
        width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 13px !important;
        color: #344a39 !important;
        background: linear-gradient(180deg, #eef5e9 0%, #dce9d6 100%) !important;
        background-image: linear-gradient(180deg, #eef5e9 0%, #dce9d6 100%) !important;
        border: 0 !important;
        border-bottom: 1px solid #bdccb6 !important;
        border-radius: 0 !important;
        box-shadow: inset -4px 0 0 #7da43b !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: right !important;
        text-shadow: 0 1px 0 #fff !important;
    }

    html#mainLayout body.build #content #build.gid18 .embassyCreateForm {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 116px;
        align-items: stretch;
        gap: 16px;
        box-sizing: border-box;
        padding: 16px 18px;
        direction: rtl;
        background: linear-gradient(180deg, #fbfcfa 0%, #f2f6ef 100%);
    }

    html#mainLayout body.build #content #build.gid18 .embassyFields {
        grid-column: 1;
        display: grid;
        grid-template-columns: minmax(150px, .72fr) minmax(230px, 1.28fr);
        gap: 13px;
        box-sizing: border-box;
        min-width: 0;
    }

    html#mainLayout body.build #content #build.gid18 .embassyFormRow {
        display: block;
        box-sizing: border-box;
        min-width: 0;
    }

    html#mainLayout body.build #content #build.gid18 .embassyFormRow > label {
        display: block;
        margin: 0 2px 6px;
        color: #4b5c50;
        font-size: 12px;
        font-weight: 700;
        line-height: 17px;
        text-align: right;
    }

    html#mainLayout body.build #content #build.gid18 .embassyField {
        min-width: 0;
    }

    html#mainLayout body.build #content #build.gid18 .embassyField input.text {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 36px;
        margin: 0;
        padding: 7px 10px;
        color: #26352c;
        background: linear-gradient(180deg, #fff 0%, #f8faf6 100%);
        border: 1px solid #aebca7;
        border-radius: 5px;
        box-shadow: inset 0 1px 2px rgba(45, 61, 40, .09), 0 1px 0 #fff;
        font: 400 13px/20px Tahoma, Arial, sans-serif;
        text-align: right;
        transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    }

    html#mainLayout body.build #content #build.gid18 .embassyField input.text:hover {
        border-color: #8fa77e;
    }

    html#mainLayout body.build #content #build.gid18 .embassyField input.text:focus {
        background: #fff;
        border-color: #739833;
        box-shadow: 0 0 0 3px rgba(115, 152, 51, .15), inset 0 1px 2px rgba(45, 61, 40, .05);
        outline: 0;
    }

    html#mainLayout body.build #content #build.gid18 .embassyField .error,
    html#mainLayout body.build #content #build.gid18 .embassyInviteList .error2 {
        display: block;
        margin: 5px 2px 0;
        color: #b74332;
        font-size: 11px;
        line-height: 16px;
    }

    html#mainLayout body.build #content #build.gid18 .embassyFormActions {
        grid-column: 2;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        box-sizing: border-box;
        padding: 0;
        border: 0;
    }

    html#mainLayout body.build #content #build.gid18 .embassyCreateButton {
        position: relative !important;
        inset: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100px;
        min-width: 100px;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 15px !important;
        overflow: hidden !important;
        color: #fff !important;
        background: linear-gradient(180deg, #98c947 0%, #659b27 54%, #4f7f1d 100%) !important;
        background-image: linear-gradient(180deg, #98c947 0%, #659b27 54%, #4f7f1d 100%) !important;
        border: 1px solid #3f6c18 !important;
        border-radius: 5px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 1px 2px rgba(48, 70, 31, .24) !important;
        font: 700 13px/34px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px rgba(35, 57, 20, .65) !important;
        cursor: pointer !important;
    }

    html#mainLayout body.build #content #build.gid18 .embassyCreateButton:hover,
    html#mainLayout body.build #content #build.gid18 .embassyCreateButton:focus {
        background: linear-gradient(180deg, #a7d85a 0%, #72a931 54%, #588b21 100%) !important;
        border-color: #365e13 !important;
        outline: 0 !important;
    }

    html#mainLayout body.build #content #build.gid18 .embassyCreateButton:active {
        background: linear-gradient(180deg, #4f7f1d 0%, #659b27 100%) !important;
        box-shadow: inset 0 2px 3px rgba(35, 57, 20, .28) !important;
    }

    html#mainLayout body.build #content #build.gid18 .embassyCreateButton .button-background {
        display: none !important;
    }

    html#mainLayout body.build #content #build.gid18 .embassyCreateButton .button-container,
    html#mainLayout body.build #content #build.gid18 .embassyCreateButton .button-content {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font: inherit !important;
        line-height: 1 !important;
        text-shadow: inherit !important;
    }

    html#mainLayout body.build #content #build.gid18 .embassyInviteList {
        box-sizing: border-box;
        padding: 12px;
        background: linear-gradient(180deg, #fbfcfa 0%, #f2f6ef 100%);
    }

    html#mainLayout body.build #content #build.gid18 .embassyInvite {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 6px 9px;
        background: #fff;
        border: 1px solid #d2dccd;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(50, 66, 45, .07);
    }

    html#mainLayout body.build #content #build.gid18 .embassyInvite + .embassyInvite {
        margin-top: 7px;
    }

    html#mainLayout body.build #content #build.gid18 .embassyInviteName {
        overflow: hidden;
        color: #5f850f;
        font-size: 13px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html#mainLayout body.build #content #build.gid18 .embassyInviteDismiss {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 28px;
        min-width: 28px;
        height: 28px;
        margin: 0;
        padding: 0;
        cursor: pointer;
        background: #fff5f2;
        border: 1px solid #d7b2a7;
        border-radius: 5px;
        box-shadow: none;
    }

    html#mainLayout body.build #content #build.gid18 .embassyInviteDismiss:hover {
        background: #fce5df;
        border-color: #c98776;
    }

    html#mainLayout body.build #content #build.gid18 .embassyInviteDismiss img {
        width: 13px;
        height: 13px;
        margin: 0;
    }

    html#mainLayout body.build #content #build.gid18 .embassyInviteAccept {
        min-width: 82px;
        margin: 0;
    }

    html#mainLayout body.build #content #build.gid18 .embassyEmptyState {
        margin: 0;
        padding: 16px 12px;
        color: #6f7c72;
        background: rgba(255, 255, 255, .78);
        border: 1px dashed #c8d4c2;
        border-radius: 5px;
        font-size: 12px;
        text-align: center;
    }

    html#mainLayout body.build #content #build.gid18 .embassyMembershipBody {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 126px;
        align-items: stretch;
        gap: 14px;
        box-sizing: border-box;
        padding: 15px 17px;
        direction: rtl;
        background: linear-gradient(180deg, #fbfcfa 0%, #f2f6ef 100%);
    }

    html#mainLayout body.build #content #build.gid18 .embassyMembershipIdentity {
        grid-column: 1;
        overflow: hidden;
        background: rgba(255,255,255,.82);
        border: 1px solid #d0dbca;
        border-radius: 5px;
    }

    html#mainLayout body.build #content #build.gid18 .embassyMembershipRow {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: center;
        min-height: 35px;
        padding: 0 10px;
    }

    html#mainLayout body.build #content #build.gid18 .embassyMembershipRow + .embassyMembershipRow {
        border-top: 1px solid #e0e7dc;
    }

    html#mainLayout body.build #content #build.gid18 .embassyMembershipLabel {
        color: #657167;
        font-size: 12px;
        font-weight: 700;
    }

    html#mainLayout body.build #content #build.gid18 .embassyMembershipValue {
        min-width: 0;
        overflow: hidden;
        color: #33463a;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html#mainLayout body.build #content #build.gid18 .embassyMembershipAction {
        grid-column: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    html#mainLayout body.build #content #build.gid18 .embassyAllianceEnterButton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 116px;
        min-height: 36px;
        padding: 7px 14px;
        color: #fff;
        background: linear-gradient(180deg, #98c947 0%, #659b27 54%, #4f7f1d 100%);
        border: 1px solid #3f6c18;
        border-radius: 5px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(48,70,31,.2);
        font: 700 12px/20px Tahoma, Arial, sans-serif;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(35,57,20,.65);
    }
}

/* Embassy creation and invitation cards for all phone layouts. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 {
        box-sizing: border-box !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyCard {
        box-sizing: border-box !important;
        width: calc(100% - 6px) !important;
        margin: 9px 3px 0 !important;
        overflow: hidden !important;
        color: #37464b !important;
        background: linear-gradient(180deg, #fbfcf9 0%, #eef4eb 100%) !important;
        border: 1px solid #bdccb7 !important;
        border-radius: 8px !important;
        box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(57, 73, 52, .09) !important;
        font-family: Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyCardTitle {
        box-sizing: border-box !important;
        min-height: 35px !important;
        margin: 0 !important;
        padding: 8px 11px !important;
        color: #344a39 !important;
        background: linear-gradient(180deg, #eaf2e5 0%, #dce8d6 100%) !important;
        border: 0 !important;
        border-bottom: 1px solid #bdccb7 !important;
        border-radius: 0 !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: right !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyCreateForm {
        display: grid !important;
        grid-template-columns: 90px minmax(0, 1fr) !important;
        grid-template-areas: "actions fields" !important;
        align-items: stretch !important;
        gap: 9px !important;
        box-sizing: border-box !important;
        padding: 10px !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyFields {
        grid-area: fields !important;
        min-width: 0 !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyFormRow {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        margin: 0 0 8px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyFormRow > label {
        padding-top: 8px !important;
        color: #50605a !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyField {
        min-width: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyField input.text {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 5px 9px !important;
        color: #31454d !important;
        background: #fff !important;
        border: 1px solid #b9c7b4 !important;
        border-radius: 5px !important;
        box-shadow: inset 0 1px 2px rgba(43, 58, 39, .08) !important;
        font: 400 12px/20px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyField input.text:focus {
        border-color: #86a94d !important;
        box-shadow: 0 0 0 2px rgba(116, 151, 53, .14), inset 0 1px 2px rgba(43, 58, 39, .06) !important;
        outline: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyField .error,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteList .error2 {
        display: block !important;
        margin: 4px 0 0 !important;
        color: #b34a39 !important;
        font-size: 9.5px !important;
        line-height: 1.35 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyFormActions {
        grid-area: actions !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 0 !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyCreateButton {
        width: 82px !important;
        min-width: 82px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteList {
        box-sizing: border-box !important;
        padding: 9px 10px 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInvite {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 7px !important;
        min-height: 42px !important;
        padding: 5px 7px !important;
        background: #fff !important;
        border: 1px solid #d2ddd0 !important;
        border-radius: 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteName {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #5d820d !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteDismiss {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 29px !important;
        min-width: 29px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        cursor: pointer !important;
        background: linear-gradient(180deg, #fff8f5 0%, #f1dfd9 100%) !important;
        border: 1px solid #c99b8d !important;
        border-radius: 5px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(91,55,42,.12) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteDismiss img {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteDismiss::before,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteDismiss::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 14px !important;
        height: 2px !important;
        margin: -1px 0 0 -7px !important;
        background: #a64231 !important;
        border-radius: 2px !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
        transform: rotate(45deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteDismiss::after {
        transform: rotate(-45deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteDismiss:active {
        background: #ead2ca !important;
        box-shadow: inset 0 1px 2px rgba(91,55,42,.2) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteAccept {
        position: relative !important;
        inset: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-width: 74px !important;
        height: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        overflow: hidden !important;
        color: #fff !important;
        cursor: pointer !important;
        background: linear-gradient(180deg, #9bc94a 0%, #669b29 55%, #4e7d1d 100%) !important;
        background-image: linear-gradient(180deg, #9bc94a 0%, #669b29 55%, #4e7d1d 100%) !important;
        border: 1px solid #3f6c18 !important;
        border-radius: 5px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(48,70,31,.2) !important;
        font: 700 11px/28px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px rgba(35,57,20,.65) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteAccept .button-background {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteAccept .button-container,
    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteAccept .button-content {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font: inherit !important;
        line-height: 1 !important;
        text-shadow: inherit !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyInviteAccept:active {
        background: linear-gradient(180deg, #4e7d1d 0%, #669b29 100%) !important;
        box-shadow: inset 0 2px 3px rgba(35,57,20,.28) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyEmptyState {
        min-height: 36px !important;
        margin: 0 !important;
        padding: 10px !important;
        color: #748078 !important;
        background: rgba(255,255,255,.58) !important;
        border: 1px dashed #c9d3c6 !important;
        border-radius: 6px !important;
        font-size: 10.5px !important;
        line-height: 16px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyMembershipBody {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 94px !important;
        align-items: stretch !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        padding: 9px !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyMembershipIdentity {
        grid-column: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        background: rgba(255,255,255,.72) !important;
        border: 1px solid #ccd8c8 !important;
        border-radius: 6px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyMembershipRow {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        align-items: center !important;
        min-height: 32px !important;
        padding: 0 7px !important;
        gap: 5px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyMembershipRow + .embassyMembershipRow {
        border-top: 1px solid #dce5d8 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyMembershipLabel {
        color: #68766b !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyMembershipValue {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #344a39 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyMembershipAction {
        grid-column: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyAllianceEnterButton {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 88px !important;
        min-width: 88px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 6px 7px !important;
        color: #fff !important;
        background: linear-gradient(180deg, #9bc94a 0%, #669b29 55%, #4e7d1d 100%) !important;
        border: 1px solid #3f6c18 !important;
        border-radius: 5px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(48,70,31,.2) !important;
        font: 700 10.5px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: 0 1px 1px rgba(35,57,20,.65) !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.travianMobile.build #content #build.gid18 .embassyAllianceEnterButton:active {
        background: linear-gradient(180deg, #4e7d1d 0%, #669b29 100%) !important;
        box-shadow: inset 0 2px 3px rgba(35,57,20,.28) !important;
    }
}

/* Academy research cards — the same compact card language is shared by phone
   and desktop; desktop-only sizing/insets live in fixes.css. */
@media screen {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchHeading {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 34px !important;
        padding: 0 9px !important;
        margin: 9px 0 6px !important;
        border: 1px solid #b8c7aa !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #edf2e8, #dfe8d8) !important;
        color: #36452f !important;
        font: 700 12px/32px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchHeading > small {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #64705d !important;
        font: 400 10.5px/18px Tahoma, Arial, sans-serif !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchList {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchList > hr,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchList > .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard {
        direction: rtl !important;
        display: grid !important;
        grid-template-columns: 102px minmax(0, 1fr) !important;
        width: 100% !important;
        min-height: 151px !important;
        padding: 0 !important;
        margin: 0 0 7px !important;
        overflow: hidden !important;
        border: 1px solid #b7aa8d !important;
        border-right-width: 4px !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(239,235,221,.82)), #f3eddd !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(65,45,27,.14) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCardAvailable {
        border-right-color: #719544 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCardLocked {
        border-right-color: #aa8954 !important;
        background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(236,232,219,.88)), #eee7d6 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard > .bigUnitSection {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 102px !important;
        min-width: 102px !important;
        height: 100% !important;
        min-height: 151px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid #c9bea5 !important;
        background: linear-gradient(180deg, rgba(223,232,215,.82), rgba(236,232,214,.56)) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard > .bigUnitSection > a:first-child {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 101px !important;
        height: 140px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard > .bigUnitSection img.unitSection {
        position: static !important;
        display: block !important;
        width: 140px !important;
        min-width: 140px !important;
        height: 140px !important;
        margin: 0 !important;
        transform: scale(.72) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard > .bigUnitSection a.zoom {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard > .information {
        position: relative !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 5px !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 151px !important;
        padding: 7px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .information > .title {
        display: flex !important;
        align-items: center !important;
        min-height: 25px !important;
        padding: 0 1px 4px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #d4cab3 !important;
        background: transparent !important;
        line-height: 20px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .information > .title > a:first-child {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .information > .title > a:last-child {
        overflow: hidden !important;
        color: #4a651f !important;
        font: 700 13px/20px Tahoma, Arial, sans-serif !important;
        text-decoration: none !important;
        text-overflow: ellipsis !important;
        text-shadow: none !important;
        white-space: nowrap !important;
        -webkit-text-fill-color: #4a651f !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCardLocked .information > .title > a:last-child {
        color: #675c45 !important;
        -webkit-text-fill-color: #675c45 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .resourceWrapper {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 3px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .resourceWrapper > .resource {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 1px !important;
        margin: 0 !important;
        border: 1px solid #d7ceb9 !important;
        border-radius: 3px !important;
        background: rgba(255,255,255,.58) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .resourceWrapper > .resource > i {
        display: block !important;
        margin: -3px auto -4px !important;
        transform: scale(.64) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .resourceWrapper > .resource > .value {
        color: #4b453a !important;
        font: 700 9.5px/11px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #4b453a !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .information > br {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .duration {
        display: inline-flex !important;
        align-items: center !important;
        align-self: flex-start !important;
        gap: 4px !important;
        min-height: 21px !important;
        padding: 1px 5px !important;
        margin: 0 !important;
        border-radius: 3px !important;
        background: rgba(228,235,220,.75) !important;
        color: #3e4a37 !important;
        direction: ltr !important;
        font: 700 10.5px/19px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .duration > i {
        margin: 0 !important;
        transform: scale(.72) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .cta {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .requirements {
        padding: 4px 6px !important;
        margin: 0 !important;
        border: 1px solid #dccdad !important;
        border-radius: 3px !important;
        background: #f5efe1 !important;
        color: #6b604d !important;
        font: 400 9.5px/15px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .requirements .academyRequirementsLabel {
        display: block !important;
        margin: 0 0 2px !important;
        color: #705628 !important;
        font-weight: 700 !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .requirements .academyRequirementsValues {
        display: block !important;
        color: #6b604d !important;
        font-weight: 400 !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .requirements a {
        color: #597628 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #597628 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .contractLink {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard .contractLink > .none {
        display: block !important;
        padding: 4px 6px !important;
        border: 1px solid #d6c8aa !important;
        border-radius: 3px !important;
        background: #f4eedf !important;
        color: #665e4d !important;
        font: 400 9.5px/15px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchAvailable > .noResearchPossible {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        padding: 7px 10px !important;
        margin: 0 0 6px !important;
        border: 1px solid #c9c1ad !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #f8f6ef, #ece8dc) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchAvailable > .noResearchPossible .errorMessage {
        color: #665f50 !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchSwitch {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchSwitch > #researchFutureLink {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 34px !important;
        padding: 5px 30px !important;
        border: 1px solid #879b72 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #eef3e8, #dbe6d2) !important;
        color: #4f6c2c !important;
        font: 700 11px/22px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: none !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(50,65,40,.14) !important;
        box-sizing: border-box !important;
        -webkit-text-fill-color: #4f6c2c !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchSwitch > #researchFutureLink::before {
        content: "" !important;
        position: absolute !important;
        left: 11px !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 2px solid #668348 !important;
        border-bottom: 2px solid #668348 !important;
        transform: rotate(45deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchSwitch > #researchFutureLink.switchClosed::before {
        transform: rotate(225deg) !important;
    }
}

/* Smithy unit upgrades — shares the academy's compact card language on every
   layout; desktop-only sizing/insets live in fixes.css. */
@media screen {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 > #build.gid13 {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeHeading {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 34px !important;
        padding: 0 9px !important;
        margin: 9px 0 6px !important;
        border: 1px solid #b8c7aa !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #edf2e8, #dfe8d8) !important;
        color: #36452f !important;
        font: 700 12px/32px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeList {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeList > hr,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeList > .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard {
        direction: rtl !important;
        display: grid !important;
        grid-template-columns: 102px minmax(0, 1fr) !important;
        width: 100% !important;
        min-height: 130px !important;
        padding: 0 !important;
        margin: 0 0 7px !important;
        overflow: hidden !important;
        border: 1px solid #b7aa8d !important;
        border-right: 4px solid #7a974d !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(239,235,221,.82)), #f3eddd !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(65,45,27,.14) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard > .bigUnitSection {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 102px !important;
        min-width: 102px !important;
        height: 100% !important;
        min-height: 130px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid #c9bea5 !important;
        background: linear-gradient(180deg, rgba(223,232,215,.82), rgba(236,232,214,.56)) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard > .bigUnitSection > a:first-child {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 101px !important;
        height: 130px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard > .bigUnitSection img.unitSection {
        position: static !important;
        display: block !important;
        width: 140px !important;
        min-width: 140px !important;
        height: 140px !important;
        margin: 0 !important;
        transform: scale(.68) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard > .bigUnitSection a.zoom {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard > .information {
        position: relative !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 5px !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 130px !important;
        padding: 7px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .information > .title {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 25px !important;
        padding: 0 1px 4px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #d4cab3 !important;
        background: transparent !important;
        line-height: 20px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .information > .title > a:first-child {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .information > .title > a:nth-child(2) {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #4a651f !important;
        font: 700 12.5px/20px Tahoma, Arial, sans-serif !important;
        text-decoration: none !important;
        text-overflow: ellipsis !important;
        text-shadow: none !important;
        white-space: nowrap !important;
        -webkit-text-fill-color: #4a651f !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .information > .title > .level {
        flex: 0 0 auto !important;
        min-width: 48px !important;
        padding: 1px 5px !important;
        margin-right: auto !important;
        border: 1px solid #c6b991 !important;
        border-radius: 3px !important;
        background: #f3edda !important;
        color: #695d43 !important;
        font: 700 9.5px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .resourceWrapper {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 3px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .resourceWrapper > .resource {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 1px !important;
        margin: 0 !important;
        border: 1px solid #d7ceb9 !important;
        border-radius: 3px !important;
        background: rgba(255,255,255,.58) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .resourceWrapper > .resource > i {
        display: block !important;
        margin: -3px auto -4px !important;
        transform: scale(.64) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .resourceWrapper > .resource > .value {
        color: #4b453a !important;
        font: 700 9.5px/11px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #4b453a !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .information > br,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .cta > br {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .cta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px 5px !important;
        width: 100% !important;
        min-height: 31px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .duration {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-height: 23px !important;
        padding: 1px 5px !important;
        margin: 0 !important;
        border-radius: 3px !important;
        background: rgba(228,235,220,.75) !important;
        color: #3e4a37 !important;
        direction: ltr !important;
        font: 700 10.5px/21px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .duration > i {
        margin: 0 !important;
        transform: scale(.72) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .cta > .none {
        flex: 1 1 110px !important;
        min-height: 24px !important;
        padding: 3px 5px !important;
        border: 1px solid #d6c8aa !important;
        border-radius: 3px !important;
        background: #f4eedf !important;
        color: #665e4d !important;
        font: 400 9px/15px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .cta > button {
        --trav47-text-button-height: 28px;
        position: relative !important;
        left: -10px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
}

/* Desktop village production card: expose the same compact boost launcher
   used by the phone layouts and keep it to the left of the hourly title. */
@media screen and (min-width: 1025px) {
    html#mainLayout[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionHeading {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 0 2px !important;
        padding: 0 2px 0 1px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionHeading > span {
        min-width: 0 !important;
        color: #513a1f !important;
        font-size: 12px !important;
        line-height: 24px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionBoostBadge {
        all: unset !important;
        display: inline-flex !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 20px !important;
        min-height: 20px !important;
        padding: 0 5px !important;
        border: 1px solid #8e6b16 !important;
        border-radius: 4px !important;
        color: #4b3605 !important;
        background: linear-gradient(180deg, #fff2aa 0%, #e2b82f 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 1px 1px rgba(72,50,5,.24) !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 0 rgba(255,248,202,.78) !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead {
        display: none !important;
    }

    /* Use the phone production-boost component on desktop as well, without
       the obsolete framed dialog skin surrounding it. */
    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog {
        width: 300px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog :is(
        .dialog-background-tl,
        .dialog-background-tc,
        .dialog-background-tr,
        .dialog-background-ml,
        .dialog-background-mc,
        .dialog-background-mr,
        .dialog-background-bl,
        .dialog-background-bc,
        .dialog-background-br,
        .dialog-dragbar,
        .iconButton.small.info,
        #dialogCancelButton,
        .title,
        .buttons
    ) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog :is(
        .dialog-container,
        .dialog-contents,
        .dialog-contents > form,
        #dialogContent,
        #dialogContent > .content
    ) {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .dialog-contents:has(#dialogContent) {
        overflow: hidden !important;
        border: 1px solid #72867d !important;
        border-radius: 7px !important;
        background: #eef3ef !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(39,50,43,.3) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostWindow {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 6px 6px !important;
        color: #304239 !important;
        background: #eef3ef !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostHeader {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: calc(100% + 12px) !important;
        height: 38px !important;
        margin: 0 -6px 6px !important;
        padding: 5px 7px !important;
        border: 0 !important;
        border-bottom: 1px solid #a5b5aa !important;
        background: linear-gradient(180deg, #f7faf4 0%, #e5eee5 100%) !important;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.78) !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostTitle {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #30463b !important;
        font: 700 14px/26px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 0 #fff !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostBalance {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 44px !important;
        max-width: 72px !important;
        height: 23px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        overflow: hidden !important;
        color: #655017 !important;
        border: 1px solid #c2a950 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #fff9d9, #eadd9c) !important;
        font: 700 10px/21px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostBalance > * {
        position: static !important;
        float: none !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostBalanceIcon {
        display: inline-block !important;
        flex: 0 0 13px !important;
        width: 13px !important;
        height: 13px !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostClose {
        all: unset !important;
        display: grid !important;
        flex: 0 0 23px !important;
        order: 3 !important;
        place-items: center !important;
        width: 23px !important;
        min-width: 23px !important;
        height: 23px !important;
        min-height: 23px !important;
        overflow: hidden !important;
        color: #fff !important;
        border: 1px solid #355d16 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #7cab3f, #4f7f1d) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 1px rgba(37,58,31,.22) !important;
        font: 700 18px/20px Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px rgba(26,51,23,.5) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostList {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostCard {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 72px !important;
        align-items: center !important;
        column-gap: 6px !important;
        width: 100% !important;
        min-height: 61px !important;
        margin: 0 !important;
        padding: 5px !important;
        overflow: hidden !important;
        border: 1px solid #b6c6bb !important;
        border-radius: 6px !important;
        background: linear-gradient(100deg, #f9fbf7 0%, #edf4ee 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.86) !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostIcon {
        display: block !important;
        grid-column: 1 !important;
        width: 38px !important;
        height: 35px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        background-color: transparent !important;
        background-image: url("../../images/payment/productionBoostPopupIcons.png") !important;
        background-repeat: no-repeat !important;
        background-size: 38px auto !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostWood { background-position: 0 0 !important; }
    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostClay { background-position: 0 -35px !important; }
    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostIron { background-position: 0 -70px !important; }
    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostCrop { background-position: 0 -105px !important; }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostInfo {
        display: flex !important;
        grid-column: 2 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostName {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #293d33 !important;
        font: 700 12px/17px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostStatus,
    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostCountdown {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #4f7327 !important;
        font: 700 10px/14px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47ProductionBoostUrgent {
        color: #a44a29 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostAction {
        display: flex !important;
        grid-column: 3 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostButton {
        all: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 4px !important;
        overflow: hidden !important;
        color: #fff !important;
        border: 1px solid #416f0d !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #86bd40, #5f9417) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 1px rgba(45,69,33,.2) !important;
        font: 700 10px/24px Tahoma, Arial, sans-serif !important;
        text-shadow: 0 1px 1px rgba(26,55,20,.5) !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostButton.trav47BoostActivation {
        color: #513d08 !important;
        border-color: #9c7b16 !important;
        background: linear-gradient(180deg, #f7e66d, #e4bf1d) !important;
        text-shadow: 0 1px 0 rgba(255,252,213,.65) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog :is(.trav47BoostButtonLabel, .trav47BoostButtonCost) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostGoldIcon {
        display: inline-block !important;
        flex: 0 0 12px !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostAutoRenew {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
        height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #53685c !important;
        font: 400 9px/14px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostAutoRenew > :is(input, label) {
        position: static !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostAutoRenew input {
        width: 11px !important;
        height: 11px !important;
        accent-color: #668f28 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostDuration {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #6a796f !important;
        font: 400 9px/12px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog .trav47BoostNote {
        display: block !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 5px 6px !important;
        color: #6a7b71 !important;
        border: 1px solid #c9d5cd !important;
        border-radius: 5px !important;
        background: rgba(255,255,255,.55) !important;
        font: 400 10px/14px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }
}

/* Desktop academy/smithy presentation: keep the exact phone card structure,
   add a 5px inset on both sides and replace the missing legacy button skin. */
@media screen and (min-width: 1025px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchHeading,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeHeading {
        width: calc(100% - 10px) !important;
        margin-right: 5px !important;
        margin-left: 5px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchList,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchFuture,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeList {
        width: calc(100% - 10px) !important;
        margin-right: 5px !important;
        margin-left: 5px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 > .academyResearchSwitch {
        width: calc(100% - 10px) !important;
        margin-right: 5px !important;
        margin-left: 5px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard .cta {
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard button.textButtonV3,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard button.textButtonV3 {
        --trav47-text-button-height: 30px;
        position: static !important;
        left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 72px !important;
        height: 30px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #3f651a !important;
        border-radius: 5px !important;
        color: #fff !important;
        font: 700 12px/28px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #29440d !important;
        background-color: #6d9f2c !important;
        background-image: linear-gradient(180deg, #91c447 0%, #78ad32 48%, #5e8d24 52%, #4e7b1c 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(49,63,31,.35) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard button.textButtonV3:hover,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard button.textButtonV3:hover {
        background-color: #7caf35 !important;
        background-image: linear-gradient(180deg, #a2d45a 0%, #82b93c 48%, #68992b 52%, #568321 100%) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard button.textButtonV3 > .button-container,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard button.textButtonV3 > .button-container,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard button.textButtonV3 .button-content,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard button.textButtonV3 .button-content {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        line-height: 28px !important;
        text-align: center !important;
        text-shadow: inherit !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid22 .academyResearchCard button.textButtonV3 .button-background,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid12 .smithyUpgradeCard button.textButtonV3 .button-background {
        display: none !important;
    }
}

/* Main-building demolition selector — one authoritative phone treatment for
   native mobile, phone-web right and phone-web left layouts. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm {
        position: relative !important;
        display: grid !important;
        grid-template-columns: max-content max-content !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 8px !important;
        width: 100% !important;
        padding: 0 6px 4px !important;
        margin: 0 !important;
        overflow: visible !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm > select#demolish:not(.demolishNativeSelect) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        width: min(310px, 100%) !important;
        height: 38px !important;
        padding: 0 12px 0 38px !important;
        margin: 7px auto 10px !important;
        border: 1px solid #91a17a !important;
        border-radius: 4px !important;
        outline: 0 !important;
        color: #34412d !important;
        background-color: #edf2e5 !important;
        direction: rtl !important;
        font: 700 11.5px/38px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectShell {
        position: relative !important;
        z-index: 220 !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        display: block !important;
        width: min(310px, 100%) !important;
        max-width: 100% !important;
        margin: 7px auto 10px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectShell > select#demolish.demolishNativeSelect {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectTrigger {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 12px 0 38px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #91a17a !important;
        border-radius: 4px !important;
        outline: 0 !important;
        color: #34412d !important;
        background: linear-gradient(180deg, #f9fbf5 0, #e4ebda 100%) !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(58, 72, 44, .2) !important;
        direction: rtl !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        line-height: 36px !important;
        text-align: right !important;
        text-shadow: none !important;
        -webkit-font-smoothing: antialiased !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectTrigger::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 14px !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #52653c !important;
        border-bottom: 2px solid #52653c !important;
        transform: translateY(-70%) rotate(45deg) !important;
        transition: transform .15s ease !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectShell.open .demolishSelectTrigger {
        border-color: #5f7d3d !important;
        background: #f6f9ef !important;
        box-shadow: 0 0 0 2px rgba(91, 125, 57, .14), inset 0 1px 0 #fff !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectShell.open .demolishSelectTrigger::after {
        transform: translateY(-25%) rotate(225deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectValue {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectMenu {
        position: fixed !important;
        top: 145px;
        right: auto !important;
        left: 12px;
        z-index: 10000 !important;
        width: min(330px, calc(100vw - 24px)) !important;
        max-height: min(390px, calc(100dvh - 155px)) !important;
        padding: 4px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid #536642 !important;
        border-radius: 4px !important;
        background: #f8f6ed !important;
        box-shadow: 0 9px 22px rgba(35, 43, 27, .34), 0 2px 5px rgba(35, 43, 27, .2) !important;
        transform: none !important;
        scrollbar-width: thin !important;
        scrollbar-color: #819665 #e7ecde !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectMenu[hidden] {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectOption {
        display: block !important;
        width: 100% !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #ded9c9 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        color: #3e3a30 !important;
        background: transparent !important;
        box-shadow: none !important;
        direction: rtl !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        text-align: right !important;
        text-shadow: none !important;
        white-space: nowrap !important;
        -webkit-font-smoothing: antialiased !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectOption:last-child {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectOption:hover,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectOption:focus {
        color: #30431f !important;
        background: #e8efdd !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishSelectOption.selected {
        color: #fff !important;
        background: linear-gradient(180deg, #759b43, #55772e) !important;
        text-shadow: 0 1px 1px #31481c !important;
        box-shadow: inset 3px 0 0 #a9ca72 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm #btn_demolish {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishNow {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        display: block !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid15 form.demolishForm .demolishNow > button {
        margin: 0 !important;
    }
}


/* Town hall celebrations — compact cards aligned with the unified building
   shell on all three phone layouts. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 8px 0 !important;
        overflow: hidden !important;
        border: 1px solid #b4a174 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(239,234,216,.72)), #f2ecdc !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(65,45,27,.14) !important;
        box-sizing: border-box !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCardSmall {
        border-right: 4px solid #719544 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCardLarge {
        border-right: 4px solid #b78732 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationArtwork {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 82px !important;
        min-width: 82px !important;
        min-height: 118px !important;
        margin: 0 !important;
        padding: 2px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid #c9bea5 !important;
        background: linear-gradient(180deg, rgba(223,232,215,.86), rgba(236,232,214,.6)) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCardLarge .celebrationArtwork {
        background: linear-gradient(180deg, rgba(240,226,187,.9), rgba(235,225,201,.68)) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationArtwork > img {
        display: block !important;
        width: 78px !important;
        height: 78px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        filter: drop-shadow(0 1px 2px rgba(73,53,29,.22)) !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard.trav47CelebrationLoading {
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard.trav47CelebrationLoading::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 20 !important;
        display: block !important;
        background: rgba(247, 245, 235, .72) !important;
        backdrop-filter: blur(.5px) !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard.trav47CelebrationLoading::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        z-index: 21 !important;
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        margin: -14px 0 0 -14px !important;
        border: 3px solid rgba(92, 126, 52, .24) !important;
        border-top-color: #5d8732 !important;
        border-radius: 50% !important;
        animation: trav47CelebrationSpin .72s linear infinite !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .trav47CelebrationDynamicNotice {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 7px 0 !important;
        padding: 7px 9px !important;
        border: 1px solid #c88776 !important;
        border-radius: 4px !important;
        background: #fff0eb !important;
        color: #8a3325 !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    @keyframes trav47CelebrationSpin {
        to { transform: rotate(360deg); }
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard > .research,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .information {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .title {
        display: flex !important;
        align-items: center !important;
        min-height: 35px !important;
        padding: 0 9px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #c8b993 !important;
        background: linear-gradient(180deg, #edf1e5, #dfe7d5) !important;
        color: #3e4c36 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 35px !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .title > a {
        display: inline-flex !important;
        align-items: center !important;
        color: #3d572c !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-decoration: none !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #3d572c !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .title > a:has(img) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .title > .points {
        margin-right: 5px !important;
        color: #665d4c !important;
        font-size: 10.5px !important;
        font-weight: 400 !important;
        line-height: 18px !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .resourceWrapper {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        padding: 6px 7px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .resourceWrapper > .resource {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        min-width: 0 !important;
        height: 39px !important;
        padding: 2px !important;
        margin: 0 !important;
        border: 1px solid #d5ccb5 !important;
        border-radius: 3px !important;
        background: rgba(255,255,255,.58) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .resourceWrapper > .resource > i {
        display: block !important;
        margin: -2px auto -3px !important;
        transform: scale(.68) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .resourceWrapper > .resource > .value {
        display: block !important;
        color: #4a4438 !important;
        font: 700 10px/12px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #4a4438 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationFooter {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 35px !important;
        padding: 5px 9px !important;
        margin: 0 !important;
        border-top: 1px solid #d2c7ac !important;
        background: rgba(229,235,221,.68) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationDuration {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
        color: #394331 !important;
        direction: ltr !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationDuration > i {
        display: inline-block !important;
        margin: 0 !important;
        transform: scale(.78) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationDuration > .value {
        color: #394331 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #394331 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationCta {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationCta > .none,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationFooter > .celebrationAvailability {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 23px !important;
        padding: 2px 8px !important;
        border: 1px solid #9faf88 !important;
        border-radius: 3px !important;
        background: #edf2e6 !important;
        color: #526047 !important;
        font: 700 10px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationCard .celebrationFooter > .celebrationAvailability {
        flex: 0 0 100% !important;
        order: 2 !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoActivation {
        width: 100% !important;
        padding: 0 !important;
        margin: 9px 0 8px !important;
        overflow: hidden !important;
        border: 1px solid #a9936c !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #f7f3e8, #ebe8dc) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(65,45,27,.16) !important;
        color: #41483a !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoHeader {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
        min-height: 35px !important;
        padding: 0 9px !important;
        border-bottom: 1px solid #c5b58e !important;
        background: linear-gradient(180deg, #e9eee1, #dce5d2) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoHeader > h3 {
        margin: 0 !important;
        color: #3c4d34 !important;
        font: 700 12px/35px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #3c4d34 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoStatus {
        padding: 2px 7px !important;
        border-radius: 3px !important;
        font-size: 10px !important;
        line-height: 17px !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoForm {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 5px 7px !important;
        width: 100% !important;
        padding: 7px 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoType {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: #46523d !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoSelect {
        position: relative !important;
        width: 110px !important;
        min-width: 110px !important;
        font-size: 11px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoSelectToggle {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 3px 7px !important;
        border: 1px solid #8c9d78 !important;
        border-radius: 3px !important;
        background: linear-gradient(180deg, #fbfcf8, #e5ebdd) !important;
        color: #36432f !important;
        font: 700 11px/24px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(52,65,42,.16) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoCost {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: inline-flex !important;
        direction: rtl !important;
        align-items: center !important;
        gap: 3px !important;
        justify-self: center !important;
        min-height: 22px !important;
        padding: 2px 8px !important;
        margin: 0 !important;
        border: 1px solid #d5c8a7 !important;
        border-radius: 3px !important;
        background: rgba(255,255,255,.52) !important;
        color: #555043 !important;
        font-size: 10.5px !important;
        line-height: 16px !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoCostPerCelebration {
        margin-right: 2px !important;
        color: #686151 !important;
        font-weight: 400 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoButton {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        min-width: 62px !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 8px !important;
        border-width: 1px !important;
        border-radius: 3px !important;
        font: 700 11px/30px Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoProgress {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        padding: 0 8px 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoProgressItem {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 5px 3px !important;
        border: 1px solid #c8cdbb !important;
        border-radius: 3px !important;
        background: rgba(255,255,255,.58) !important;
        color: #596152 !important;
        font: 400 9.5px/13px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoProgressItem > strong,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoCompleted > strong {
        display: block !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #42672d !important;
        font: 700 11.5px/15px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
        white-space: nowrap !important;
        -webkit-text-fill-color: #42672d !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoOptions {
        border-radius: 3px !important;
        background: #f8f6ed !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoOption {
        border-radius: 0 !important;
        color: #3d4936 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 11px !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 .celebrationAutoOption.isSelected {
        background: linear-gradient(180deg, #789c49, #587a32) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    /* Keep the final celebration card clear of the fixed phone footer. */
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid24 > #build.gid24 {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
    }
}

/* Structured military/civic buildings — unified phone skin for barracks,
   stable, workshop, residence, palace, great training buildings and command
   centre.  The desktop markup keeps its original artwork and dimensions. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window {
        --trav47-building-accent: #8b6938;
        width: 100% !important;
        padding: 4px 4px 6px !important;
        overflow: hidden !important;
        border: 1px solid #3e2b1d !important;
        border-radius: 6px !important;
        background: linear-gradient(90deg, #4a3222 0 4px, #a88456 4px calc(100% - 4px), #4a3222 calc(100% - 4px)) !important;
        box-shadow:
            inset 0 1px 0 #ecd5ad,
            inset 1px 0 0 rgba(255, 238, 199, .35),
            inset -1px 0 0 rgba(37, 23, 14, .7),
            inset 0 -2px 0 #5a3c27,
            0 2px 5px rgba(25, 15, 9, .42) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window:has(#build:is(.gid19, .gid29)) {
        --trav47-building-accent: #8b6336;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window:has(#build:is(.gid20, .gid30)) {
        --trav47-building-accent: #795e40;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window:has(#build.gid21) {
        --trav47-building-accent: #6f7780;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window:has(#build:is(.gid25, .gid26, .gid44)) {
        --trav47-building-accent: #9a8136;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window::before,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window::after {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 2px solid var(--trav47-building-accent) !important;
        border-radius: 3px 3px 0 0 !important;
        background:
            linear-gradient(180deg, rgba(255, 242, 211, .18), transparent 34%, rgba(24, 14, 8, .28)),
            url('../../images/ui/hud/content/header.jpg') center bottom / auto 58px repeat-x !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 241, 211, .45),
            inset 0 -1px 0 rgba(30, 18, 11, .72) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle .travian-mobile-build-title {
        top: 8px !important;
        right: 40px !important;
        left: 40px !important;
        display: block !important;
        height: 25px !important;
        overflow: hidden !important;
        color: #fff4de !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 25px !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #28170d !important;
        white-space: nowrap !important;
        -webkit-text-fill-color: #fff4de !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle .travian-mobile-build-title .level {
        display: inline !important;
        margin-right: 4px !important;
        color: #f1ad42 !important;
        font-size: 12px !important;
        text-shadow: 0 1px 1px #3d230d !important;
        -webkit-text-fill-color: #f1ad42 !important;
    }

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

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle > :is(#closeContentButton, #tabFavorButton) {
        position: absolute !important;
        top: 9px !important;
        right: auto !important;
        left: 8px !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 #243516 !important;
        border-radius: 3px !important;
        background: linear-gradient(180deg, #8bab51, #55782f 53%, #354f20) !important;
        box-shadow: inset 0 1px 0 rgba(240, 250, 218, .55), 0 1px 2px rgba(24, 14, 8, .62) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

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

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

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle > #closeContentButton::after {
        top: 6px !important;
        right: 6px !important;
        width: 10px !important;
        height: 10px !important;
        background-size: 10px 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle > #closeContentButton svg {
        width: 10px !important;
        height: 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentContainer {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #7e603c !important;
        border-top: 0 !important;
        border-radius: 0 0 3px 3px !important;
        background: #f1ead9 !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #content.build {
        width: 100% !important;
        min-height: 0 !important;
        padding: 7px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        background: linear-gradient(rgba(255, 255, 255, .55), rgba(239, 231, 210, .35)), #f1ead9 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #content.build > h1.titleInHeader {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 102px !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 112px !important;
        padding: 9px !important;
        margin: 0 0 7px !important;
        overflow: hidden !important;
        border: 1px solid color-mix(in srgb, var(--trav47-building-accent) 58%, #786443) !important;
        border-radius: 4px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(230, 237, 210, .72)), #eef0dc !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(71, 50, 30, .12) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 4px !important;
        height: 100% !important;
        background: var(--trav47-building-accent) !important;
        opacity: .9 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > .build_desc {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        min-width: 0 !important;
        padding: 0 2px !important;
        margin: 0 !important;
        border: 0 !important;
        color: #35402a !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        text-align: right !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
        -webkit-font-smoothing: antialiased !important;
        -webkit-text-fill-color: #35402a !important;
        -webkit-text-stroke: 0 transparent !important;
    }

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

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47-structured-building-visual {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        display: block !important;
        width: 102px !important;
        min-height: 102px !important;
        overflow: hidden !important;
        border: 1px solid rgba(91, 72, 43, .32) !important;
        border-radius: 3px !important;
        background:
            radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .72), transparent 59%),
            linear-gradient(180deg, color-mix(in srgb, var(--trav47-building-accent) 18%, #f4efd8), #dce5c7) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47-structured-building-visual > a.build_logo {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 102px !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47-structured-building-visual img.build_logo.building.big {
        position: absolute !important;
        top: 1px !important;
        right: auto !important;
        left: 0 !important;
        width: 184px !important;
        height: 179px !important;
        margin: 0 !important;
        transform: scale(.55) !important;
        transform-origin: top left !important;
    }

    /* Warehouses: keep the description and capacity data together opposite
       the artwork instead of pushing the capacity table into a third row. */
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo:has(> #build:is(.gid10, .gid11, .gid38, .gid39)) {
        grid-template-columns: minmax(0, 1fr) 102px !important;
        grid-template-rows: minmax(48px, auto) auto !important;
        column-gap: 8px !important;
        row-gap: 5px !important;
        min-height: 126px !important;
        padding: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo:has(> #build:is(.gid10, .gid11, .gid38, .gid39)) > .build_desc {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        padding: 0 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo:has(> #build:is(.gid10, .gid11, .gid38, .gid39)) > .trav47-structured-building-visual {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: stretch !important;
        height: 100% !important;
        min-height: 108px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b6c3a8 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 3px !important;
        background: rgba(218, 228, 207, .72) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
        table-layout: fixed !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues tr {
        height: 23px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues th,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues td {
        height: 23px !important;
        padding: 2px 6px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(150, 164, 137, .35) !important;
        background: transparent !important;
        color: #4a5142 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 10.5px !important;
        line-height: 18px !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
        -webkit-font-smoothing: antialiased !important;
        -webkit-text-fill-color: #4a5142 !important;
        -webkit-text-stroke: 0 transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues tr:last-child > * {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues th {
        width: 72% !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues td {
        width: 28% !important;
        direction: ltr !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues td > b,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > #build:is(.gid10, .gid11, .gid38, .gid39) > table.capacityValues td > .number {
        color: #35432e !important;
        font-weight: 700 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #35432e !important;
        -webkit-text-stroke: 0 transparent !important;
    }

    /* Resource processors and the main building use the same compact visual
       hierarchy: description and production/build-time data opposite the art. */
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo {
        grid-template-columns: minmax(0, 1fr) 102px !important;
        grid-template-rows: minmax(48px, auto) auto !important;
        column-gap: 8px !important;
        row-gap: 5px !important;
        min-height: 124px !important;
        padding: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > .build_desc {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        padding: 0 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > .trav47-structured-building-visual {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: stretch !important;
        height: 100% !important;
        min-height: 104px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b6c3a8 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 3px !important;
        background: rgba(218, 228, 207, .72) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
        table-layout: fixed !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value tr:not(:has(> *)) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value tr {
        height: 23px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value th,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value td {
        height: 23px !important;
        padding: 2px 6px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(150, 164, 137, .35) !important;
        background: transparent !important;
        color: #4a5142 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 10.5px !important;
        line-height: 18px !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
        -webkit-font-smoothing: antialiased !important;
        -webkit-text-fill-color: #4a5142 !important;
        -webkit-text-stroke: 0 transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value tr:last-child > * {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value th {
        width: 60% !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value td {
        width: 40% !important;
        direction: rtl !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value td > b,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build:is(.gid5, .gid6, .gid7, .gid8, .gid9, .gid14, .gid15, .gid23, .gid28, .gid35, .gid41, .gid45) > #descriptionAndInfo > table#build_value td > .number {
        color: #35432e !important;
        font-weight: 700 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #35432e !important;
        -webkit-text-stroke: 0 transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build > .roundedCornersBox.big {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 9px !important;
        margin: 0 0 7px !important;
        overflow: hidden !important;
        border: 1px solid #b5a278 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(241, 232, 210, .68)), #f4eddd !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(66, 45, 26, .12) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build > .roundedCornersBox.big > .stickyImage {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build > .roundedCornersBox.big:not(.headlineOnly) > h4 {
        display: none !important;
    }

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

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #contract.contractWrapper {
        width: 100% !important;
        padding: 0 0 8px !important;
        margin: 0 0 7px !important;
        border-bottom: 1px solid rgba(112, 89, 53, .22) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #contract.contractWrapper::before {
        content: "تكلفة الترقية" !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        color: #5c4a30 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #contract .resourceWrapper {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #contract .resourceWrapper > .inlineIcon.resource {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 43px !important;
        margin: 0 !important;
        padding: 3px 1px !important;
        overflow: hidden !important;
        border: 1px solid rgba(123, 103, 67, .2) !important;
        border-radius: 3px !important;
        background: rgba(255, 255, 255, .58) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #contract .resourceWrapper > .inlineIcon.resource > i {
        margin: 0 !important;
        transform: scale(.88) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #contract .resourceWrapper > .inlineIcon.resource > .value {
        width: 100% !important;
        overflow: hidden !important;
        color: #453b2d !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 11px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .culturePointsAndPopulation {
        width: 100% !important;
        padding: 0 0 7px !important;
        margin: 0 0 7px !important;
        border-bottom: 1px solid rgba(112, 89, 53, .22) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .culturePointsAndPopulation .wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .culturePointsAndPopulation .unit {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 86px !important;
        min-height: 25px !important;
        padding: 3px 7px !important;
        margin: 0 !important;
        border: 1px solid rgba(118, 99, 65, .2) !important;
        border-radius: 3px !important;
        background: #eee8d8 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .upgradeButtonsContainer {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .upgradeButtonsContainer .section1,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .upgradeButtonsContainer .section2 {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .upgradeButtonsContainer.section2Enabled .section2 {
        padding: 7px 0 0 !important;
        border-top: 1px dashed rgba(112, 89, 53, .28) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window h4.round {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 28px !important;
        padding: 4px 9px !important;
        margin: 8px 0 5px !important;
        border: 1px solid #c2ccb2 !important;
        border-right: 4px solid var(--trav47-building-accent) !important;
        border-radius: 3px !important;
        background: linear-gradient(90deg, #edf2e7, #dfe9d7) !important;
        color: #3d4b35 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: right !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action {
        direction: rtl !important;
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 7px !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 10px 7px !important;
        margin: 0 0 7px !important;
        overflow: hidden !important;
        border: 1px solid #b8aa88 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(241, 235, 219, .8)), #f5efe1 !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(66, 45, 26, .1) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action > .clear,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action > br,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details > br {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        float: none !important;
        width: 82px !important;
        min-width: 82px !important;
        height: auto !important;
        min-height: 112px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(105, 89, 60, .24) !important;
        border-radius: 3px !important;
        background: radial-gradient(circle at 50% 42%, #f8f7ed, #e5e8d7) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection > a:first-child {
        position: relative !important;
        display: block !important;
        width: 82px !important;
        height: 112px !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection img.unitSection {
        position: absolute !important;
        top: 2px !important;
        right: -1px !important;
        width: 140px !important;
        height: 140px !important;
        max-width: none !important;
        transform: scale(.59) !important;
        transform-origin: top right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection a.zoom {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #453c2e !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details div.tit {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px 4px !important;
        width: 100% !important;
        min-height: 24px !important;
        padding: 3px 6px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-right: 3px solid var(--trav47-building-accent) !important;
        border-radius: 2px !important;
        background: #e8eddf !important;
        color: #3d542f !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
        text-align: right !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details div.tit img.unit {
        margin: 0 !important;
        transform: scale(.84) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details div.tit span.furtherInfo {
        color: #736b5b !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 15px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .resourceWrapper {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 2px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .resourceWrapper > .resource {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 35px !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(121, 101, 66, .18) !important;
        border-radius: 2px !important;
        background: rgba(255, 255, 255, .62) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .resourceWrapper > .resource i {
        margin: 0 !important;
        transform: scale(.72) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .resourceWrapper > .resource .value {
        width: 100% !important;
        color: #4a4133 !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 10px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details > .duration {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: start !important;
        width: auto !important;
        min-width: 90px !important;
        height: 24px !important;
        padding: 2px 7px !important;
        margin: 0 !important;
        border: 1px solid rgba(111, 91, 57, .2) !important;
        border-radius: 3px !important;
        background: #f5f1e5 !important;
        color: #4b4335 !important;
        font-size: 10.5px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details > .duration i {
        margin: 0 0 0 3px !important;
        transform: scale(.78) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .cta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .cta > .status.none,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .cta::after {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .cta > span.value,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .cta > a {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 10.5px !important;
        line-height: 24px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .cta > input.text {
        flex: 0 0 54px !important;
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 1px 4px !important;
        margin: 0 !important;
        border: 1px solid #b7aa8a !important;
        border-radius: 3px !important;
        background: #fff !important;
        font-size: 11px !important;
        line-height: 22px !important;
        text-align: center !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .cta > button.exchange {
        flex: 0 0 78px !important;
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
        height: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        font-size: 9.5px !important;
        line-height: 25px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window button.startTraining {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 118px !important;
        max-width: calc(100% - 8px) !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        padding: 0 14px !important;
        margin: 7px auto 10px !important;
        font-size: 12px !important;
        line-height: 31px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window table.under_progress {
        width: 100% !important;
        margin: 0 0 8px !important;
        overflow: hidden !important;
        border: 1px solid #b8aa88 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 3px !important;
        background: #fffdf7 !important;
        table-layout: fixed !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window table.under_progress th,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window table.under_progress td {
        height: 26px !important;
        padding: 3px 5px !important;
        border: 0 !important;
        border-bottom: 1px solid #ded7c6 !important;
        background: transparent !important;
        color: #494235 !important;
        font-size: 10.5px !important;
        line-height: 18px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window table.under_progress thead td {
        background: #e5ebdd !important;
        color: #3f4e37 !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window table.under_progress td.desc {
        width: 46% !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window table.under_progress td.dur,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window table.under_progress td.fin {
        width: 27% !important;
        text-align: center !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .contentNavi.subNavi.tabFavorWrapper {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 3px !important;
        margin: -7px 0 8px !important;
        overflow: hidden !important;
        border: 1px solid #2f2118 !important;
        border-radius: 0 !important;
        background:
            linear-gradient(180deg, rgba(255, 239, 205, .12) 0, rgba(255, 255, 255, 0) 34%, rgba(20, 12, 8, .2) 100%),
            #4f392b !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 236, 198, .3),
            inset 0 -1px 0 rgba(28, 17, 11, .5),
            0 1px 2px rgba(45, 29, 18, .32) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .contentNavi.subNavi.tabFavorWrapper > button {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .contentNavi.subNavi.tabFavorWrapper .scrollingContainer {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .contentNavi.subNavi.tabFavorWrapper .content {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .contentNavi.subNavi.tabFavorWrapper a.tabItem {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid rgba(235, 205, 157, .22) !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .05)) !important;
        box-shadow: none !important;
        color: #f3e4c8 !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 32px !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #28180f !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .contentNavi.subNavi.tabFavorWrapper .content:last-child a.tabItem {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .contentNavi.subNavi.tabFavorWrapper a.tabItem.active {
        border-radius: 0 !important;
        background: linear-gradient(180deg, #8eaf4c 0, #62882c 56%, #4e711e 100%) !important;
        color: #fff !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 1px #2d4715 !important;
        box-shadow:
            inset 0 1px 0 rgba(238, 255, 205, .62),
            inset 0 -1px 0 rgba(42, 65, 20, .42),
            0 1px 2px rgba(48, 68, 24, .28) !important;
    }
}

/* Web layout selected on a phone: use the same compact window shell and
   header geometry as the native mobile layout.  Wide desktop screens are
   intentionally untouched. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .hero, .hero_inventory, .hero_adventure, .hero_auction):not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window {
        position: relative !important;
        top: 37px !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .hero, .hero_inventory, .hero_adventure, .hero_auction):not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window > .contentTitle {
        position: relative !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 10px 10px 0 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window > .contentTitle #closeContentButton {
        position: absolute !important;
        top: 24px !important;
        right: auto !important;
        left: 50px !important;
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        min-height: 17px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background-image: linear-gradient(to bottom, #6f8f34, #425b25) !important;
        box-shadow: 0 0 2px rgba(0, 0, 0, .45) !important;
        transform: none !important;
        transform-origin: center center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window > .contentTitle #closeContentButton::after {
        top: 4px !important;
        right: 4px !important;
        width: 9px !important;
        height: 9px !important;
        background-size: 9px 9px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window > .contentTitle #closeContentButton svg {
        width: 9px !important;
        height: 9px !important;
    }

    /* Hero pages own a compact header; do not inherit the old shared 24/50px placement. */
    html#mainLayout[data-trav47-layout="desktop"] body:is(.hero, .hero_inventory, .hero_adventure, .hero_auction).trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader #closeContentButton {
        top: 7px !important;
        right: auto !important;
        left: 9px !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 0 !important;
        border-radius: 3px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body:is(.hero, .hero_inventory, .hero_adventure, .hero_auction).trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader > .heroSectionHeader {
        top: 7px !important;
        right: 43px !important;
        left: 43px !important;
        width: auto !important;
        height: 24px !important;
        font: 700 16px/24px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle .travian-mobile-build-title {
        position: absolute !important;
        top: 21px !important;
        right: 50px !important;
        bottom: auto !important;
        left: 50px !important;
        z-index: 50 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: auto !important;
        height: 24px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #f2f2f2 !important;
        direction: rtl !important;
        font-family: "Noto Serif", Arial, Helvetica, Verdana, sans-serif !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 24px !important;
        text-align: center !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        text-shadow: 1px 0 0 #b68363, 1px 1px 0 #b68363, 0 1px 0 #b68363, -1px 1px 0 #5e463a, -1px 0 0 #5e463a, -1px -1px 0 #5e463a, 0 -1px 0 #5e463a, 1px -1px 0 #5e463a !important;
        -webkit-text-fill-color: #f2f2f2 !important;
        transform: none !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .hero, .hero_inventory, .hero_adventure, .hero_auction):not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader {
        display: none !important;
    }
}

/* Native mobile layout: the player/villages drawer follows its right-side
   trigger instead of sliding in from the opposite edge. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="mobile"] body:is(.village1, .village2) #center #sidebarAfterContent {
        right: 0 !important;
        left: auto !important;
        transform: translateX(105%) !important;
    }

    html[data-trav47-layout="mobile"] body:is(.village1, .village2).travian-mobile-left-sidebar-open #center #sidebarAfterContent {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }
}

/* Mobile village troop panel: native 16px icons without transformed clipping. */
.mobileOptimized div.village1 div#map_details input#showTroopsToggleMobile ~ .units table#troops tbody tr,
.mobileOptimized div.village1 div#map_details input#showTroopsToggleMobile ~ .units table#troops tbody tr td.ico {
    overflow: visible !important;
}

.mobileOptimized div.village1 div#map_details input#showTroopsToggleMobile ~ .units table#troops tbody tr td.ico {
    width: 16px !important;
    min-width: 16px !important;
    height: 20px !important;
    padding: 0 !important;
}

.mobileOptimized div.village1 div#map_details input#showTroopsToggleMobile ~ .units table#troops tbody tr td.ico img.unit {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 2px 0 !important;
    transform: none !important;
    transform-origin: center !important;
    overflow: visible !important;
}

/* The resource drawer belongs only to the three phone layouts. */
.trav47ResourceHudDetails {
    display: none;
}

.trav47ResourceHudName {
    display: none;
}

.trav47ResourceHudProductionUnitLong {
    display: none;
}

body #stockBar .trav47ResourceHudFill.is-negative {
    color: #b3261e !important;
}

body #stockBar .trav47ResourceHudProductionSign.is-negative {
    color: #b3261e !important;
}

body #stockBar .trav47ResourceHudProduction b.is-negative,
body #stockBar .trav47ResourceHudProduction b.is-negative > span {
    color: #b3261e !important;
}

/* Desktop resource overview: the header resources now own the same live
   production/storage drawer used by the phone layouts.  It floats below the
   stock bar and therefore replaces navigation to production.php. */
@media screen and (min-width: 1025px) {
    body #stockBar.trav47ResourceHud {
        overflow: visible !important;
    }

    body #stockBar.trav47ResourceHud.is-expanded {
        z-index: 1000 !important;
    }

    body #stockBar .trav47ResourceHudDetails {
        position: absolute !important;
        top: 37px !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 90 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
        border: 1px solid #765d3f !important;
        border-top: 0 !important;
        border-radius: 0 0 7px 7px !important;
        background: linear-gradient(to bottom, #f3ead7 0%, #dfcba5 100%) !important;
        box-shadow: 0 4px 8px rgba(43, 28, 15, .34), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
        transform: translateY(-6px) !important;
        transform-origin: top center !important;
        transition: max-height .2s ease, padding .2s ease, opacity .14s ease, transform .2s ease, visibility 0s linear .2s !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    body #stockBar.is-expanded .trav47ResourceHudDetails {
        max-height: 92px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0s !important;
        pointer-events: auto !important;
    }

    body #stockBar .trav47ResourceHudDetail {
        display: grid !important;
        grid-template-rows: 18px 18px 18px 22px !important;
        align-items: center !important;
        min-width: 0 !important;
        height: 76px !important;
        padding: 2px 4px !important;
        overflow: hidden !important;
        border: 1px solid #b3966b !important;
        border-radius: 5px !important;
        color: #3d2c1b !important;
        background: linear-gradient(to bottom, #fffaf0 0%, #ead7b2 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body #stockBar .trav47ResourceHudName,
    body #stockBar :is(.trav47ResourceHudCapacity, .trav47ResourceHudProduction) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    body #stockBar .trav47ResourceHudName {
        color: #4d6f20 !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
    }

    body #stockBar .trav47ResourceHudName i,
    body #stockBar .trav47ResourceHudCapacity i {
        position: static !important;
        flex: 0 0 15px !important;
        width: 15px !important;
        height: 15px !important;
        margin: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        transform: none !important;
    }

    body #stockBar .trav47ResourceHudCapacity b,
    body #stockBar .trav47ResourceHudProduction b {
        direction: rtl !important;
        color: #3f3424 !important;
        font: 700 11px/18px Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    body #stockBar .trav47ResourceHudProduction > span {
        color: #745a37 !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
    }

    body #stockBar .trav47ResourceHudProduction b {
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
        direction: rtl !important;
        color: #3f731d !important;
    }

    body #stockBar .trav47ResourceHudProduction b > span {
        color: inherit !important;
        font: inherit !important;
        line-height: inherit !important;
    }

    body #stockBar .trav47ResourceHudProductionUnitShort {
        display: none !important;
    }

    body #stockBar .trav47ResourceHudProductionUnitLong {
        display: inline !important;
    }

    body #stockBar .trav47ResourceHudFill {
        min-width: 0 !important;
        overflow: hidden !important;
        border-top: 1px solid rgba(126, 93, 53, .28) !important;
        color: #5a3e20 !important;
        direction: rtl !important;
        font: 700 10px/21px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Use the same soft row separator for built-in and player-created links. */
#sidebarBoxLinklist .content ul li {
    border-bottom: 1px solid rgba(191, 179, 155, .6) !important;
}

#sidebarBoxLinklist .content ul li > a,
#sidebarBoxLinklist .content ul li > a .name {
    text-decoration: none !important;
}

/* World Wonder ranking: the last column only contains the Natar attack icon. */
@media screen and (max-width: 1024px) {
    /* When a village has no Marketplace, the workshop's NPC action is a
       desktop convenience only; keep the three phone layouts unchanged. */
    html#mainLayout[data-trav47-layout] body.build #content #build.gid21 .trav47DesktopOnlyNpcExchange {
        display: none !important;
    }

    body div.statistics table#wonder th.at,
    body div.statistics table#wonder td.at {
        width: 25px !important;
        min-width: 25px !important;
        max-width: 25px !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    body div.statistics table#wonder td.lev {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        white-space: nowrap !important;
    }

    body div.statistics table#wonder .trav47WonderAttackHeading {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 9px !important;
        line-height: 16px !important;
        letter-spacing: -1px !important;
        white-space: nowrap !important;
    }
}

/* Rally point evasion settings shared by all three phone layouts. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 #raidList.evasionSettingsPanel {
        width: 100% !important;
        max-width: none !important;
        margin: 5px 0 14px !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionCard {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 5px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionHeader {
        min-height: 44px !important;
        gap: 7px !important;
        padding: 5px 7px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionIcon {
        flex-basis: 29px !important;
        width: 29px !important;
        height: 29px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionIcon img {
        width: 20px !important;
        height: auto !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionHeading strong {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionHeading small {
        font-size: 10px !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 #raidList .trav47EvasionForm.options {
        margin: 0 !important;
        padding: 7px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionToggle {
        min-height: 49px !important;
        gap: 7px !important;
        padding: 6px 7px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionCopy strong {
        font-size: 12px !important;
        line-height: 17px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionCopy small {
        font-size: 9px !important;
        line-height: 13px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionStatus {
        min-width: 42px !important;
        min-height: 21px !important;
        padding: 1px 6px !important;
        font-size: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid16 .trav47EvasionLocked.goldClubCard {
        margin: 0 !important;
        padding: 10px 8px 12px !important;
    }
}

/* Phone-only chat capsule. It always stays below the server clock; changing
   the village/hero side must never move it. */
.trav47MobileChatHud {
    display: none;
}

@media screen and (max-width: 1024px) {
    html#mainLayout,
    body {
        height: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100% !important;
        max-width: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    html#mainLayout,
    body,
    body * {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

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

    body {
        min-height: 100vh;
        padding: 54px 0 84px !important;
        -webkit-text-size-adjust: 100%;
        --travian-mobile-nav-button-size: clamp(48px, 13.5vw, 52px);
        --travian-mobile-nav-icon-scale: 0.74;
        --travian-mobile-currency-width: clamp(112px, 30vw, 120px);
        --travian-mobile-servertime-width: clamp(88px, 27vw, 108px);
    }

    /* The legacy desktop fallback is made from two opposing 50% gradients.
       While the large village bitmap is still downloading their centre seam
       becomes visible on phones.  Use one continuous lightweight fallback
       until #background paints its final scene. */
    body.buildingsV3.perspectiveResources {
        background-color: #67772e !important;
        background-image: linear-gradient(
            to bottom,
            #aac8e2 0%,
            #abc7df 26%,
            #8da378 31%,
            #67772e 39%,
            #67772e 100%
        ) !important;
        background-position: center top !important;
        background-size: 100% 100vh !important;
        background-repeat: no-repeat !important;
    }

    body.buildingsV3.perspectiveBuildings {
        background-color: #54643a !important;
        background-image: linear-gradient(
            to bottom,
            #aac8e2 0%,
            #b6c9d8 28%,
            #829174 34%,
            #54643a 42%,
            #54643a 100%
        ) !important;
        background-position: center top !important;
        background-size: 100% 100vh !important;
        background-repeat: no-repeat !important;
    }

    body.buildingsV3.perspectiveBuildings.rearrangeBuildings {
        background-color: #0d0f09 !important;
        background-image: linear-gradient(
            to bottom,
            #1b1e21 0%,
            #1b1e21 30%,
            #0d0f09 42%,
            #0d0f09 100%
        ) !important;
    }

    body.village1,
    body.village2 {
        height: auto !important;
        overflow-y: auto !important;
        --travian-mobile-scene-top: 152px;
        --travian-mobile-village-scene-top: 142px;
    }

    html#mainLayout.travian-mobile-map-page {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body #background,
    body #bodyWrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    body #bodyWrapper {
        height: auto !important;
        min-height: calc(100vh - 150px);
    }

    /* Keep responsive pages out of view until their first layout pass has
       completed, avoiding a visible desktop-sized panel before it settles. */
    body.statistics.travianStatisticsPrelayout #bodyWrapper,
    body.build.travianBuildPrelayout #bodyWrapper,
    body.message.travianMessagesPrelayout #bodyWrapper,
    body.travianHeroPrelayout #bodyWrapper {
        visibility: hidden !important;
    }

    /* The build scene extends outside #bodyWrapper, so hide it too until the
       responsive pass has established its final scale. */
    body.build.travianBuildPrelayout #background {
        visibility: hidden !important;
    }

    /* Non-village pages keep the bottom navigation outside #bodyWrapper.
       Do not let that shortened wrapper end the scenery and expose the
       desktop body's green perspective background while the page scrolls. */
    body.travianMobile.buildingsV3:not(.village1):not(.village2) #background {
        min-height: 100dvh !important;
    }

    /* Keep the buildings scenery covering long inner pages instead of
       letting its lower edge expose the legacy olive body fallback. */
    html#mainLayout[data-trav47-layout] body.build.buildingsV3.perspectiveBuildings:not(.village1):not(.village2) #background {
        background-size: auto 100% !important;
        background-repeat: no-repeat !important;
    }

    body.village1 #bodyWrapper,
    body.village2 #bodyWrapper {
        height: auto !important;
        min-height: calc(100vh - 150px) !important;
        overflow: visible !important;
    }

    body.buildingsV3 #background:before {
        display: none !important;
    }

    body #headerBar,
    body #topBar #logo,
    body #outOfGame,
    body #header .shop {
        display: none !important;
    }

    body #topBarHeroWrapper {
        display: none !important;
    }

    /* The desktop hero wrapper must never create an overlay on map pages. */
    body.map #topBarHeroWrapper,
    body.map #topBarHeroWrapper::before,
    body.map #topBarHeroWrapper::after {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    body.village1 #topBarHeroWrapper,
    body.village2 #topBarHeroWrapper {
        position: fixed !important;
        top: 64px !important;
        right: 0 !important;
        left: auto !important;
        z-index: 1090 !important;
        display: block !important;
        width: 120px !important;
        height: 144px !important;
        overflow: visible !important;
        transform: none !important;
        pointer-events: auto;
        /* The legacy header declares transition: all.  It animates the
           standalone hero by a few pixels while the page settles. */
        transition: none !important;
        animation: none !important;
    }

    body #topBarHeroWrapper #topBarHero {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 112px !important;
        height: 116px !important;
        margin-top: 40px !important;
        margin-right: 8px !important;
        overflow: visible !important;
        isolation: isolate !important;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: scale(0.9) !important;
        transform-origin: top right !important;
    }

    /* Authoritative phone hero frame. The legacy circular image layers are
       replaced by a compact cut-corner wood-and-gold card. */
    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        display: block !important;
        pointer-events: none !important;
        clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px) !important;
        background:
            radial-gradient(circle at 8px 8px, #f4dc94 0 1px, #70491f 1.5px 2.5px, transparent 3px),
            radial-gradient(circle at calc(100% - 8px) 8px, #f4dc94 0 1px, #70491f 1.5px 2.5px, transparent 3px),
            radial-gradient(circle at 8px calc(100% - 8px), #d6ad5d 0 1px, #593819 1.5px 2.5px, transparent 3px),
            radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #d6ad5d 0 1px, #593819 1.5px 2.5px, transparent 3px),
            linear-gradient(135deg, #6b4728 0%, #bc9255 18%, #5d3b21 48%, #a87d43 76%, #4a301e 100%) !important;
        box-shadow:
            inset 0 0 0 2px #4a2d19,
            inset 0 0 0 4px #d2ae68,
            inset 0 0 0 6px rgba(66, 42, 24, .92) !important;
        filter: drop-shadow(0 2px 2px rgba(24, 17, 10, .55)) !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero::after {
        content: "" !important;
        position: absolute !important;
        inset: 6px !important;
        z-index: 1 !important;
        display: block !important;
        pointer-events: none !important;
        clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px) !important;
        background: linear-gradient(to bottom, rgba(244, 221, 164, .42), rgba(65, 45, 28, .12) 38%, rgba(30, 39, 29, .5) 100%) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 232, 173, .72),
            inset 0 0 5px rgba(21, 15, 9, .62) !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #heroImageButton {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        left: 8px !important;
        z-index: 3 !important;
        width: auto !important;
        height: 94px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px) !important;
        background: #263326 !important;
        box-shadow:
            inset 0 0 0 2px #d7b66d,
            inset 0 0 0 3px #55391f !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #heroImageButton::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 4 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: inset 0 0 0 2px rgba(229, 195, 119, .78) !important;
        pointer-events: none !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #heroImageButton .heroImageHover {
        position: absolute !important;
        inset: 3px !important;
        width: auto !important;
        height: auto !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
        background: #334333 !important;
        box-shadow: none !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #heroImageButton .heroImage {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center 30% !important;
        image-rendering: auto !important;
        filter: none !important;
        opacity: 1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero > svg.health,
    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero > svg.experience {
        position: absolute !important;
        top: auto !important;
        bottom: 4px !important;
        z-index: 7 !important;
        display: block !important;
        width: 45px !important;
        height: 6px !important;
        overflow: hidden !important;
        border: 1px solid rgba(44, 29, 16, .9) !important;
        border-radius: 2px !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28), 0 1px 1px rgba(0, 0, 0, .42) !important;
        transform: none !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero > svg.health {
        right: 7px !important;
        left: auto !important;
        background: linear-gradient(to left, #73a936 0 var(--trav47-hero-health), #352e25 var(--trav47-hero-health) 100%) !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero > svg.experience {
        right: auto !important;
        left: 7px !important;
        background: linear-gradient(to right, #d6a839 0 var(--trav47-hero-experience), #352e25 var(--trav47-hero-experience) 100%) !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero > svg.health > *,
    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero > svg.experience > * {
        display: none !important;
    }

    /* Phone web layout — right version only: mirror the standalone hero to
       the opposite edge without changing its dimensions or vertical offset. */
    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side="right"]
    body:is(.village1, .village2) #topBarHeroWrapper {
        right: auto !important;
        left: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side="right"]
    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero {
        margin-right: 0 !important;
        margin-left: 8px !important;
        transform-origin: top left !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side="right"]
    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero #buttonz4 {
        right: -8px !important;
        left: auto !important;
        transform-origin: top left !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero .heroStatus {
        top: -7px !important;
        right: -7px !important;
        left: auto !important;
        transform: scale(.9) !important;
        transform-origin: top right !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side="right"]
    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero .heroStatus {
        right: auto !important;
        left: -7px !important;
        transform-origin: top left !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side="right"]
    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero #buttonL5 {
        right: auto !important;
        left: 42px !important;
        transform-origin: top center !important;
    }

    /* The compact desktop skin adds an old separator over the standalone
       frame.  On mobile it loads as a second, ghost-like frame. */
    body.village1 #topBarHeroWrapper #topBarHero::after,
    body.village2 #topBarHeroWrapper #topBarHero::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
    }

    body.village1 #topBarHeroWrapper #topBarHero,
    body.village2 #topBarHeroWrapper #topBarHero,
    body.village1 #topBarHeroWrapper #heroImageButton,
    body.village2 #topBarHeroWrapper #heroImageButton,
    body.village1 #topBarHeroWrapper .heroImage,
    body.village2 #topBarHeroWrapper .heroImage {
        animation: none !important;
        transition: none !important;
    }

    /* Unified phone HUD: the two shallow side readouts and the raised quick
       access bridge are one visual rail below the resource strip. */
    body #header .currency,
    body #servertime {
        position: fixed !important;
        top: 43px !important;
        z-index: 1230 !important;
        height: 25px !important;
        margin: 0 !important;
        border: 1px solid #4b3424 !important;
        color: #fff5d7 !important;
        background: linear-gradient(to bottom, #75583d 0%, #513925 52%, #352519 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 239, 196, .3), 0 2px 5px rgba(25, 17, 10, .32) !important;
        box-sizing: border-box !important;
        transition: top .22s ease !important;
    }

    body #header .currency {
        left: 0 !important;
        right: auto !important;
        display: grid !important;
        /* Pack each amount to its real text width.  The old equal `1fr`
           columns left unused space after the shorter silver amount and
           forced the longer gold amount into an ellipsis. */
        grid-template-columns: minmax(0, max-content) 14px minmax(0, max-content) 16px !important;
        grid-template-rows: 23px !important;
        align-items: center !important;
        justify-content: start !important;
        column-gap: 2px !important;
        width: var(--travian-mobile-currency-width) !important;
        max-width: var(--travian-mobile-currency-width) !important;
        min-width: var(--travian-mobile-currency-width) !important;
        padding: 0 3px 0 2px !important;
        border-left: 0 !important;
        border-radius: 0 0 8px 0 !important;
        direction: ltr !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    body #header .currency .trav47GoldOfferHud {
        position: absolute !important;
        top: 24px !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 3 !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        height: 15px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        border: 1px solid #426d16 !important;
        border-top: 0 !important;
        border-radius: 0 0 5px 5px !important;
        background: linear-gradient(180deg, #82b932 0%, #4e7e18 100%) !important;
        box-shadow: 0 2px 4px rgba(26, 42, 10, .3) !important;
        color: #fff !important;
        direction: rtl !important;
        font: 800 8px/14px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-overflow: clip !important;
        text-shadow: 0 1px 1px rgba(25, 50, 5, .8) !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }

    body #header .currency::before {
        content: none !important;
        display: none !important;
    }

    body #header .currency i {
        position: static !important;
        display: block !important;
        align-self: center !important;
        justify-self: center !important;
        margin: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        transform: none !important;
    }

    body #header .currency i.goldCoin_medium {
        grid-column: 4 !important;
        grid-row: 1 !important;
        width: 16px !important;
        height: 16px !important;
    }

    body #header .currency i.silverCoin_medium {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 14px !important;
        height: 14px !important;
    }

    body #header .currency .value {
        position: static !important;
        align-self: center !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #fff3d2 !important;
        direction: ltr !important;
        font: 700 clamp(9px, 2.45vw, 11px)/23px Arial, Helvetica, sans-serif !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 1px #24160e !important;
        white-space: nowrap !important;
    }

    body #header .currency .ajaxReplaceableGoldAmount {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    body #header .currency .ajaxReplaceableGoldAmount::after {
        content: none !important;
        display: none !important;
    }

    body #header .currency .ajaxReplaceableSilverAmount {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body #servertime {
        right: 0 !important;
        left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: clamp(88px, 27vw, 108px) !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 3px !important;
        border-right: 0 !important;
        border-radius: 0 0 0 8px !important;
        direction: rtl !important;
        font: 700 clamp(8px, 2.1vw, 10px)/23px Arial, Helvetica, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #24160e !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    body #servertime .timer {
        display: inline-block !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: #fff3d2 !important;
        direction: ltr !important;
        font: inherit !important;
        line-height: 23px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body:not(.map) .trav47MobileChatHud {
        position: fixed !important;
        top: 69px !important;
        right: 0 !important;
        left: auto !important;
        z-index: 1229 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: var(--travian-mobile-servertime-width, clamp(88px, 27vw, 108px)) !important;
        min-width: 0 !important;
        height: 19px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        border: 1px solid #31566d !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-radius: 0 0 0 6px !important;
        background: linear-gradient(180deg, #5b91ad 0%, #376a86 52%, #244e69 100%) !important;
        box-shadow: inset 0 1px 0 rgba(222, 244, 255, .32), 0 2px 4px rgba(20, 35, 46, .32) !important;
        color: #fff !important;
        direction: rtl !important;
        font: 800 9px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px rgba(14, 34, 47, .9) !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
    }

    body:not(.map) .trav47MobileChatHudIcon {
        position: relative !important;
        display: inline-block !important;
        flex: 0 0 11px !important;
        width: 11px !important;
        height: 8px !important;
        border: 1px solid rgba(255, 255, 255, .92) !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }

    body:not(.map) .trav47MobileChatHudIcon::after {
        content: "" !important;
        position: absolute !important;
        right: 1px !important;
        bottom: -3px !important;
        width: 3px !important;
        height: 3px !important;
        border-right: 1px solid rgba(255, 255, 255, .92) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .92) !important;
        background: #376a86 !important;
        transform: skewY(-35deg) !important;
    }

    body:not(.map) .trav47MobileChatHud.is-chat-restricted {
        border-color: #762017 !important;
        background: linear-gradient(180deg, #c64b3c 0%, #9f2b22 54%, #721b16 100%) !important;
    }

    body:not(.map) .trav47MobileChatHud.is-chat-restricted .trav47MobileChatHudIcon {
        width: 11px !important;
        height: 11px !important;
        border: 1.5px solid #fff !important;
        border-radius: 50% !important;
    }

    body:not(.map) .trav47MobileChatHud.is-chat-restricted .trav47MobileChatHudIcon::after {
        right: 1px !important;
        bottom: 4px !important;
        width: 7px !important;
        height: 1px !important;
        border: 0 !important;
        border-radius: 1px !important;
        background: #fff !important;
        transform: rotate(-45deg) !important;
    }

    body:not(.map) .trav47MobileChatHudLabel {
        display: inline-block !important;
        min-width: 0 !important;
        line-height: 18px !important;
    }

    body:not(.map) .trav47MobileChatHudUnread {
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        padding: 0 3px !important;
        border: 1px solid #7f150f !important;
        border-radius: 50% !important;
        color: #fff !important;
        background: linear-gradient(180deg, #ef5145, #b52319) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 1px 2px rgba(35, 12, 9, .45) !important;
        font: 800 8px/12px Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px #6f100b !important;
        box-sizing: border-box !important;
    }

    body:not(.map) .trav47MobileChatHudUnread[hidden] {
        display: none !important;
    }

    body.map .trav47MobileChatHud,
    body.map #header .currency .trav47GoldOfferHud {
        display: none !important;
    }

    body .travian-mobile-quick-access {
        --travian-mobile-quick-button-size: clamp(25px, 7.7vw, 30px);
        position: fixed !important;
        top: 36px !important;
        left: var(--travian-mobile-currency-width, 92px) !important;
        right: var(--travian-mobile-servertime-width, clamp(88px, 27vw, 108px)) !important;
        z-index: 1232 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: stretch !important;
        height: 49px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
        transition: top .22s ease !important;
    }

    body .travian-mobile-quick-buttons {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 49px !important;
        padding: 6px 5px 7px !important;
        border: 1px solid #493222 !important;
        border-top-color: #8f704e !important;
        border-radius: 0 0 19px 19px !important;
        background: linear-gradient(to bottom, #806247 0%, #5b402c 36%, #3b291d 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 239, 201, .34), inset 0 -2px 0 rgba(23, 14, 9, .22), 0 3px 7px rgba(24, 16, 10, .38) !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-buttons::before,
    body .travian-mobile-quick-buttons::after {
        content: "" !important;
        position: absolute !important;
        top: 6px !important;
        width: 10px !important;
        height: 25px !important;
        border-bottom: 1px solid #493222 !important;
        background: linear-gradient(to bottom, #73563d, #443020) !important;
        pointer-events: none !important;
    }

    body .travian-mobile-quick-buttons::before {
        right: -8px !important;
        border-right: 1px solid #493222 !important;
        border-radius: 0 0 11px 0 !important;
        transform: skewY(24deg) !important;
    }

    body .travian-mobile-quick-buttons::after {
        left: -8px !important;
        border-left: 1px solid #493222 !important;
        border-radius: 0 0 0 11px !important;
        transform: skewY(-24deg) !important;
    }

    body .travian-mobile-quick-buttons:not([data-mobile-quick-ready="1"]) {
        visibility: hidden;
    }

    body .travian-mobile-quick-access .layoutButton.buttonFramed.withIcon.round.travian-mobile-quick-button {
        float: none !important;
        flex: 1 1 var(--travian-mobile-quick-button-size);
        width: var(--travian-mobile-quick-button-size) !important;
        height: var(--travian-mobile-quick-button-size) !important;
        min-width: 19px !important;
        max-width: var(--travian-mobile-quick-button-size) !important;
        min-height: var(--travian-mobile-quick-button-size) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
    }

    body .travian-mobile-quick-access .layoutButton.buttonFramed.withIcon.round.travian-mobile-quick-button:before,
    body .travian-mobile-quick-access .layoutButton.buttonFramed.withIcon.round.travian-mobile-quick-button:after {
        top: 1px !important;
        right: 1px !important;
        bottom: 1px !important;
        left: 1px !important;
    }

    body .travian-mobile-quick-access .layoutButton.buttonFramed.withIcon.round.travian-mobile-quick-button svg {
        width: calc(var(--travian-mobile-quick-button-size) * 0.62) !important;
        height: calc(var(--travian-mobile-quick-button-size) * 0.62) !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }

    body .travian-mobile-quick-access .layoutButton.buttonFramed.withIcon.round.travian-mobile-quick-button svg.stable,
    body .travian-mobile-quick-access .layoutButton.buttonFramed.withIcon.round.travian-mobile-quick-button svg.barracks {
        width: calc(var(--travian-mobile-quick-button-size) * 0.66) !important;
        height: calc(var(--travian-mobile-quick-button-size) * 0.66) !important;
    }

    body .travian-mobile-quick-access .travian-mobile-quick-status {
        position: absolute;
        top: calc(100% - 2px);
        right: 50%;
        z-index: 6;
        min-width: 30px;
        padding: 0 2px;
        border-radius: 3px;
        color: #fff4cf;
        background: rgba(50, 33, 20, 0.9);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        font-family: Arial, Helvetica, Verdana, sans-serif;
        font-size: 8px;
        font-weight: bold;
        line-height: 10px;
        text-align: center;
        direction: ltr;
        white-space: nowrap;
        transform: translateX(50%);
        pointer-events: none;
    }

    body .travian-mobile-quick-access .travian-mobile-quick-status-barracks,
    body .travian-mobile-quick-access .travian-mobile-quick-status-workshop {
        background: rgba(12, 12, 12, 0.94);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 238, 190, 0.12);
    }

    body .travian-mobile-quick-access .travian-mobile-quick-status-stable {
        background: rgba(62, 43, 27, 0.96);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 225, 158, 0.16);
    }

    body .travian-mobile-quick-access .travian-mobile-quick-status-market {
        background: rgba(43, 55, 28, 0.94);
    }

    html.trav47-resource-hud-open body #header .currency,
    html.trav47-resource-hud-open body #servertime {
        top: 112px !important;
    }

    html.trav47-resource-hud-open body .travian-mobile-quick-access {
        top: 105px !important;
    }

    html.trav47-resource-hud-open body .travian-mobile-quick-popover,
    html.trav47-resource-hud-open body .travian-mobile-quick-notice {
        top: 158px !important;
    }

    body .travian-mobile-quick-access .travian-mobile-quick-button.disabled,
    body .travian-mobile-quick-access .travian-mobile-quick-button.is-plus-locked,
    body .travian-mobile-quick-access .travian-mobile-quick-button.is-missing {
        cursor: default !important;
        filter: grayscale(0.85) saturate(0.55);
        opacity: 0.72;
    }

    body .travian-mobile-quick-access .travian-mobile-quick-popover[hidden],
    body .travian-mobile-quick-access .travian-mobile-quick-notice[hidden] {
        display: none !important;
    }

    /* Quick links use one self-contained phone component.  This replaces the
       legacy beige popup and its cramped three-column editor. */
    body .travian-mobile-quick-popover {
        position: fixed !important;
        top: 91px !important;
        right: auto !important;
        left: 8px !important;
        z-index: 1225 !important;
        width: min(236px, calc(100vw - 16px)) !important;
        max-height: min(440px, calc(100dvh - 104px)) !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: 1px solid #493222 !important;
        border-radius: 10px !important;
        color: #3e2d1b !important;
        direction: rtl !important;
        background: linear-gradient(to bottom, #f7ecd1 0%, #ead8ad 100%) !important;
        box-shadow: 0 7px 18px rgba(24, 15, 9, .48), inset 0 1px 0 rgba(255, 248, 222, .78) !important;
        font-family: Tahoma, Arial, sans-serif !important;
        transform: none !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    html.trav47-resource-hud-open body .travian-mobile-quick-popover {
        max-height: calc(100dvh - 170px) !important;
    }

    body .travian-mobile-quick-panel-header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 36px !important;
        padding: 5px 38px !important;
        border-bottom: 1px solid #493222 !important;
        background: linear-gradient(to bottom, #87684a 0%, #60452f 52%, #3f2c20 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 239, 201, .34) !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-panel-title {
        position: relative !important;
        margin: 0 !important;
        padding-right: 18px !important;
        color: #fff3d2 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 24px !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #24160e !important;
        white-space: nowrap !important;
    }

    body .travian-mobile-quick-panel-title::before {
        content: "↗" !important;
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        color: #b8d86a !important;
        font: 700 15px/1 Arial, sans-serif !important;
        transform: translateY(-50%) !important;
    }

    body .travian-mobile-quick-panel-close {
        position: absolute !important;
        top: 6px !important;
        left: 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 0 2px !important;
        border: 1px solid #2e5012 !important;
        border-radius: 5px !important;
        color: #fff9df !important;
        background: linear-gradient(to bottom, #78aa34, #436f18) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 1px 2px rgba(0,0,0,.35) !important;
        font: 700 17px/20px Arial, sans-serif !important;
        text-shadow: 0 1px 1px #26340f !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-links-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;
        max-height: 288px !important;
        overflow: auto !important;
        padding: 9px 9px 6px !important;
        scrollbar-width: thin !important;
        scrollbar-color: #81623d #e6d3a8 !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-links-list a {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 5px 10px 5px 29px !important;
        border: 1px solid #b79a69 !important;
        border-radius: 6px !important;
        color: #315b14 !important;
        background: linear-gradient(to bottom, #fffaf0, #efe1bd) !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(81,57,30,.14) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        text-align: right !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-links-list a::after {
        content: "‹" !important;
        position: absolute !important;
        top: 50% !important;
        left: 10px !important;
        color: #70962c !important;
        font: 700 18px/1 Arial, sans-serif !important;
        transform: translateY(-52%) !important;
    }

    body .travian-mobile-quick-links-list a:active {
        border-color: #789a39 !important;
        background: #e6d9b7 !important;
        box-shadow: inset 0 1px 3px rgba(61,43,24,.2) !important;
    }

    body .travian-mobile-quick-empty {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 78px !important;
        margin: 0 !important;
        padding: 10px !important;
        border: 1px dashed #b79a69 !important;
        border-radius: 7px !important;
        color: #745d3a !important;
        background: rgba(255, 250, 235, .56) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-empty::before {
        content: "↗" !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 4px !important;
        border: 1px solid #a88e61 !important;
        border-radius: 50% !important;
        color: #688f25 !important;
        background: #f5e9c9 !important;
        font: 700 17px/1 Arial, sans-serif !important;
    }

    body .travian-mobile-quick-edit,
    body .travian-mobile-quick-suggestions-button,
    body .travian-mobile-quick-save,
    body .travian-mobile-quick-cancel {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 78px !important;
        min-height: 29px !important;
        margin: 0 !important;
        padding: 4px 12px !important;
        border: 1px solid #365d13 !important;
        border-radius: 6px !important;
        color: #fff9df !important;
        background: linear-gradient(to bottom, #7eaf35, #4d811c) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(47,35,19,.28) !important;
        font: 700 12px/19px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #29420f !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-link-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        margin: 2px 9px 9px !important;
    }

    body .travian-mobile-quick-link-actions .travian-mobile-quick-edit,
    body .travian-mobile-quick-link-actions .travian-mobile-quick-suggestions-button {
        margin: 0 !important;
    }

    body .travian-mobile-quick-suggestions-button {
        border-color: #8b7045 !important;
        color: #59401f !important;
        background: linear-gradient(to bottom, #fff8e6, #dcc38e) !important;
        text-shadow: 0 1px 0 #fff4d2 !important;
    }

    body .travian-mobile-quick-cancel {
        border-color: #8b7045 !important;
        color: #59401f !important;
        background: linear-gradient(to bottom, #fff8e6, #dcc38e) !important;
        text-shadow: 0 1px 0 #fff4d2 !important;
    }

    body .travian-mobile-quick-editor-head {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 5px !important;
        margin: 8px 15px 0 !important;
        color: #735b38 !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    body .travian-mobile-quick-editor-rows {
        display: grid !important;
        gap: 6px !important;
        max-height: 300px !important;
        overflow: auto !important;
        padding: 9px 9px 3px !important;
        scrollbar-width: thin !important;
        scrollbar-color: #81623d #e6d3a8 !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-editor-row {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 5px !important;
        align-items: center !important;
        padding: 6px !important;
        border: 1px solid #b89b6c !important;
        border-radius: 7px !important;
        background: rgba(255, 249, 232, .72) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-editor-row input {
        width: 100% !important;
        min-width: 0 !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 4px 7px !important;
        border: 1px solid #a98d61 !important;
        border-radius: 5px !important;
        outline: 0 !important;
        color: #47341e !important;
        background: #fffdf7 !important;
        box-shadow: inset 0 1px 2px rgba(92,65,34,.1) !important;
        font: 400 12px/19px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-editor-row input:focus {
        border-color: #73952f !important;
        box-shadow: 0 0 0 2px rgba(115,149,47,.16) !important;
    }

    body .travian-mobile-quick-editor-row input.travian-mobile-quick-order {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding-inline: 2px !important;
        direction: ltr !important;
        text-align: center !important;
    }

    body .travian-mobile-quick-editor-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        min-height: 29px !important;
        padding: 4px 9px !important;
        color: #3f321f !important;
        font: 700 12px/19px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-editor-empty {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 62px !important;
        padding: 10px !important;
        border: 1px dashed #b79a69 !important;
        border-radius: 7px !important;
        color: #745d3a !important;
        background: rgba(255,250,235,.56) !important;
        font: 700 12px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    body .travian-mobile-quick-suggestions-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;
        max-height: 306px !important;
        overflow: auto !important;
        padding: 9px 9px 3px !important;
        scrollbar-width: thin !important;
        scrollbar-color: #81623d #e6d3a8 !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-suggestion {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 33px !important;
        margin: 0 !important;
        padding: 5px 9px !important;
        border: 1px solid #b79a69 !important;
        border-radius: 6px !important;
        color: #4a391f !important;
        background: linear-gradient(to bottom, #fffaf0, #efe1bd) !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(81,57,30,.14) !important;
        font: 700 12px/20px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    body .travian-mobile-quick-suggestion > span {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body .travian-mobile-quick-suggestion > b {
        flex: 0 0 auto !important;
        min-width: 40px !important;
        padding: 1px 5px !important;
        border: 1px solid #aa8e5f !important;
        border-radius: 9px !important;
        color: #725a37 !important;
        background: #eadbb6 !important;
        font: 700 9px/15px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    body .travian-mobile-quick-suggestion.is-selected {
        border-color: #72962e !important;
        color: #315b14 !important;
        background: linear-gradient(to bottom, #f3f8df, #dce9b9) !important;
    }

    body .travian-mobile-quick-suggestion.is-selected > b {
        border-color: #628728 !important;
        color: #fff !important;
        background: #638d27 !important;
        text-shadow: 0 1px 1px #2d4711 !important;
    }

    body .travian-mobile-quick-form-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 8px 9px 10px !important;
    }

    body .travian-mobile-quick-notice {
        position: fixed;
        top: 88px;
        left: 50%;
        z-index: 1230;
        max-width: calc(100vw - 22px);
        padding: 5px 9px;
        border: 1px solid rgba(91, 61, 28, 0.85);
        border-radius: 4px;
        color: #fff7db;
        background: rgba(66, 43, 27, 0.96);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
        font-size: 12px;
        font-weight: bold;
        line-height: 16px;
        text-align: center;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    body #stockBar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1240 !important;
        width: 100% !important;
        height: 43px !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: 35px !important;
        gap: 1px !important;
        padding: 4px !important;
        margin: 0 !important;
        transform: none !important;
        transform-origin: top right !important;
        overflow: visible !important;
        border: 1px solid #4c3420 !important;
        border-top: 0 !important;
        border-radius: 0 0 8px 8px !important;
        background: linear-gradient(to bottom, #d7b77c 0%, #a57a48 46%, #67482f 100%) !important;
        box-shadow: 0 2px 6px rgba(28, 18, 10, .42), inset 0 1px 0 rgba(255, 242, 202, .45) !important;
        box-sizing: border-box !important;
    }

    body #stockBar::before {
        content: "";
        position: absolute;
        inset: 3px !important;
        z-index: -1;
        border: 1px solid #493223 !important;
        border-radius: 5px !important;
        background: #523a29 !important;
    }

    body #stockBar .warehouse,
    body #stockBar .granary {
        display: grid !important;
        min-width: 0 !important;
        gap: 1px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    body #stockBar .warehouse {
        grid-column: 1 / 4 !important;
        grid-row: 1 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body #stockBar .granary {
        grid-column: 4 / 5 !important;
        grid-row: 1 !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body #stockBar .capacity,
    body #stockBar #stockBarFreeCrop,
    body #stockBar .granary .stockBarButton:last-of-type {
        display: none !important;
    }

    body #stockBar .stockBarButton {
        width: 100% !important;
        min-width: 0 !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 2px 3px !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #3d2a17 !important;
        text-decoration: none !important;
        border: 1px solid #7e6040 !important;
        border-top-color: #f3dfb6 !important;
        border-radius: 4px !important;
        background: linear-gradient(to bottom, #f6e7c7 0%, #dfc08d 55%, #bd915b 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.58), inset 0 -1px 0 rgba(86,55,28,.18) !important;
        contain: layout paint !important;
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body #stockBar .warehouse .stockBarButton,
    body #stockBar .granary .stockBarButton {
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }

    body #stockBar .stockBarButton i {
        position: static !important;
        flex: 0 0 18px !important;
        align-self: center !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        transform: none !important;
    }

    body #stockBar .stockBarButton svg.productionBoost {
        top: 2px !important;
        right: 2px !important;
        width: 9px !important;
        height: 9px !important;
    }

    body #stockBar .stockBarButton i.iron_small {
        background-size: 17px auto !important;
    }

    body #stockBar .stockBarButton i.crop_medium {
        background-size: 15px auto !important;
    }

    body #stockBar .warehouse .stockBarButton i,
    body #stockBar .granary .stockBarButton i {
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: center !important;
        justify-self: center !important;
    }

    body #stockBar .stockBarButton .value {
        position: static !important;
        flex: 0 1 auto !important;
        align-self: center !important;
        min-width: 0 !important;
        max-width: calc(100% - 21px) !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        direction: ltr !important;
        font: 700 clamp(9px, 2.65vw, 11px)/20px Arial, Helvetica, sans-serif !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
        font-feature-settings: "tnum" 1;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.48) !important;
    }

    body #stockBar .warehouse .stockBarButton .value,
    body #stockBar .granary .stockBarButton .value {
        grid-column: auto !important;
        grid-row: auto !important;
        display: block !important;
        justify-self: auto !important;
        width: auto !important;
        max-width: calc(100% - 21px) !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-align: center !important;
        direction: ltr !important;
    }

    body #stockBar .warehouse .stockBarButton .barBox,
    body #stockBar .granary .stockBarButton .barBox {
        display: none !important;
    }

    body #stockBar .stockBarButton .barBox {
        display: none !important;
    }

    body #stockBar .stockBarButton::before,
    body #stockBar .stockBarButton::after {
        content: none !important;
        display: none !important;
    }

    body #stockBar .trav47ResourceHudDetails {
        position: absolute !important;
        top: 42px !important;
        right: 0 !important;
        left: 0 !important;
        z-index: -2 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1px !important;
        width: 100% !important;
        height: 70px !important;
        max-height: 0 !important;
        padding: 0 4px 4px !important;
        overflow: hidden !important;
        border: 1px solid #4a3322 !important;
        border-top: 0 !important;
        border-radius: 0 0 9px 9px !important;
        background: linear-gradient(to bottom, #6c4e35 0%, #493223 100%) !important;
        box-shadow: 0 4px 9px rgba(25, 16, 9, .38) !important;
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        transform-origin: top center !important;
        transition: max-height .22s ease, opacity .16s ease, transform .22s ease !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    body #stockBar.is-expanded .trav47ResourceHudDetails {
        z-index: 2 !important;
        max-height: 70px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    body #stockBar .trav47ResourceHudDetail {
        display: grid !important;
        grid-template-rows: 20px 19px 20px !important;
        align-items: center !important;
        min-width: 0 !important;
        height: 64px !important;
        padding: 2px !important;
        overflow: hidden !important;
        border: 1px solid #8b6b47 !important;
        border-top-color: #ead4a7 !important;
        border-radius: 0 0 5px 5px !important;
        color: #3c2b1a !important;
        background: linear-gradient(to bottom, #f4e5c6 0%, #e7d1a5 58%, #cfa872 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.52) !important;
        box-sizing: border-box !important;
    }

    body #stockBar :is(.trav47ResourceHudCapacity, .trav47ResourceHudProduction) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    body #stockBar .trav47ResourceHudCapacity i {
        position: static !important;
        flex: 0 0 15px !important;
        width: 15px !important;
        height: 15px !important;
        margin: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        transform: none !important;
    }

    body #stockBar .trav47ResourceHudCapacity b,
    body #stockBar .trav47ResourceHudProduction b {
        min-width: 0 !important;
        overflow: hidden !important;
        direction: ltr !important;
        font: 700 clamp(8px, 2.15vw, 9.5px)/18px Arial, Helvetica, sans-serif !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body #stockBar .trav47ResourceHudProduction > span {
        color: #745a37 !important;
        font: 700 clamp(7px, 1.9vw, 8.5px)/18px Tahoma, Arial, sans-serif !important;
    }

    body #stockBar .trav47ResourceHudProduction b {
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
        color: #386b17 !important;
        direction: rtl !important;
    }

    body #stockBar .trav47ResourceHudProduction b > span {
        color: inherit !important;
        font: inherit !important;
        line-height: inherit !important;
        white-space: nowrap !important;
    }

    body #stockBar .trav47ResourceHudFill {
        min-width: 0 !important;
        overflow: hidden !important;
        border-top: 1px solid rgba(126, 93, 53, .28) !important;
        color: #5a3e20 !important;
        direction: rtl !important;
        font: 700 clamp(6.7px, 1.9vw, 8px)/19px Tahoma, Arial, sans-serif !important;
        letter-spacing: -.15px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body #topBar {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1510 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 76px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        pointer-events: auto;
    }

    body #topBar #header {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 76px !important;
    }

    body #topBar #header:before {
        content: "" !important;
        position: absolute !important;
        top: -7px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: -1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background:
            linear-gradient(to bottom, #765f43 0%, #5b4630 31%, #3f4837 65%, #29372d 100%) !important;
        box-shadow:
            inset 0 -1px 0 rgba(17, 28, 21, .5),
            0 -3px 8px rgba(17, 23, 18, .34) !important;
        clip-path: none !important;
        -webkit-mask:
            radial-gradient(ellipse 30px 14px at center 14px, #000 88%, rgba(0, 0, 0, .82) 93%, rgba(0, 0, 0, .36) 97%, transparent 100%) left top / 60px 28px no-repeat,
            radial-gradient(ellipse 30px 14px at center 14px, #000 88%, rgba(0, 0, 0, .82) 93%, rgba(0, 0, 0, .36) 97%, transparent 100%) right top / 60px 28px no-repeat,
            linear-gradient(#000 0 0) left 14px / 60px 3px no-repeat,
            linear-gradient(#000 0 0) right 14px / 60px 3px no-repeat,
            linear-gradient(#000 0 0) left 17px / 100% calc(100% - 17px) no-repeat !important;
        mask:
            radial-gradient(ellipse 30px 14px at center 14px, #000 88%, rgba(0, 0, 0, .82) 93%, rgba(0, 0, 0, .36) 97%, transparent 100%) left top / 60px 28px no-repeat,
            radial-gradient(ellipse 30px 14px at center 14px, #000 88%, rgba(0, 0, 0, .82) 93%, rgba(0, 0, 0, .36) 97%, transparent 100%) right top / 60px 28px no-repeat,
            linear-gradient(#000 0 0) left 14px / 60px 3px no-repeat,
            linear-gradient(#000 0 0) right 14px / 60px 3px no-repeat,
            linear-gradient(#000 0 0) left 17px / 100% calc(100% - 17px) no-repeat !important;
        filter:
            drop-shadow(0 -1px 0 rgba(145, 112, 68, .94))
            drop-shadow(0 -2px 3px rgba(31, 21, 13, .38)) !important;
    }

    body #topBar #header #navigation {
        bottom: 0 !important;
    }

    body #header #navigation {
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 66px !important;
        max-width: none !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 2px;
        padding: 5px 5px 4px;
        transform: none !important;
        transform-origin: center !important;
        direction: rtl;
        box-sizing: border-box;
    }

    body:is(.village1, .village2) #header #navigation {
        display: flex !important;
    }

    body #header #navigation > a,
    body #header #navigation > label {
        position: relative !important;
        display: block !important;
        flex: 0 0 48px;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        align-self: center !important;
        justify-self: center !important;
        border: 1px solid #4a3423;
        border-radius: 50%;
        background-image: linear-gradient(to bottom, #d5bd92 0%, #9c7650 47%, #684a34 100%);
        box-shadow: inset 0 1px 0 #f2dfb9, inset 0 -1px 0 #4d3525, 0 2px 3px rgba(0, 0, 0, .42);
        -webkit-tap-highlight-color: transparent;
    }

    body #header #navigation > a:before,
    body #header #navigation > label:before {
        top: 3px;
        right: 3px;
        bottom: 3px;
        left: 3px;
    }

    body #header #navigation > a:after,
    body #header #navigation > label:after {
        top: 1px !important;
        right: 1px !important;
        width: 62px !important;
        height: 62px !important;
        transform: scale(.70);
        transform-origin: top right;
    }

    body #header #navigation > a:hover:after,
    body #header #navigation > a:focus:after,
    body #header #navigation > label:hover:after,
    body #header #navigation > label:focus:after {
        top: 0 !important;
    }

    body #header #navigation > a.active,
    body #header #navigation > a.travian-mobile-active {
        background-image: linear-gradient(to bottom, #f0d39d, #b78b55);
        box-shadow: 0 0 0 2px rgba(255, 240, 160, 0.5), inset 0 1px 0 #fff4cd, inset 0 -1px 0 #7f5632;
    }

    body #header #navigation > a.dailyQuests,
    body #header #navigation > a.mobileShopButton {
        display: none !important;
    }

    body:is(.village1, .village2) #header #navigation > :is(a, label) {
        align-self: end !important;
    }

    /* The ears belong to the footer silhouette.  These transparent hit areas
       preserve drawer access without rendering buttons or arrows over them. */
    body #header #navigation > .travian-mobile-info-toggle,
    body #header #navigation > .travian-mobile-side-toggle {
        position: absolute !important;
        top: -17px !important;
        bottom: auto !important;
        z-index: 5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 60px !important;
        min-width: 60px !important;
        height: 33px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
        cursor: pointer !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body #header #navigation > .travian-mobile-info-toggle {
        right: 0 !important;
        left: auto !important;
    }

    body #header #navigation > .travian-mobile-side-toggle {
        right: auto !important;
        left: 0 !important;
    }

body #header #navigation > .travian-mobile-info-toggle::before,
body #header #navigation > .travian-mobile-side-toggle::before {
        content: "" !important;
        position: absolute !important;
    top: 5px !important;
        left: 50% !important;
        display: block !important;
        width: 15px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: linear-gradient(to right, #a8792d, #f3d98b 48%, #a8792d) !important;
        box-shadow:
            0 4px 0 #d7b866,
            0 8px 0 #b58a3f,
            0 1px 1px rgba(35, 24, 11, .7) !important;
        transform: translateX(-50%) !important;
        opacity: .96 !important;
        pointer-events: none !important;
    }

    body #header #navigation > .travian-mobile-info-toggle::after,
    body #header #navigation > .travian-mobile-side-toggle::after {
        content: none !important;
        display: none !important;
    }

    body #header #navigation .indicator {
        top: -5px;
        left: -5px;
        right: auto;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        line-height: 20px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        background: #b42d1f;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    }

    body nav#mobileMenu {
        position: fixed !important;
        right: auto !important;
        bottom: 88px !important;
        left: 0 !important;
        z-index: 1150 !important;
        display: block !important;
        width: min(152px, calc(100vw - 8px));
        max-width: none !important;
        max-height: min(48vh, 310px);
        overflow: auto;
        box-sizing: border-box;
        padding: 4px;
        border: 2px solid #5d402b;
        border-radius: 0 8px 8px 0;
        background: #e6d8c2;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        opacity: 0;
        transform: none !important;
        transform-origin: bottom left !important;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    body.village1 nav#mobileMenu {
        bottom: 194px !important;
    }

    body.travian-mobile-options-open nav#mobileMenu {
        opacity: 1;
        transform: none !important;
        pointer-events: auto;
    }

    body nav#mobileMenu ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    body nav#mobileMenu ul li {
        margin: 0 !important;
        border-bottom: 1px solid rgba(94, 70, 58, 0.22);
    }

    body nav#mobileMenu ul li a {
        display: block;
        padding: 4px 0;
        color: #4f382a;
        font-size: 12px;
        line-height: 17px;
        font-weight: bold;
        text-decoration: none;
    }

    body nav#mobileMenu .mobileAgencyToggle {
        display: block;
        width: 100%;
        padding: 4px 0;
        border: 0;
        color: #4f382a;
        background: transparent;
        font-family: inherit;
        font-size: 12px;
        line-height: 17px;
        font-weight: bold;
        text-align: right;
        cursor: pointer;
    }

    body nav#mobileMenu .mobileAgencyToggle .inlineIcon {
        width: 100%;
        grid-template-columns: 18px 1fr auto;
    }

    body nav#mobileMenu .mobileAgencyToggle:after {
        content: none !important;
        display: none !important;
    }

    body nav#mobileMenu .mobileAgencyToggle[aria-expanded="true"]:after {
        transform: rotate(180deg);
    }

    body nav#mobileMenu .mobileAgencyCount {
        min-width: 17px;
        height: 17px;
        margin-left: 17px;
        border-radius: 3px;
        color: #fff8e9;
        background: #688b2f;
        font-size: 11px;
        line-height: 17px;
        text-align: center;
    }

    body nav#mobileMenu .mobileAgencyAccounts[hidden] {
        display: none !important;
    }

    body nav#mobileMenu .mobileAgencyAccounts {
        margin: 0 0 5px;
        padding: 5px;
        border: 1px solid rgba(96, 70, 43, 0.34);
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(255, 250, 232, 0.92), rgba(218, 199, 166, 0.78));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    body nav#mobileMenu .mobileAgencyAccountForm {
        margin: 0 0 4px;
    }

    body nav#mobileMenu .mobileAgencyAccountForm:last-child {
        margin-bottom: 0;
    }

    body nav#mobileMenu .mobileAgencyAccountButton,
    body nav#mobileMenu .mobileAgencyCurrent {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        width: 100%;
        min-height: 30px;
        box-sizing: border-box;
        padding: 4px 6px;
        border: 1px solid #8a6c48;
        border-radius: 3px;
        color: #473426;
        background: linear-gradient(180deg, #fff8df, #dec59d);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        font-family: inherit;
        font-size: 11px;
        line-height: 15px;
        text-align: right;
        cursor: pointer;
    }

    body nav#mobileMenu .mobileAgencyAccountButton:active {
        background: linear-gradient(180deg, #cfb183, #f4dfb8);
    }

    body nav#mobileMenu .mobileAgencyAccountButton.returnButton {
        border-color: #527329;
        color: #314619;
        background: linear-gradient(180deg, #eef8d8, #bfd38e);
    }

    body nav#mobileMenu .mobileAgencyAccountButton .accountName {
        max-width: 88px;
        overflow: hidden;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body nav#mobileMenu .mobileAgencyAccountButton .accountAction,
    body nav#mobileMenu .mobileAgencyCurrent small {
        color: #765d43;
        font-size: 10px;
        white-space: nowrap;
    }

    body nav#mobileMenu .mobileAgencyCurrent {
        border-style: dashed;
        cursor: default;
        opacity: 0.78;
    }

    body nav#mobileMenu .mobileAgencyEmpty {
        padding: 5px 2px;
        color: #765f4b;
        font-size: 11px;
        line-height: 15px;
        text-align: center;
    }

    body nav#mobileMenu ul li .inlineIcon {
        display: inline-grid;
        grid-template-columns: 16px auto;
        align-items: center;
        column-gap: 4px;
    }

    body nav#mobileMenu ul li .inlineIcon svg {
        width: 16px;
        height: 16px;
        fill: #5e463a;
    }

    body nav#mobileMenu a.profile::after,
    body nav#mobileMenu a.profile .inlineIcon::after {
        content: none !important;
        display: none !important;
    }

    body nav#mobileMenu svg.divider,
    body nav#mobileMenu ul:last-of-type,
    body nav#mobileMenu .copyright {
        display: none;
    }

    body #center {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-height: calc(100vh - 150px) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body #center #contentOuterContainer {
        float: none !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible;
    }

    body #center #contentOuterContainer.size1,
    body #center #contentOuterContainer.size2 {
        width: 100% !important;
    }

    body #center #contentOuterContainer .contentContainer {
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - 150px);
        overflow: visible !important;
        box-sizing: border-box;
    }

    body:not(.village1):not(.village2):not(.trav47ReportsPage) #center #contentOuterContainer {
        padding: 0 8px 12px !important;
        box-sizing: border-box;
    }

    body:not(.village1):not(.village2):not(.trav47ReportsPage):not(.login):not(.logout):not(.activate):not(.error_site) #center #contentOuterContainer {
        margin-top: 30px !important;
    }

    body:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer {
        overflow: visible !important;
    }

    body #content {
        max-width: 100% !important;
        color: #2c1f15;
        font-size: 13px !important;
        line-height: 1.35;
        box-sizing: border-box;
    }

    body:not(.village1):not(.village2):not(.trav47ReportsPage) #center #contentOuterContainer #content {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px 16px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    body.hero:not(.village1):not(.village2) #center #contentOuterContainer #content,
    body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer #content,
    body.hero_adventure:not(.village1):not(.village2) #center #contentOuterContainer #content,
    body.start_adventure:not(.village1):not(.village2) #center #contentOuterContainer #content,
    body.hero_auction:not(.village1):not(.village2) #center #contentOuterContainer #content {
        padding-top: 0 !important;
    }

    body #content h1.titleInHeader {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 4px 8px !important;
        margin: 0 0 8px !important;
        overflow: visible !important;
        color: #3d2b1b;
        font-size: 20px !important;
        font-weight: bold;
        line-height: 1.18 !important;
        font-family: Arial, Helvetica, Verdana, sans-serif !important;
        opacity: 1 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
        -webkit-text-fill-color: #3d2b1b !important;
        -webkit-text-stroke: 0 transparent !important;
        white-space: nowrap !important;
        box-sizing: border-box;
    }

    body #content h1.titleInHeader .level,
    body #content h1.titleInHeader .coordinates,
    body #content h1.titleInHeader .coordinatesWrapper {
        display: inline-block;
        margin-inline-start: 4px;
        font-size: 12px !important;
        line-height: 1.2 !important;
        opacity: 1 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
        -webkit-text-fill-color: #f88c1f !important;
        -webkit-text-stroke: 0 transparent !important;
        vertical-align: baseline;
        white-space: nowrap;
    }

    body .contentNavi {
        direction: ltr;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 36px;
        padding: 0 0 5px !important;
        margin: 0 0 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap;
        transform: none !important;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body .contentNavi::-webkit-scrollbar {
        display: none;
    }

    body:not(.village1):not(.village2) #center #contentOuterContainer #content > .contentNavi {
        width: calc(100% + 16px) !important;
        max-width: none !important;
        margin: 4px -8px 8px !important;
    }

    body.hero:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader,
    body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader,
    body.hero_adventure:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader,
    body.hero_auction:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.hero:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader + .contentNavi,
    body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader + .contentNavi,
    body.hero_adventure:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader + .contentNavi,
    body.hero_auction:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader + .contentNavi {
        margin-top: 0 !important;
    }

    body .contentNavi .scrollingContainer {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: stretch;
        gap: 3px;
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    body .contentNavi .content {
        direction: rtl;
        float: none !important;
        display: inline-flex !important;
        align-items: stretch;
        flex: 1 0 66px;
        width: auto !important;
        min-width: 66px !important;
        max-width: none !important;
        height: 32px !important;
        margin: 0 !important;
    }

    body .contentNavi .content a,
    body .contentNavi .content a.tabItem {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 32px !important;
        min-height: 0 !important;
        padding: 0 5px !important;
        overflow: hidden;
        color: #4c3726;
        font-size: 10px !important;
        line-height: 1.1 !important;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    body.rtl .contentNavi {
        direction: rtl;
    }


    body #content table {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        table-layout: auto;
    }

    body #content table th,
    body #content table td {
        min-width: 0 !important;
        padding: 4px 3px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        vertical-align: middle;
        box-sizing: border-box;
    }

    body #content table td.name,
    body #content table td.player,
    body #content table td.village,
    body #content table td.subject,
    body #content table td.desc {
        max-width: 126px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body #content .boxes,
    body #content .boxes-contents,
    body #content .roundedCornersBox,
    body #content .contractWrapper,
    body #content .culturePointsAndPopulation,
    body #content .upgradeButtonsContainer {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    body.village1 #center #contentOuterContainer,
    body.village2 #center #contentOuterContainer {
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        z-index: 30;
    }

    body.village1 #center #contentOuterContainer:before,
    body.village1 #center #contentOuterContainer:after,
    body.village2 #center #contentOuterContainer:before,
    body.village2 #center #contentOuterContainer:after,
    body.village1 #center #contentOuterContainer .contentTitle,
    body.village2 #center #contentOuterContainer .contentTitle,
    body.village1 #center #contentOuterContainer .contentFooter,
    body.village2 #center #contentOuterContainer .contentFooter {
        display: none !important;
    }

    body.village1 #center #contentOuterContainer .contentContainer,
    body.village2 #center #contentOuterContainer .contentContainer,
    body.village1 #center #contentOuterContainer #content,
    body.village2 #center #contentOuterContainer #content {
        width: 100% !important;
        min-height: calc(100vh - 150px);
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        overflow: visible !important;
    }

    body.village1 #background {
        min-height: 100vh !important;
        background-image: url("../../images/village/backgrounds/resources-modern.jpg") !important;
        /* The original scene bitmap ended before the mobile scene container,
           exposing the old dark-green desktop fallback above the bottom bar. */
        background-size: auto 100% !important;
        background-position: var(--travian-mobile-resource-bg-x, -725px) var(--travian-mobile-resource-bg-y, 16px) !important;
        background-repeat: no-repeat !important;
    }

    body.village2 #background {
        min-height: 100vh !important;
        background-image:
            url("../../images/village/backgrounds/buildings-modern.jpg"),
            url("../../images/village/backgrounds/resources-modern.jpg") !important;
        background-size:
            var(--travian-mobile-village-bg-size, 2095px auto),
            var(--travian-mobile-resource-bg-size, 1684px auto) !important;
        background-position:
            var(--travian-mobile-village-bg-x, -819px) var(--travian-mobile-village-bg-y, 92px),
            var(--travian-mobile-resource-bg-x, -725px) var(--travian-mobile-resource-bg-y, 16px) !important;
        background-repeat: no-repeat, no-repeat !important;
    }

    body.village2 #background.showWall:after {
        display: none !important;
        content: none !important;
    }

    body.village1 #center #contentOuterContainer #content,
    body.village2 #center #contentOuterContainer #content {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.village1 #center #contentOuterContainer .contentContainer,
    body.village1 #center #contentOuterContainer #content {
        min-height: max(calc(100vh - 150px), calc(var(--travian-mobile-scene-top, 152px) + var(--travian-mobile-field-height, 304px) + 150px)) !important;
    }

    body.village2 #center #contentOuterContainer .contentContainer,
    body.village2 #center #contentOuterContainer #content {
        min-height: max(calc(100vh - 150px), calc(var(--travian-mobile-village-scene-top, var(--travian-mobile-scene-top, 152px)) + var(--travian-mobile-village-height, 534px) + 150px)) !important;
    }

    body.village1 .village1Content {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: max(calc(100vh - 150px), calc(var(--travian-mobile-scene-top, 152px) + var(--travian-mobile-field-height, 304px) + 150px)) !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
        box-sizing: border-box;
    }

    html[data-trav47-layout] body.village1 div.village1 #resourceFieldContainer {
        position: absolute !important;
        top: var(--travian-mobile-scene-top, 152px) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: 473px !important;
        height: 304px !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: translateX(-50%) scale(var(--travian-mobile-field-scene-scale, 0.62)) !important;
        transform-origin: top center !important;
        zoom: 1 !important;
        z-index: 1;
    }

    body.village1 #resourceFieldContainer .level,
    body.village2 #village_map .level {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    body.village1 div.village1 div#map_details,
    body.village2 div.village2 div#map_details {
        position: fixed !important;
        top: 92px !important;
        right: auto !important;
        bottom: auto !important;
        left: 10px !important;
        z-index: 1095 !important;
        display: block !important;
        width: 222px !important;
        max-width: calc(100vw - 118px) !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
        transform: none !important;
        box-sizing: border-box;
    }

    /* Dorf 2 follows the selected full-play rail side. The regular mobile
       layout intentionally keeps the shared left alignment above. */
    html[data-trav47-layout="desktop"][data-trav47-village-side="right"] body.village2 div.village2 div#map_details.dorf2MobileMovements {
        right: 10px !important;
        left: auto !important;
    }

    html[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.village2 div.village2 div#map_details.dorf2MobileMovements {
        right: auto !important;
        left: 10px !important;
    }

    body.village1 div.village1 div#map_details > .movements,
    body.village2 div.village2 div#map_details > .movements {
        position: static !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.village1 div.village1 div#map_details .villageList.movements,
    body.village2 div.village2 div#map_details .villageList.movements,
    body.village1 div.village1 div#map_details .villageList.units {
        position: relative !important;
        display: block !important;
        width: 222px !important;
        max-width: calc(100vw - 118px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #3e3429;
        font-size: 12px !important;
        line-height: 1.35 !important;
        text-align: right;
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 6px;
        box-shadow: 0 1px 7px rgba(0, 0, 0, 0.55);
        pointer-events: auto !important;
        transform: none !important;
        box-sizing: border-box;
    }

    body.village1 div.village1 div#map_details .villageList.movements > div,
    body.village2 div.village2 div#map_details .villageList.movements > div,
    body.village1 div.village1 div#map_details .villageList.units > div {
        background-image: none !important;
    }

    body.village1 div.village1 div#map_details .villageList.production {
        display: none !important;
    }

    body.village1 div.village1 div#map_details input#showTroopsToggleMobile {
        display: none !important;
    }

    body.village1 div.village1 div#map_details .showTroopsToggleMobile {
        position: fixed !important;
        bottom: 138px !important;
        left: 6px !important;
        z-index: 1096 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        cursor: pointer;
        pointer-events: auto;
        border: 1px solid #553420;
        border-radius: 50%;
        background-image: linear-gradient(to bottom, #cbb198, #7b6050);
        box-shadow: inset 0 1px 0 #ddcbb7, inset 0 -1px 0 #664f3d, 0 3px 5px rgba(0, 0, 0, 0.34);
        -webkit-tap-highlight-color: transparent;
    }

    body.village1 div.village1 div#map_details .showTroopsToggleMobile:before {
        content: "";
        position: absolute;
        inset: 5px;
        border: 1px solid #553420;
        border-radius: 50%;
        background-color: #e5d4be;
        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.45);
    }

    body.village1 div.village1 div#map_details .showTroopsToggleMobile svg {
        position: relative;
        z-index: 1;
        width: 27px;
        height: 27px;
    }

    body.village1 div.village1 div#map_details .showTroopsToggleMobile svg .outline {
        fill: #006900;
        stroke: #006900;
        stroke-width: 1.5;
    }

    body.village1 div.village1 div#map_details .showTroopsToggleMobile svg .icon {
        fill: #6a9d19;
    }

    body.village1 div.village1 div#map_details input#showTroopsToggleMobile:checked + label {
        background-image: linear-gradient(to bottom, #dbc1a8, #b49581);
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.units {
        position: fixed !important;
        bottom: 190px !important;
        left: 10px !important;
        display: none !important;
        width: auto !important;
        max-width: 220px !important;
        max-height: calc(100dvh - 282px) !important;
        padding: 0 !important;
        overflow: auto !important;
        text-align: center;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details input#showTroopsToggleMobile:checked ~ .villageList.units {
        display: block !important;
    }

    /* Native phone troop rows sit five pixels from the card's right edge.
       The table remains content-sized, so large troop counts widen the card
       instead of wrapping or clipping the number. */
    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents.cf {
        width: max-content !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 2px 5px 3px 2px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.units table#troops {
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-spacing: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.units table#troops tbody {
        display: flex !important;
        flex-direction: column !important;
        width: max-content !important;
        min-width: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.units table#troops tbody tr {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        direction: rtl !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.units table#troops td.ico {
        display: block !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        min-width: 16px !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.units table#troops td.num {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 5px 0 0 !important;
        direction: ltr !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body.village1 div.village1 div#map_details table,
    body.village2 div.village2 div#map_details table {
        width: auto !important;
        min-width: 85px;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    /* Five pixels between the event chevrons and the movement count in all
       three phone presentations. */
    body.village1 div.village1 div#map_details table#movements .mov,
    body.village2 div.village2 div#map_details table#movements .mov {
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }

    body.village1 div.village1 div#map_details .boxes-contents.cf,
    body.village2 div.village2 div#map_details .boxes-contents.cf {
        padding: 8px !important;
    }

    /* Regular mobile movement card: the legacy scaled table is replaced by
       the same five-row compact component used by the two web-phone layouts. */
    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.movements,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details .villageList.movements {
        max-height: 112px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents.cf,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details .villageList.movements .boxes-contents.cf {
        max-height: 112px !important;
        padding: 0 4px 3px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.movements .trav47RailCardTitle,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details .villageList.movements .trav47RailCardTitle {
        display: block !important;
        width: 100% !important;
        height: 15px !important;
        margin: 0 0 2px !important;
        padding: 0 3px 0 0 !important;
        color: #513a1f !important;
        font-size: 11px !important;
        font-weight: normal !important;
        line-height: 15px !important;
        text-align: right !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements,
    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements tbody,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements thead,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements thead {
        display: none !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements tbody tr,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements tbody tr {
        display: grid !important;
        grid-template-columns: max-content max-content !important;
        grid-template-rows: 18px !important;
        align-items: center !important;
        justify-content: center !important;
        column-gap: 3px !important;
        width: 100% !important;
        min-height: 18px !important;
        padding: 0 2px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements tbody td.typ,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements tbody td.typ {
        display: flex !important;
        align-items: center !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements tbody td.typ img,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements tbody td.typ img {
        margin: 0 2px 0 1px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements tbody td:not(.typ),
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements tbody td:not(.typ) {
        display: flex !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 13px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements .mov,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements .mov {
        display: block !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        float: none !important;
        font-size: 10.5px !important;
        font-weight: bold !important;
        line-height: 18px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements .dur_r,
    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements .dur_l,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements .dur_r,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements .dur_l {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #68513d !important;
        float: none !important;
        font-size: 10.5px !important;
        line-height: 18px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.village1 div.village1 div#map_details table#movements .a1,
    body.village2 div.village2 div#map_details table#movements .a1 {
        color: #ff0000;
    }

    body.village1 div.village1 div#map_details table#movements .d1,
    body.village2 div.village2 div#map_details table#movements .d1 {
        color: #228b22;
    }

    body.village1 div.village1 div#map_details table#movements .a2,
    body.village1 div.village1 div#map_details table#movements .d2,
    body.village2 div.village2 div#map_details table#movements .a2,
    body.village2 div.village2 div#map_details table#movements .d2 {
        color: #f2c700;
    }

    body.village1 div.village1 div#map_details table#movements .a3,
    body.village1 div.village1 div#map_details table#movements .d3,
    body.village2 div.village2 div#map_details table#movements .a3,
    body.village2 div.village2 div#map_details table#movements .d3 {
        color: #b500a3;
    }

    body.village1 div.village1 div#map_details table#movements .adventure,
    body.village1 div.village1 div#map_details table#movements .settle,
    body.village2 div.village2 div#map_details table#movements .adventure,
    body.village2 div.village2 div#map_details table#movements .settle {
        color: #0022af;
    }

    body.village1 div.village1 div#map_details table#troops thead {
        display: none !important;
    }

    body.village2 div.villageMapWrapper {
        position: absolute !important;
        top: var(--travian-mobile-village-scene-top, var(--travian-mobile-scene-top, 152px)) !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--travian-mobile-village-x, 50%) !important;
        width: 628px !important;
        height: 534px !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: translateX(var(--travian-mobile-village-translate-x, -50%)) scale(var(--travian-mobile-village-scene-scale, 0.52)) !important;
        transform-origin: top left !important;
        zoom: 1 !important;
        box-sizing: border-box;
    }

    body.village2 div#village_map {
        position: absolute !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width: 628px !important;
        height: 534px !important;
        margin: 0 !important;
        transform: none !important;
        transform-origin: top center !important;
    }

    body.village1 .village1 div.buildingList,
    body.village2 .village2 div.buildingList {
        position: absolute !important;
        top: calc(var(--travian-mobile-scene-top, 152px) + var(--travian-mobile-field-height, 304px) + 6px) !important;
        right: 5px !important;
        bottom: auto !important;
        left: clamp(70px, 20vw, 86px) !important;
        z-index: 25 !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
        box-sizing: border-box;
    }

    body.village2 .village2 div.buildingList {
        top: calc(var(--travian-mobile-village-scene-top, var(--travian-mobile-scene-top, 152px)) + var(--travian-mobile-village-height, 534px) + 6px) !important;
    }

    body.village1 .village1 div.buildingList .boxes-contents,
    body.village2 .village2 div.buildingList .boxes-contents {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 5px 3px 5px 104px !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #3e3429;
        direction: rtl;
        font-size: 12px !important;
        line-height: 1.25 !important;
        background: rgba(249, 251, 244, 0.96) !important;
        border: 1px solid #a98f69;
        border-radius: 6px;
        box-shadow: 0 1px 7px rgba(0, 0, 0, 0.45);
        box-sizing: border-box;
    }

    body.village1 .village1 div.buildingList h5,
    body.village2 .village2 div.buildingList h5,
    body.village1 .village1 div.buildingList .clear,
    body.village2 .village2 div.buildingList .clear {
        display: none !important;
    }

    body.village1 .village1 div.buildingList .finishNow,
    body.village2 .village2 div.buildingList .finishNow {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        right: auto !important;
        float: none !important;
        width: 94px !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left;
    }

    body.village1 .village1 div.buildingList .finishNow button,
    body.village2 .village2 div.buildingList .finishNow button {
        display: block !important;
        width: 94px !important;
        max-width: 94px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 0 6px !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 10px !important;
        line-height: 24px !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    body.village1 .village1 div.buildingList .finishNow .button-container,
    body.village1 .village1 div.buildingList .finishNow .button-content,
    body.village2 .village2 div.buildingList .finishNow .button-container,
    body.village2 .village2 div.buildingList .finishNow .button-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    body.village1 .village1 div.buildingList ul,
    body.village2 .village2 div.buildingList ul {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 0 3px !important;
        list-style: none !important;
    }

    body.village1 .village1 div.buildingList ul:last-of-type,
    body.village2 .village2 div.buildingList ul:last-of-type {
        margin-bottom: 0 !important;
    }

    body.village1 .village1 div.buildingList li,
    body.village2 .village2 div.buildingList li {
        display: grid !important;
        grid-template-columns: 14px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 4px;
        min-height: 26px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-align: right;
        box-sizing: border-box;
    }

    body.village1 .village1 div.buildingList li > a,
    body.village2 .village2 div.buildingList li > a {
        grid-column: 1;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
        width: 14px !important;
        height: 16px !important;
        margin: 0 !important;
        overflow: hidden;
    }

    body.village1 .village1 div.buildingList img.del,
    body.village2 .village2 div.buildingList img.del {
        margin: 0 !important;
        transform: scale(0.82);
        transform-origin: center;
    }

    body.village1 .village1 div.buildingList .name,
    body.village2 .village2 div.buildingList .name {
        grid-column: 2;
        grid-row: 1;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 12px !important;
        font-weight: bold;
        line-height: 1.2 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.village1 .village1 div.buildingList .buildDuration,
    body.village2 .village2 div.buildingList .buildDuration {
        display: grid !important;
        grid-template-columns: auto minmax(12px, 1fr) auto;
        align-items: center;
        grid-column: 2;
        grid-row: 2;
        justify-self: stretch;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 1px 0 0 !important;
        overflow: hidden !important;
        color: #6b6b6b;
        font-size: 10px !important;
        line-height: 1.2 !important;
        direction: rtl;
        text-align: initial;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.village1 .village1 div.buildingList .buildDuration .durationValue,
    body.village1 .village1 div.buildingList .buildDuration .finishAt,
    body.village2 .village2 div.buildingList .buildDuration .durationValue,
    body.village2 .village2 div.buildingList .buildDuration .finishAt {
        display: inline-block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.village1 .village1 div.buildingList .buildDuration .durationValue,
    body.village2 .village2 div.buildingList .buildDuration .durationValue {
        grid-column: 1;
        justify-self: start;
    }

    body.village1 .village1 div.buildingList .buildDuration .finishAt,
    body.village2 .village2 div.buildingList .buildDuration .finishAt {
        grid-column: 3;
        justify-self: end;
    }

    body.map:not(.village1):not(.village2) #bodyWrapper,
    body.map:not(.village1):not(.village2) #center,
    body.map:not(.village1):not(.village2) #center #contentOuterContainer,
    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content {
        min-height: 0 !important;
    }

    body.map:not(.village1):not(.village2) {
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none;
        box-sizing: border-box;
    }

    body.map:not(.village1):not(.village2) #background {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body.map:not(.village1):not(.village2) #bodyWrapper {
        position: fixed !important;
        top: 79px !important;
        right: 0 !important;
        bottom: 84px !important;
        left: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.map:not(.village1):not(.village2) #center {
        height: 100% !important;
        overflow: hidden !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer {
        height: auto !important;
        margin-top: 0 !important;
        overflow: visible !important;
    }

    body.map:not(.village1):not(.village2):not(.login):not(.logout):not(.activate):not(.error_site) #center #contentOuterContainer {
        margin-top: 0 !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content {
        overflow: visible !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer {
        padding: 0 !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        background: transparent !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
    }

    body.map #content h1.titleInHeader {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        min-height: 44px !important;
        padding: 8px 16px 9px !important;
        margin: 0 !important;
        color: #46301d;
        font-size: 19px !important;
        line-height: 1.2 !important;
        letter-spacing: 0;
        background: linear-gradient(to left, #f7ebce, #e8cf9f) !important;
        border-top: 1px solid rgba(255, 249, 226, 0.78);
        border-bottom: 1px solid rgba(111, 76, 35, 0.38);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 -5px 10px rgba(114, 77, 34, 0.08);
    }

    body.map #content .map2,
    body.map div.map2 {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background-color: #d9c5a4;
        box-sizing: border-box;
    }

    body.map #mapContainer {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 543px !important;
        height: 401px !important;
        margin: 0 auto 12px !important;
        overflow: visible !important;
        transform: none !important;
        transform-origin: top center !important;
        overscroll-behavior: contain;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        zoom: var(--travian-mobile-map-scale, 0.6888);
    }

    /* The map engine creates this direct child as its drawing viewport.
       Clip it explicitly so panned block layers can never paint over the
       decorative frame, while the rulers remain outside the viewport. */
    body.map #mapContainer > div[style*="overflow"] {
        overflow: hidden !important;
        clip-path: inset(0);
    }

    /* The frame must remain above map tiles and symbols at every zoom level. */
    body.map #mapContainer .innerShadow {
        z-index: 2200 !important;
    }

    /* The legacy close control lives outside the map markup.  Once it is
       attached to .map2, give it a stable, clickable place in the frame. */
    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content .map2 > #closeContentButton.travian-map-close {
        position: absolute !important;
        top: 5px !important;
        left: 136px !important;
        right: auto !important;
        z-index: 2300 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        pointer-events: auto;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content .map2 > #closeContentButton.travian-map-close svg {
        width: 13px !important;
        height: 13px !important;
    }

    /*
     * The map engine measures image layers after the mobile zoom is applied.
     * Keep each rendered block layer covering its full block to avoid gaps.
     */
    body.map #mapContainer img.image,
    body.map #mapContainer img.imageMark {
        width: 100% !important;
        height: 100% !important;
    }


    body.build #content {
        font-size: 13px !important;
        line-height: 1.38 !important;
    }

    body.build #center,
    body.build #center #contentOuterContainer .contentContainer,
    body.build #center #contentOuterContainer #content {
        min-height: 0 !important;
    }

    body.build #center #contentOuterContainer .contentContainer {
        padding-bottom: 0 !important;
    }

    body.build:not(.village1):not(.village2) #center #contentOuterContainer #content {
        padding-bottom: 8px !important;
    }

    body.build #content .roundedCornersBox.big,
    body.build #content .roundedCornersBox {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px !important;
        margin: 8px 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    body.build #content .stickyImage {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        float: right !important;
        width: 92px !important;
        height: 82px !important;
        min-height: 0 !important;
        margin: 0 0 6px 8px !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.build #content .stickyImage a.build_logo,
    body.build #content .stickyImage img.build_logo.building.big {
        position: absolute !important;
        top: -14px !important;
        right: -18px !important;
        transform: scale(0.62) !important;
        transform-origin: top right !important;
    }

    body.build #content h4 {
        margin: 0 0 6px !important;
        color: #3b2a1b;
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    body.build #content p,
    body.build #content .description,
    body.build #content .buildingDescription,
    body.build #content .statusMessage,
    body.build #content span.none {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    body.build #content .inlineIconList.resourceWrapper,
    body.build #content .culturePointsAndPopulation .wrapper {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px 8px;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 6px 0 !important;
        box-sizing: border-box;
    }

    body.build #content .inlineIconList.resourceWrapper .inlineIcon,
    body.build #content .culturePointsAndPopulation .unit {
        float: none !important;
        width: auto !important;
        min-width: 58px;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    body.build #content .contractWrapper {
        margin: 8px 4px 0 !important;
        padding: 0 0 8px !important;
    }

    body.build #content .contractWrapper > .inlineIconList.resourceWrapper {
        flex-wrap: nowrap !important;
        gap: 0 4px !important;
        margin: 4px 0 0 !important;
        overflow: hidden !important;
    }

    body.build #content .contractWrapper > .inlineIconList.resourceWrapper .inlineIcon.resource {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    body.build #content .contractWrapper > .inlineIconList.resourceWrapper .inlineIcon.resource i {
        flex: 0 0 auto;
        margin: 0 1px !important;
    }

    body.build #content .contractWrapper > .inlineIconList.resourceWrapper .inlineIcon.resource .value {
        min-width: 0;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    body.build #content .culturePointsAndPopulation {
        margin: 0 4px !important;
        padding: 8px 0 !important;
    }

    body.build #content .culturePointsAndPopulation .wrapper {
        justify-content: center !important;
        gap: 4px 18px !important;
        margin: 0 auto !important;
    }

    body.build #content .culturePointsAndPopulation .unit {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    body.build #content .culturePointsAndPopulation .unit i {
        margin: 0 2px !important;
    }

    /* كل مجموعة تُقرأ بصرياً: الأيقونة ثم الرقم ثم (+الزيادة).
       نثبت الترتيب لأن flex في RTL كان يقلبه على الهاتف. */
    body.build #content .culturePointsAndPopulation .unit {
        direction: ltr !important;
        flex-direction: row !important;
    }

    body.build #content .culturePointsAndPopulation .unit > i {
        order: 1 !important;
        margin: 0 4px 0 0 !important;
    }

    body.build #content .culturePointsAndPopulation .unit > .value {
        order: 2 !important;
    }

    body.build #content .culturePointsAndPopulation .unit > .delta {
        order: 3 !important;
        margin: 0 0 0 4px !important;
        direction: ltr !important;
    }

    body.build #content .upgradeButtonsContainer button,
    body.build #content button.textButtonV1 {
        max-width: 100% !important;
        margin: 4px 0 !important;
        white-space: nowrap !important;
    }

    body.build #content .upgradeButtonsContainer {
        gap: 8px !important;
        padding: 8px 0 2px !important;
    }

    body.build #content .upgradeButtonsContainer .section1,
    body.build #content .upgradeButtonsContainer .section2 {
        min-width: 0 !important;
        box-sizing: border-box;
    }

    body.build #content .upgradeButtonsContainer.section2Enabled .section2 {
        padding-right: 2px !important;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding: 0 8px !important;
        line-height: 28px !important;
        overflow: hidden !important;
        font-size: 12px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel,
    body.build #content .upgradeButtonsContainer button.textButtonV1.gold {
        font-size: 11px !important;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel {
        width: min(174px, 100%) !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 6px !important;
        line-height: 30px !important;
        font-size: 10.5px !important;
    }

    body.build #content .upgradeButtonsContainer .trav47MaxLevelInstant {
        display: inline-grid !important;
        margin: 0 !important;
        direction: rtl !important;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1 .button-container,
    body.build #content .upgradeButtonsContainer button.textButtonV1 .button-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1 .button-background {
        pointer-events: none;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1 .buttonLabel {
        display: inline-block !important;
        flex: 0 1 auto !important;
        min-width: auto !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        line-height: 1 !important;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel .buttonLabel {
        overflow: visible !important;
        min-width: max-content !important;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1.gold .goldIcon {
        flex: 0 0 14px !important;
        width: 14px !important;
        height: 14px !important;
        margin: 0 4px !important;
        vertical-align: middle !important;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1.gold .goldValue {
        flex: 0 0 auto !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.build #content #descriptionAndInfo {
        position: relative !important;
        min-height: 104px !important;
        padding-left: 118px !important;
        margin-bottom: 10px !important;
    }

    body.build #content #descriptionAndInfo .build_desc {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    body.build #content #build .roundedCornersBox.big {
        position: relative !important;
        min-height: 0 !important;
        padding: 8px 8px 10px !important;
        margin: 0 0 10px !important;
        overflow: visible !important;
        max-width: 100% !important;
        border: 1px solid #9e8b6e;
        border-radius: 4px;
        background-color: rgba(249, 251, 244, 0.96);
    }

    body.build #content #build .roundedCornersBox.big.headlineOnly {
        padding-top: 8px !important;
        background-color: rgba(249, 251, 244, 0.96) !important;
    }

    body.build #content #build .roundedCornersBox.big .stickyImage {
        position: absolute !important;
        top: -114px !important;
        right: auto !important;
        left: 0 !important;
        float: none !important;
        width: 112px !important;
        max-width: none !important;
        height: 104px !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: none !important;
        transform: none !important;
    }

    body.build #content #build.gid1 .roundedCornersBox.big .stickyImage,
    body.build #content #build.gid2 .roundedCornersBox.big .stickyImage,
    body.build #content #build.gid3 .roundedCornersBox.big .stickyImage,
    body.build #content #build.gid4 .roundedCornersBox.big .stickyImage {
        background: none !important;
    }

    body.build #content #build .roundedCornersBox.big .stickyImage a.build_logo {
        position: absolute !important;
        top: -4px !important;
        right: auto !important;
        left: -8px !important;
        display: block !important;
        width: 184px !important;
        height: 179px !important;
        max-width: none !important;
        transform: none !important;
    }

    body.build #content #build .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        position: absolute !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        width: 184px !important;
        height: 179px !important;
        transform: scale(0.62) !important;
        transform-origin: top left !important;
    }

    body.build #content,
    body.build #build,
    body.build #build form,
    body.build #build table,
    body.build #build .buildActionOverview,
    body.build #build .roundedCornersBox,
    body.build #build .inlineIconList {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    body.build #content #build .roundedCornersBox.big h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 30px !important;
        padding: 0 10px !important;
        margin: 0 0 8px !important;
        box-sizing: border-box !important;
        color: #3d2b1b !important;
        font-size: 14px !important;
        font-family: Arial, Helvetica, Verdana, sans-serif !important;
        font-weight: bold !important;
        line-height: 18px !important;
        text-align: right !important;
        opacity: 1 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
        -webkit-text-fill-color: #3d2b1b !important;
        -webkit-text-stroke: 0 transparent !important;
    }

    body.build #content #build div.buildActionOverview {
        overflow: hidden !important;
        border: 1px solid #d6d6d6;
        background-color: #fff;
    }

    body.build #content #build div.action {
        display: flex !important;
        align-items: flex-start;
        gap: 8px;
        width: 100% !important;
        min-height: 0 !important;
        padding: 10px 6px !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    body.build #content #build div.bigUnitSection {
        float: none !important;
        flex: 0 0 96px;
        width: 96px !important;
        height: 96px !important;
        margin: 0 0 0 8px !important;
        overflow: hidden !important;
        border-color: #e4e4e4;
    }

    body.build #content #build div.bigUnitSection a.unitSection {
        width: 96px !important;
        height: 96px !important;
    }

    body.build #content #build div.bigUnitSection img.unitSection {
        transform: scale(0.69);
        transform-origin: top right;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u1Section {
        background-image: url('../../images/army/romans/u1.png?v=2a9efa3f5e') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u2Section {
        background-image: url('../../images/army/romans/u2.png?v=27ce980741') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u3Section {
        background-image: url('../../images/army/romans/u3.png?v=011d2c6234') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u11Section {
        background-image: url('../../images/army/teutons/u11.png?v=a2aaa6cc75') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u12Section {
        background-image: url('../../images/army/teutons/u12.png?v=ab16749fe5') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u13Section {
        background-image: url('../../images/army/teutons/u13.png?v=a2b283e37a') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u14Section {
        background-image: url('../../images/army/teutons/u14.png?v=2fba52dc24') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u21Section {
        background-image: url("../../images/army/greeks/u21.png?v=0a027e7e18") !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u22Section {
        background-image: url("../../images/army/greeks/u22.png?v=4327d21fd8") !important;
    }

    body.build #content #build:is(.gid19, .gid20) div.bigUnitSection img.u23Section {
        background-image: url("../../images/army/greeks/u23.png?v=86961eb9b1") !important;
    }

    body.build #content #build.gid20 div.bigUnitSection img.u24Section {
        background-image: url("../../images/army/greeks/u24.png?v=1f1c637992") !important;
    }

    body.build #content #build.gid20 div.bigUnitSection img.u25Section {
        background-image: url("../../images/army/greeks/u25.png?v=03f2fbe23e") !important;
    }

    body.build #content #build.gid20 div.bigUnitSection img.u26Section {
        background-image: url("../../images/army/greeks/u26.png?v=e5439cd987") !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u51Section {
        background-image: url('../../images/army/egyptians/u51.png?v=73059a515f') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u52Section {
        background-image: url('../../images/army/egyptians/u52.png?v=9b0e01d40d') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u53Section {
        background-image: url('../../images/army/egyptians/u53.png?v=59f249764b') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u61Section {
        background-image: url('../../images/army/mongols/u61.png?v=428f53b7a9') !important;
    }

    body.build #content #build.gid19 div.bigUnitSection img.u62Section {
        background-image: url('../../images/army/mongols/u62.png?v=37f9022d4a') !important;
    }

    body.build #content #build div.bigUnitSection a.zoom {
        display: none !important;
    }

    body.build #content #build div.action div.details {
        float: none !important;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.build #content #build div.action div.details div.tit {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.build #content #build div.action div.details div.tit span.furtherInfo {
        display: inline;
        font-size: 11px !important;
    }

    body.build #content #build div.action div.details .resourceWrapper {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-top: 6px !important;
    }

    body.build #content #build div.action div.details .resourceWrapper .resource {
        margin: 0 !important;
        min-width: 44px;
        font-size: 11px !important;
    }

    body.build #content #build div.action div.details .cta {
        margin-top: 6px !important;
    }

    body.build #content #build div.action div.details input.text {
        width: 44px !important;
        height: 24px !important;
        font-size: 12px !important;
        box-sizing: border-box;
    }

    body.build #content #build button.startTraining,
    body.build #content #build button.startBuild {
        display: block !important;
        margin: 10px 0 0 !important;
    }

    body.build #content #build button.startTraining {
        margin: 10px auto 0 !important;
    }

    body.build #content #build button.finishTrainingGold {
        display: block !important;
        margin: 10px auto 0 !important;
        text-align: center !important;
    }

    body.build #content #build button.finishTrainingGold .button-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Retired phone-sidebar implementation. The replacement lives in
       travian-phone-side-panels.css; keep this block out of the cascade. */
    @media not all {
    body #center .sidebar {
        position: fixed !important;
        top: 79px !important;
        bottom: 78px !important;
        width: min(78vw, 280px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        padding: 7px 6px 8px !important;
        margin: 0 !important;
        z-index: 1180 !important;
        pointer-events: auto !important;
        border-left: 0 !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        box-sizing: border-box;
        transition: transform 120ms ease-out !important;
        transition-duration: 120ms !important;
        transition-timing-function: ease-out !important;
    }

    body #center .sidebar .sidebarBoxWrapper {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100%;
        transform: none !important;
        transform-origin: top right !important;
    }

    /* The permanent mobile header already provides the quick links. */
    body #center #sidebarBoxActiveVillage > .header {
        display: none !important;
    }

    /* Compact account card: account name, then village name/edit and loyalty. */
    body #center #sidebarBoxActiveVillage {
        margin-top: 12px !important;
        margin-bottom: 4px !important;
    }

    body #center #sidebarBoxActiveVillage > .content {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px 8px;
        margin: 0 !important;
        padding: 17px 29px 10px !important;
        position: relative;
        direction: rtl;
    }

    body #center #sidebarBoxActiveVillage > .content .playerNameRow {
        display: flex;
        position: absolute;
        top: -10px;
        right: 50%;
        width: auto;
        min-width: 0;
        justify-content: flex-start;
        transform: translateX(50%);
        z-index: 2;
    }

    body #center #sidebarBoxActiveVillage > .content .playerName {
        display: inline-flex;
        flex: 0 1 auto;
        align-items: center;
        gap: 5px;
        width: fit-content;
        max-width: 100%;
        margin: 0;
        padding: 4px 12px;
        box-sizing: border-box;
        border: 1px solid rgba(244, 224, 173, 0.9);
        border-radius: 2px;
        color: #fff7df;
        background: linear-gradient(135deg, #5d7a42 0%, #334e31 54%, #213525 100%);
        box-shadow: 0 2px 5px rgba(35, 22, 14, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        font-size: 11px;
        font-weight: bold;
        line-height: 16px;
        text-align: right;
        direction: rtl;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body #center #sidebarBoxActiveVillage > .content .tribeBadgeIcon {
        flex: 0 0 17px;
        width: 17px;
        height: 17px;
        object-fit: contain;
    }

    body #center #sidebarBoxActiveVillage > .content .playerNameText {
        min-width: 0;
        max-width: calc(100% - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body #center #sidebarBoxActiveVillage > .content .villageNameRow {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        gap: 4px;
        direction: rtl;
        justify-content: flex-start;
    }

    body #center #sidebarBoxActiveVillage > .content .villageNameRow #villageNameField {
        order: 1 !important;
        flex: 1 1 auto;
        max-width: none;
        font-size: 16px !important;
        text-align: right;
        direction: rtl;
    }

    body #center #sidebarBoxActiveVillage > .content .villageNameRow .layoutButton {
        order: 2 !important;
        flex: 0 0 auto;
    }

    body #center #sidebarBoxActiveVillage > .content .villageNameRow .layoutButton svg.edit {
        width: 10px !important;
        height: 13px !important;
    }

    body #center #sidebarBoxActiveVillage > .content .loyalty {
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
        font-size: 11px;
        line-height: 24px;
        text-align: left;
        direction: rtl;
    }

    /* Make both cards fit cleanly inside the narrower mobile drawer. */
    body #center .sidebar .sidebarBox {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body #center #sidebarBoxVillagelist {
        margin-top: 4px !important;
    }

    /* The original nine-slice frame leaves transparent seams at narrow widths. */
    body #center #sidebarAfterContent .sidebarBox > .content:before {
        display: none !important;
    }

    body #center #sidebarAfterContent .sidebarBox > .content {
        border: 2px solid #745239;
        border-radius: 4px;
        background: radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.68), transparent 35%), linear-gradient(135deg, #fff6e2 0%, #efd3a6 53%, #d8b27c 100%) !important;
        box-shadow: inset 0 0 0 2px rgba(255, 250, 232, 0.7), 0 1px 2px rgba(37, 24, 15, 0.3);
    }

    body #center #sidebarBoxVillagelist .content ul li a {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 68px !important;
        grid-template-rows: 30px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    body #center #sidebarBoxVillagelist.villageOrderMode .content ul li {
        margin: 3px 0 !important;
        border-radius: 5px !important;
    }

    body #center #sidebarBoxVillagelist.villageOrderMode .content ul li:before {
        top: 50% !important;
        right: 7px !important;
    }

    body #center #sidebarBoxVillagelist.villageOrderMode .content ul li a {
        grid-template-rows: 38px !important;
        height: 38px !important;
        padding-right: 24px !important;
        touch-action: auto !important;
    }

    body #center #sidebarBoxVillagelist .content ul li a .iconAndNameWrapper {
        display: grid !important;
        grid-template-columns: 15px minmax(0, 1fr) !important;
        align-items: center !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    body #center #sidebarBoxVillagelist .content ul li a .iconAndNameWrapper .name {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 30px !important;
        direction: rtl !important;
    }

    body #center #sidebarBoxVillagelist.villageOrderMode .content ul li a .iconAndNameWrapper .name {
        line-height: 38px !important;
    }

    body #center #sidebarBoxVillagelist .content ul li a .coordinatesGrid {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 68px !important;
        height: 100% !important;
        min-width: 0 !important;
        padding: 0 3px !important;
        box-sizing: border-box;
    }

    body #center #sidebarBoxVillagelist.villageOrderMode .content ul li a .coordinatesGrid {
        height: 38px !important;
    }

    body #center #sidebarBoxVillagelist .content ul li a .coordinatesGrid .coordinatesAligned {
        width: 62px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    body #center #sidebarBoxVillagelist .content ul li a .coordinatesGrid .coordinateX,
    body #center #sidebarBoxVillagelist .content ul li a .coordinatesGrid .coordinateY {
        width: 28px !important;
    }

    body #center #sidebarBoxVillagelist .content ul li a .coordinatesGrid .coordinatePipe {
        width: 6px !important;
    }

    body #center #sidebarBeforeContent {
        display: none !important;
    }

    body #center #sidebarAfterContent {
        right: 0 !important;
        left: auto !important;
        transform: translateX(105%) !important;
    }

    body.travian-mobile-sidebar-open #center #sidebarAfterContent {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    body .travian-mobile-overlay {
        position: fixed;
        inset: 79px 0 76px;
        z-index: 1170;
        display: none;
        background: rgba(0, 0, 0, 0.14);
    }

    body.travian-mobile-sidebar-open .travian-mobile-overlay,
    body.travian-mobile-options-open .travian-mobile-overlay {
        display: block;
    }

    body.travian-mobile-options-open .travian-mobile-overlay {
        z-index: 1140;
        background: rgba(0, 0, 0, 0.12);
    }
    }

    body.map:not(.village1):not(.village2) #content h1.titleInHeader {
        position: absolute !important;
        top: 28px !important;
        right: 45px !important;
        left: 128px !important;
        z-index: 45;
        display: block !important;
        width: auto !important;
        height: 30px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #f2f2f2 !important;
        direction: rtl;
        font-family: "Noto Serif", Arial, Helvetica, Verdana, sans-serif !important;
        font-size: 19px !important;
        font-weight: bold;
        line-height: 30px !important;
        text-align: right;
        letter-spacing: 0;
        white-space: nowrap !important;
        text-overflow: ellipsis;
        text-shadow: 1px 0 0 #b68363, 1px 1px 0 #b68363, 0 1px 0 #b68363, -1px 1px 0 #5e463a, -1px 0 0 #5e463a, -1px -1px 0 #5e463a, 0 -1px 0 #5e463a, 1px -1px 0 #5e463a !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-text-fill-color: #f2f2f2 !important;
        -webkit-text-stroke: 0 transparent !important;
        pointer-events: none;
        box-sizing: border-box;
    }

    body.build:not(.village1):not(.village2) #content h1.titleInHeader {
        display: none !important;
    }

    body.hero:not(.village1):not(.village2) #content > h1.titleInHeader,
    body.hero_inventory:not(.village1):not(.village2) #content > h1.titleInHeader,
    body.hero_adventure:not(.village1):not(.village2) #content > h1.titleInHeader {
        display: none !important;
    }

    body.build:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle {
        position: relative !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.build:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle .travian-mobile-build-title {
        position: absolute !important;
        top: 28px !important;
        right: 45px !important;
        left: 128px !important;
        z-index: 45;
        display: block !important;
        height: 30px !important;
        overflow: hidden !important;
        color: #f2f2f2 !important;
        direction: rtl;
        font-family: "Noto Serif", Arial, Helvetica, Verdana, sans-serif !important;
        font-size: 19px !important;
        font-weight: bold;
        line-height: 30px !important;
        text-align: right;
        letter-spacing: 0;
        white-space: nowrap !important;
        text-overflow: ellipsis;
        text-shadow: 1px 0 0 #b68363, 1px 1px 0 #b68363, 0 1px 0 #b68363, -1px 1px 0 #5e463a, -1px 0 0 #5e463a, -1px -1px 0 #5e463a, 0 -1px 0 #5e463a, 1px -1px 0 #5e463a !important;
        -webkit-text-fill-color: #f2f2f2 !important;
        -webkit-text-stroke: 0 transparent !important;
        pointer-events: none;
        box-sizing: border-box;
    }

    body.build:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle .travian-mobile-build-title .level {
        color: #ff9b23 !important;
        text-shadow: 1px 0 0 #5e463a, 0 1px 0 #5e463a, -1px 0 0 #5e463a, 0 -1px 0 #5e463a !important;
        -webkit-text-fill-color: #ff9b23 !important;
    }

    /* Building tabs sit directly against the native header on mobile. */
    body.build:not(.village1):not(.village2) #center #contentOuterContainer #content {
        padding-top: 0 !important;
    }

    body.build:not(.village1):not(.village2) #center #contentOuterContainer #content > .contentNavi {
        margin-top: 0 !important;
    }

    /* The rally point nests its tabs inside #build instead of #content. */
    body.build:not(.village1):not(.village2) #center #contentOuterContainer #content #build.gid16 > .contentNavi {
        width: calc(100% + 16px) !important;
        max-width: none !important;
        margin-right: -8px !important;
        margin-left: -8px !important;
    }

    /* نقطة التجمع: لا تترك شريط التبويبات مساحة بيضاء قبل الوصف. */
    body.build #content #build.gid16 > .contentNavi {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }


    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle {
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 6px 6px 0 0 !important;
        box-shadow: 0 0 8px rgba(179, 146, 83, 0.58) inset !important;
        box-sizing: border-box;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle {
        height: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle .contentTitleButton {
        width: 22px !important;
        height: 22px !important;
        top: 26px !important;
        left: 52px !important;
        right: auto !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.45) !important;
        background-image: linear-gradient(to bottom, #6f8f34, #425b25) !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle #closeContentButton:before {
        border-color: #8fb55c #415c25 #314719 !important;
        box-shadow: none !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle #closeContentButton:after {
        width: 12px !important;
        height: 12px !important;
        top: 5px !important;
        right: 5px !important;
        background-size: 12px 12px !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentTitle .contentTitleButton svg {
        width: 12px !important;
        height: 12px !important;
    }

    body.map:not(.village1):not(.village2) #content h1.titleInHeader {
        top: 25px !important;
        right: 62px !important;
        left: 84px !important;
        height: 22px !important;
        font-size: 15px !important;
        line-height: 22px !important;
    }

    /* The alliance page now owns one authoritative phone skin.  The former
       sprite-era header and capsule-tab patch was removed so it cannot flash
       before the new frame is painted. */

    body.map:not(.village1):not(.village2) #content .map2,
    body.map:not(.village1):not(.village2) div.map2 {
        width: min(calc((543px + 27px) * var(--travian-mobile-map-scale, 0.6888)), calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc((401px + 32px) * var(--travian-mobile-map-scale, 0.6888)) !important;
        padding-right: calc(27px * var(--travian-mobile-map-scale, 0.6888)) !important;
        padding-bottom: calc(32px * var(--travian-mobile-map-scale, 0.6888)) !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        border: 0 !important;
        background: #f8f0dc !important;
        box-shadow: none !important;
        direction: ltr;
        box-sizing: border-box;
    }

    body.map #mapContainer {
        direction: rtl;
        margin: 0 !important;
        overflow: visible !important;
    }

    body.map #mapContainer:before {
        right: -30px !important;
        width: calc(100% + 30px) !important;
        height: calc(100% + 32px) !important;
        pointer-events: none;
    }

    body.map #mapContainer .innerShadow {
        z-index: 1500;
        pointer-events: none;
    }

    body.map #mapContainer #toolbar.toolbar {
        top: 0 !important;
        right: 0 !important;
        left: calc(132px * var(--travian-mobile-map-inverse-scale, 1)) !important;
        transform: none !important;
        transform-origin: top right !important;
        max-width: none;
    }

    body.map #mapContainer #toolbar .contents {
        display: flex !important;
        align-items: center;
        height: 32px !important;
        min-height: 32px !important;
        padding: 5px 8px !important;
        gap: 6px;
        overflow: visible !important;
        justify-content: flex-end;
        box-sizing: border-box;
        direction: rtl;
    }

    body.map #mapContainer #toolbar .contents > * {
        float: none !important;
        flex: 0 0 auto;
        top: auto !important;
        margin: 0 !important;
        zoom: var(--travian-mobile-map-inverse-scale, 1);
    }

    body.map #mapContainer #toolbar .clear,
    body.map #mapContainer #minimapContainer .headline .clear {
        display: none !important;
    }

    body.map #mapContainer #toolbar .iconButton {
        margin: 0 !important;
    }

    body.map #mapContainer #toolbar .dropdown {
        display: flex !important;
        align-items: center;
        position: relative;
        z-index: 2001;
        width: 54px !important;
        height: 22px !important;
        padding: 2px 5px !important;
        font-size: 12px !important;
        line-height: 18px !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    body.map #mapContainer #toolbar .dropdown .dataContainer {
        float: none !important;
        width: 36px !important;
        height: 18px;
        overflow: hidden;
    }

    body.map #mapContainer #toolbar .dropdown .dataContainer .entry {
        height: 18px !important;
        line-height: 18px !important;
        text-align: center;
        font-weight: bold;
    }

    body.map #mapContainer #toolbar .dropdown .dataContainer.opened {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: auto;
        z-index: 2002;
        display: block !important;
        width: 58px !important;
        height: auto !important;
        min-height: 48px;
        padding: 3px 0;
        overflow: visible !important;
        border: 1px solid rgba(37, 72, 25, 0.95);
        border-radius: 3px;
        color: #f8ffe8;
        background: rgba(31, 62, 23, 0.96);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
        box-sizing: border-box;
    }

    body.map #mapContainer #toolbar .dropdown .dataContainer.opened .entry {
        display: block;
        height: 22px !important;
        line-height: 22px !important;
        padding: 0 4px;
        color: #f8ffe8;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
        box-sizing: border-box;
    }

    body.map #mapContainer #toolbar .dropdown .dataContainer.opened .entry.selected {
        background-color: #61ae56;
    }

    body.map #mapContainer #toolbar .dropdown .dropDownImage {
        float: none !important;
        margin: 0 !important;
    }

    body.map #mapContainer #toolbar .iconButton.viewFull,
    body.map #mapContainer #toolbar .iconButton.viewNormal {
        display: none !important;
    }

    body.map #mapContainer #toolbar .iconButton.iconRequireGold {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 28px !important;
        height: 22px !important;
        padding: 0 !important;
    }

    body.map #mapContainer #toolbar .iconButton.iconRequireGold .iconButton {
        margin: 0 !important;
    }

    body.map #mapContainer #toolbar .text {
        min-height: 20px;
        color: #f8f0d6;
        font-size: 11px !important;
        line-height: 20px !important;
        white-space: nowrap;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
    }

    body.map #mapContainer #minimapContainer .headline {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 118px;
        height: 22px !important;
        margin: 0 6px !important;
        max-width: calc(100% - 12px);
        overflow: visible !important;
        direction: ltr;
    }

    body.map #mapContainer #minimapContainer .headline .title {
        float: none !important;
        min-width: 0;
        color: #f8f0d6;
        font-size: 12px !important;
        line-height: 22px !important;
        direction: rtl;
        white-space: nowrap;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
    }

    body.map #mapContainer #minimapContainer .headline .iconButton {
        float: none !important;
        flex: 0 0 auto;
        width: 7px !important;
        height: 7px !important;
        margin: 0 !important;
        background-size: auto !important;
        transform: scale(1.35);
        transform-origin: center;
    }

    body.map #mapContainer #minimapContainer {
        width: 193px !important;
        /* The map script measures this natural height before it animates
           between the collapsed header and the expanded mini-map. */
        height: auto;
        zoom: var(--travian-mobile-map-inverse-scale, 1);
    }

    body.map #mapContainer #miniMap {
        width: 185px !important;
        height: 109px !important;
        margin: 0 5px 5px !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    body.map #mapContainer #miniMap .map {
        width: 185px !important;
        height: 109px !important;
        max-width: none !important;
        max-height: none !important;
    }

   body.map #mapContainer #mapCoordEnter.toolbar {
        width: 175px !important;
        max-width: calc(100% - 8px);
        height: 25px !important;
        min-height: 25px !important;
        left: 0 !important;
        bottom: 0 !important;
        transform: none !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .ml,
    body.map #mapContainer #mapCoordEnter.toolbar .mr,
    body.map #mapContainer #mapCoordEnter.toolbar .mc {
        height: 25px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .mc {
        background-color: rgba(41, 32, 18, 0.92) !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .contents {
        display: flex !important;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        width: 157px !important;
        height: 25px !important;
        padding: 2px 4px !important;
        box-sizing: border-box;
        direction: ltr;
        overflow: visible !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .coordinatesInput {
        float: none !important;
        display: flex !important;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        min-width: 0;
        gap: 6px;
        margin: 0 !important;
        line-height: 18px !important;
        direction: rtl;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .coordinatesInput > div {
        float: none !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        margin: 0 !important;
        height: 18px !important;
        line-height: 18px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .coordinatesInput label {
        margin: 0 !important;
        color: #f8f0d6;
        font-size: 10px !important;
        font-weight: bold !important;
        line-height: 18px !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
    }

    body.map #mapContainer #mapCoordEnter.toolbar .coordinatesInput input {
        width: 39px !important;
        height: 18px !important;
        min-height: 18px !important;
        padding: 0 2px !important;
        margin: 0 !important;
        top: auto !important;
        color: #24190f !important;
        background-color: #fff7e6 !important;
        border: 1px solid #4d3520 !important;
        font-size: 10px !important;
        font-weight: bold !important;
        line-height: 18px !important;
        text-align: center !important;
        direction: ltr;
        box-sizing: border-box;
    }

    body.map #mapContainer #mapCoordEnter.toolbar button {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 36px !important;
        height: 19px !important;
        min-height: 19px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    body.map #mapContainer #mapCoordEnter.toolbar button .button-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    body.map #mapContainer #mapCoordEnter.toolbar button .button-content {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 100% !important;
        font-size: 9px !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .clear {
        display: none !important;
    }

    body.map #mapContainer .ruler {
        color: #24190f !important;
        font-size: 10px !important;
        font-weight: bold !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 2px #fff !important;
    }

    body.map #mapContainer.lowRes .ruler.x {
        height: 32px !important;
        background-color: #f8f0dc !important;
    }

    body.map #mapContainer.lowRes .ruler.x .rulerContainer {
        height: 32px !important;
        background-size: auto 32px !important;
    }

    body.map #mapContainer.lowRes .ruler.x .coordinate {
        height: 32px !important;
        line-height: 30px !important;
    }

    body.map #mapContainer.lowRes .ruler.y {
        right: -27px !important;
        width: 27px !important;
        margin: 0 !important;
        border-left: 0 !important;
        background-color: #fff7e6 !important;
    }

    body.map #mapContainer.lowRes .ruler.y .rulerContainer {
        right: 0 !important;
        width: 27px !important;
        margin: 0 !important;
    }

    body.map #mapContainer.lowRes .ruler.y .coordinate,
    body.map #mapContainer.lowRes .ruler.y .coordinate.zoom1,
    body.map #mapContainer.lowRes .ruler.y .coordinate.zoom2,
    body.map #mapContainer.lowRes .ruler.y .coordinate.zoom3,
    body.map #mapContainer.lowRes .ruler.y .coordinate.zoom4 {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 27px !important;
        padding-top: 0 !important;
        line-height: 1.1 !important;
    }

    body.map .travian-mobile-map-dialog-wrapper {
        overflow: hidden !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    body.map .travian-mobile-map-dialog {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }

    body.map .travian-mobile-map-dialog .dialog-container,
    body.map .travian-mobile-map-dialog .dialogContainer {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    body.map .travian-mobile-map-dialog .dialog-contents,
    body.map .travian-mobile-map-dialog .dialogContents,
    body.map .travian-mobile-map-dialog form,
    body.map .travian-mobile-map-dialog .dialog-contents > form > .content,
    body.map .travian-mobile-map-dialog .dialogContents > form > .content,
    body.map .travian-mobile-map-dialog #dialogContent {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    body.map .travian-mobile-map-dialog .dialog-background-tl,
    body.map .travian-mobile-map-dialog .dialog-background-tc,
    body.map .travian-mobile-map-dialog .dialog-background-tr,
    body.map .travian-mobile-map-dialog .dialog-background-ml,
    body.map .travian-mobile-map-dialog .dialog-background-mc,
    body.map .travian-mobile-map-dialog .dialog-background-mr,
    body.map .travian-mobile-map-dialog .dialog-background-bl,
    body.map .travian-mobile-map-dialog .dialog-background-bc,
    body.map .travian-mobile-map-dialog .dialog-background-br,
    body.map .travian-mobile-map-dialog .dialogDragBar,
    body.map .travian-mobile-map-dialog .dialog-dragbar,
    body.map .travian-mobile-map-dialog .title,
    body.map .travian-mobile-map-dialog .dialog-contents > form > .buttons,
    body.map .travian-mobile-map-dialog .dialogContents > form > .buttons {
        display: none !important;
    }

    body.map .travian-mobile-map-dialog .cancel:not(.travian-mobile-map-close),
    body.map .travian-mobile-map-dialog .dialogCancelButton.cancel {
        display: none !important;
    }

    body.map .travian-mobile-map-dialog .cancel,
    body.map .travian-mobile-map-dialog .dialogCancelButton.cancel {
        z-index: 30 !important;
        top: 3px !important;
        left: 3px !important;
    }


    body.map .travian-map-action-dock {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: min(calc((543px + 27px) * var(--travian-mobile-map-scale, 0.6888)), calc(100vw - 16px)) !important;
        min-height: 0;
        height: var(--travian-mobile-action-dock-height, 178px) !important;
        max-height: var(--travian-mobile-action-dock-height, 178px);
        padding: 0 !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #352515;
        background: #ead9b8 !important;
        box-shadow: none !important;
        direction: rtl;
        transform: none !important;
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock:before,
    body.map .travian-map-action-dock:after {
        content: none !important;
        display: none !important;
    }

    body.map .travian-map-action-dock[hidden] {
        display: none !important;
    }

    body.map .travian-map-action-dock .travian-map-action-content {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        height: 100%;
        padding: 6px 6px 8px !important;
        overflow-x: hidden;
        overflow-y: auto;
        background: #ead9b8 !important;
        border: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-action-view,
    body.map .travian-map-action-dock .travian-map-action-form {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-height: 100%;
        margin: 0;
        overflow: hidden !important;
        font-size: 11px;
        line-height: 1.2;
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-action-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 22px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(125, 94, 55, 0.24);
        color: #3c2a18;
        font-size: 11px;
        line-height: 1.15;
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-action-head strong {
        flex: 0 0 auto;
        color: #496d1e;
        font-size: 12px;
        white-space: nowrap;
    }

    body.map .travian-map-action-dock .travian-map-action-head span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: rtl;
    }


    body.map .travian-map-action-dock .travian-map-unit {
        display: grid;
        grid-template-columns: 20px minmax(44px, 1fr);
        grid-template-rows: 20px 15px;
        align-items: center;
        gap: 1px 3px;
        min-width: 0;
        height: 40px;
        padding: 2px 3px;
        border: 1px solid rgba(128, 99, 61, 0.28);
        border-radius: 3px;
        background: rgba(255, 248, 226, 0.55);
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-unit.is-empty {
        opacity: 0.58;
    }

    body.map .travian-map-action-dock .travian-map-unit img.unit {
        grid-column: 1;
        grid-row: 1;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        max-width: 18px;
        max-height: 18px;
        background-repeat: no-repeat;
    }

    body.map .travian-map-action-dock .travian-map-unit input.text {
        grid-column: 2;
        grid-row: 1;
        width: 100% !important;
        height: 20px !important;
        min-width: 44px;
        padding: 1px 2px !important;
        border: 1px solid #b7a483;
        border-radius: 2px;
        background: #f7f2e4;
        color: #2e2115;
        font-size: 11px !important;
        line-height: 18px;
        text-align: center;
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-unit-max {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        height: 15px;
        padding: 0 2px;
        border: 1px solid rgba(104, 137, 47, 0.35);
        border-radius: 3px;
        color: #315317;
        background: rgba(202, 220, 174, 0.65);
        font-size: 9px;
        font-weight: bold;
        line-height: 14px;
        text-align: center;
        direction: ltr;
        white-space: nowrap;
        cursor: pointer;
    }

    body.map .travian-map-action-dock .travian-map-unit-max.is-zero {
        color: #81765f;
        background: transparent;
        border-color: transparent;
        cursor: default;
    }

    body.map .travian-map-action-dock .travian-map-action-options {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px 9px;
        min-height: 0;
        color: #3b2a18;
        font-size: 10px;
    }

    body.map .travian-map-action-dock .travian-map-action-options label {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin: 0;
        white-space: nowrap;
    }

    body.map .travian-map-action-dock .travian-map-action-options label.is-disabled {
        opacity: 0.48;
    }

    body.map .travian-map-action-dock .travian-map-action-options select.dropdown {
        max-width: 140px;
        height: 21px;
        font-size: 10px;
    }




    body.map .travian-map-action-dock .travian-map-action-buttons {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: auto;
    }

    body.map .travian-map-action-dock .travian-map-action-submit,
    body.map .travian-map-action-dock .travian-map-action-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 0;
        height: 24px;
        padding: 2px 2px;
        border: 1px solid #6f8c31;
        border-radius: 3px;
        color: #fffbea;
        background:
            linear-gradient(to bottom, #93b746 0%, #5f8428 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 225, 0.36);
        font-size: 10px;
        font-weight: bold;
        line-height: 1;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(45, 68, 21, 0.68);
        cursor: pointer;
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-action-link {
        border-color: #a58a5d;
        color: #3f6f1f;
        background:
            linear-gradient(to bottom, #fff6dc 0%, #d5bd8d 100%);
        text-shadow: 0 1px 0 rgba(255, 255, 235, 0.72);
    }

    body.map .travian-map-action-dock .travian-map-action-error,
    body.map .travian-map-action-dock .travian-map-action-message {
        margin: 0;
        color: #9b2f20;
        font-size: 10px;
        font-weight: bold;
        text-align: center;
    }

    body.map .travian-map-action-dock .travian-map-action-message {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 96px;
        color: #4a3421;
    }

    body.map .travian-map-action-dock .travian-map-report-list {
        width: 100%;
        color: #3b2a18;
        font-size: 10px;
        line-height: 1.2;
        background: transparent;
    }

    body.map .travian-map-action-dock .travian-map-report-list td {
        padding: 3px 2px !important;
        border-bottom: 1px solid rgba(125, 94, 55, 0.16);
        background: transparent !important;
        white-space: nowrap;
    }

    body.map .travian-map-action-dock .travian-map-report-icon {
        width: 22px;
        text-align: center;
    }

    body.map .travian-map-action-dock .travian-map-action-reports {
        min-height: 216px !important;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-action-head {
        min-height: 26px;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-action-head .travian-map-action-close {
        position: absolute;
        top: 50%;
        left: 0;
        min-width: 42px;
        height: 22px;
        padding: 2px 6px;
        transform: translateY(-50%);
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-report-list {
        display: block !important;
        flex: 1 1 auto;
        min-height: 170px;
        padding: 2px 0;
        border: 1px solid rgba(143, 118, 85, 0.28);
        border-radius: 4px;
        background: rgba(255, 248, 226, 0.55);
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-report-list tbody {
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        width: 100%;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-report-list tr {
        position: relative;
        display: grid !important;
        grid-template-columns: 24px max-content;
        justify-content: center;
        align-items: center;
        column-gap: 3px;
        min-height: 32px;
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-report-list tr:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 15%;
        bottom: 0;
        width: 70%;
        height: 1px;
        background: rgba(125, 94, 55, 0.16);
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-report-list td {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0;
        height: 32px;
        padding: 0 !important;
        border-bottom: 0;
        box-sizing: border-box;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-report-icon {
        width: 24px;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-report-icon img {
        display: block;
        margin: 0 auto;
        transform: scale(1.1);
        transform-origin: center center;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-report-list a {
        display: block;
        width: auto;
        overflow: hidden;
        color: #3f6f1f;
        font-size: 12px;
        font-weight: bold;
        line-height: 32px;
        text-align: center;
        text-overflow: ellipsis;
        text-decoration: none;
        white-space: nowrap;
    }

    body.map .travian-map-action-dock .travian-map-action-reports .travian-map-action-empty {
        flex: 1 1 auto;
        min-height: 170px;
    }

    body.map .travian-map-action-dock .travian-map-action-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 96px;
        color: #3b2a18;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
    }
















    body.map .travian-map-action-dock .travian-map-target-name {
        display: inline-block;
        min-width: 0;
    }

    body.map .travian-map-action-dock .travian-map-target-coords {
        display: inline-block;
        flex: 0 0 auto;
        direction: ltr;
        unicode-bidi: isolate;
        white-space: nowrap;
    }

    body.map .travian-map-action-dock .travian-map-farm-form {
        gap: 5px;
        min-height: 0;
        overflow: visible !important;
    }

    body.map .travian-map-action-dock .travian-map-farm-list-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        color: #3b2a18;
        font-size: 10px;
        font-weight: bold;
        line-height: 20px;
        white-space: nowrap;
    }

    body.map .travian-map-action-dock .travian-map-farm-list-row select {
        width: min(176px, 62%);
        height: 22px;
        min-width: 0;
        font-size: 10px;
    }

    body.map .travian-map-action-dock .travian-map-farm-list-row.has-source-note {
        flex-wrap: wrap;
    }

    body.map .travian-map-action-dock .travian-map-farm-source-note {
        flex: 0 0 100%;
        color: #6b654f;
        font-size: 10px;
        font-weight: 400;
        line-height: 14px;
        text-align: center;
        white-space: nowrap;
    }

    body.map .travian-map-action-dock .travian-map-farm-units {
        grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
        gap: 4px;
        justify-content: center;
    }

    body.map .travian-map-action-dock .travian-map-farm-units .travian-map-unit {
        grid-template-columns: 20px minmax(44px, 1fr);
        height: 40px;
    }








    body.map .travian-map-action-dock .travian-map-action-error:empty {
        display: none;
    }





    body.map .travian-map-action-dock .travian-arrival-clock {
        display: inline-block;
        min-width: 48px;
        direction: ltr;
        unicode-bidi: isolate;
        text-align: left;
        white-space: nowrap;
    }








    body.travianMobile .tip,
    body.travianMobile .tip-wrap,
    body.travianMobile [role="tooltip"],
    body.travianMobile .tooltip {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media screen and (max-width: 1024px) {
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) #descriptionAndInfo {
        min-height: 78px !important;
        padding-left: 96px !important;
        margin-bottom: 4px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) #descriptionAndInfo .build_desc {
        padding-top: 2px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage {
        top: -84px !important;
        left: 0 !important;
        width: 92px !important;
        height: 78px !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage a.build_logo {
        top: -6px !important;
        left: -6px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(0.52) !important;
        transform-origin: top left !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly {
        padding: 0 !important;
        margin: 38px 0 5px !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly > h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        max-width: calc(100% - 12px) !important;
        min-height: 0 !important;
        padding: 3px 9px !important;
        margin: 0 auto !important;
        border: 1px solid #a1bc79 !important;
        border-radius: 4px !important;
        background-color: #f9fbf4 !important;
        box-sizing: border-box !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly .statusMessage,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly .statusMessage .none {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) h4.round {
        min-height: 0 !important;
        padding: 2px 7px !important;
        margin: 4px 0 3px !important;
        font-size: 13px !important;
        line-height: 18px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits {
        border-width: 1px !important;
        background-color: #fff !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits div.action {
        display: grid !important;
        grid-template-columns: 62px 175px !important;
        justify-content: start !important;
        column-gap: 6px !important;
        align-items: center !important;
        gap: 4px 6px !important;
        min-height: 0 !important;
        padding: 4px 5px !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits div.action > .clear,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits div.action > br {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.bigUnitSection {
        grid-column: 1 !important;
        align-self: center !important;
        float: none !important;
        width: 78px !important;
        height: 78px !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-color: #e7e7e7 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.bigUnitSection a.unitSection {
        width: 78px !important;
        height: 78px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.bigUnitSection img.unitSection {
        width: 140px !important;
        height: 140px !important;
        transform: scale(0.56) !important;
        transform-origin: top right !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.bigUnitSection a.zoom {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details div.tit {
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details div.tit img.unit {
        margin: 0 2px !important;
        top: 2px !important;
        transform: scale(0.86);
        transform-origin: center;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details div.tit span.furtherInfo {
        font-size: 10.5px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .resourceWrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 3px !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .resourceWrapper .resource {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .resourceWrapper .resource i {
        flex: 0 0 auto !important;
        margin: 0 1px !important;
        transform: scale(0.76);
        transform-origin: center;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .resourceWrapper .resource .value {
        min-width: 0 !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .duration {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 3px auto 0 !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .duration i {
        margin: 0 2px !important;
        transform: scale(0.76);
        transform-origin: center;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 4px 0 0 !important;
        direction: rtl;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta:after,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > .status.none {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > span.value {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        line-height: 22px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > span.value:nth-of-type(1) {
        order: 1;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > span.value:nth-of-type(1)::after {
        content: ":";
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > input.text {
        order: 2;
        flex: 0 0 clamp(52px, 16vw, 68px) !important;
        width: clamp(52px, 16vw, 68px) !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 1px 4px !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 20px !important;
        text-align: center !important;
        direction: ltr !important;
        unicode-bidi: plaintext !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > span.value:nth-of-type(2) {
        order: 3;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > a {
        order: 4;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        font-size: 11px !important;
        font-weight: bold !important;
        line-height: 22px !important;
        color: #6f9f16 !important;
        direction: ltr !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > button.exchange {
        order: 5;
        float: none !important;
        flex: 0 0 68px !important;
        width: 68px !important;
        min-width: 0 !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        padding: 0 3px !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 10px !important;
        line-height: 22px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > button.exchange .button-container,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > button.exchange .button-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: inherit !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) button.startTraining {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 0 16px !important;
        margin: 6px auto 0 !important;
        font-size: 11.5px !important;
        line-height: 24px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) table.under_progress {
        margin: 4px 0 6px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) table.under_progress th,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) table.under_progress td {
        height: auto !important;
        padding: 2px 3px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) table.under_progress td.desc {
        width: auto !important;
        text-align: right !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) table.under_progress td.dur,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) table.under_progress td.fin {
        width: 23% !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) table.under_progress td.desc img.unit {
        margin: 0 2px !important;
        transform: scale(0.86);
        transform-origin: center;
    }
}

/* بطاقة الإدارة خاصة بحساب الدعم: قالبها يختلف عن البطاقات العادية، لذلك
   لا نترك قاعدة الورقة العامة ترفع نصها خارج حدودها. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxAdminPanel > .sidebarBoxBaseBox {
        display: none !important;
    }

    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxAdminPanel > .sidebarBoxInnerBox {
        position: relative !important;
        z-index: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxAdminPanel > .sidebarBoxInnerBox > .content {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 22px 35px 20px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxAdminPanel .adminPanelMessage {
        margin: 0 0 14px !important;
        color: #513d2e !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: center !important;
    }

    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxAdminPanel .adminPanelContainer {
        margin: 0 !important;
        text-align: center !important;
    }
}

/* صفوف رسائل صندوق المعلومات على سطح المكتب. أما الترويسة فلها ملف واحد
   مستقل يُحمّل بعد جميع ستايلات الهاتف. */
@media screen and (min-width: 1025px) {
    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li {
        min-height: 32px !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        border: 0 !important;
        border-bottom: 1px solid #e1e6dc !important;
        color: #414a3b !important;
        background: transparent !important;
        font: 400 12px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li.trav47InfoNoticeRow {
        display: flex !important;
        direction: rtl !important;
        align-items: center !important;
        gap: 6px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li.trav47InfoNoticeRow > p.trav47InfoNotice {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        font: 400 12px/18px Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li.trav47InfoNoticeRow > button.productionBoostButton {
        position: static !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 76px !important;
        max-width: none !important;
        height: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border: 1px solid #82631d !important;
        border-radius: 6px !important;
        color: #47340e !important;
        background: linear-gradient(to bottom, #fdf5cb 0%, #f8eeb0 40%, #f0dc7c 45%, #e6ce64 85%, #caac50 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(88,63,14,.26) !important;
        font: 700 12px/1.15 Tahoma, Arial, sans-serif !important;
        text-shadow: 0 1px 0 rgba(255,248,206,.72) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li.trav47InfoNoticeRow > button.productionBoostButton :is(.button-container, .button-content) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font: inherit !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li.trav47InfoNoticeRow > button.productionBoostButton .button-background {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li.trav47InfoNoticeRow > .infoboxDeleteButton {
        position: static !important;
        order: 3 !important;
        display: inline-grid !important;
        flex: 0 0 24px !important;
        place-items: center !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #c8b9ac !important;
        border-radius: 5px !important;
        background: linear-gradient(#fff, #eee9e3) !important;
        box-shadow: inset 0 1px #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li.trav47InfoNoticeRow > .infoboxDeleteButton:hover {
        border-color: #a84a3f !important;
        background: linear-gradient(#fff8f7, #eadbd8) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li.trav47InfoNoticeRow > .infoboxDeleteButton img {
        display: block !important;
        margin: 0 !important;
        float: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul > li:last-child {
        border-bottom: 0 !important;
    }
}

/* الدليل السريع على الهاتف: نافذة عريضة ونص مقروء بدلاً من قياس نافذة سطح المكتب. */
@media screen and (max-width: 620px) {
    .dialogOverlay > .dialogWrapper:has(.trav47ManualDialog) {
        width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
    }

    .dialogOverlay > .dialogWrapper:has(.trav47ManualDialog) > .dialog,
    .dialogOverlay > .dialogWrapper:has(.trav47ManualDialog) .dialogContents,
    .dialogOverlay > .dialogWrapper:has(.trav47ManualDialog) .dialog-contents {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body .dialog.trav47ManualDialog,
    body.travianMobile .dialog.trav47ManualDialog {
        width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100svh - 16px) !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body .dialog.trav47ManualDialog :is(.dialog-container, .dialogContainer, .dialog-contents, .dialogContents, form, #dialogContent),
    body.travianMobile .dialog.trav47ManualDialog :is(.dialog-container, .dialogContainer, .dialog-contents, .dialogContents, form, #dialogContent) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body .dialog.trav47ManualDialog iframe.popup,
    body.travianMobile .dialog.trav47ManualDialog iframe.popup {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100svh - 62px) !important;
        max-height: calc(100svh - 62px) !important;
    }

    .dialog.trav47ManualDialog .title {
        min-height: 24px !important;
        padding: 2px 9px !important;
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .dialog.trav47ManualDialog #dialogCancelButton.iconButton.small.cancel {
        top: 3px !important;
        left: 8px !important;
        width: 19px !important;
        height: 19px !important;
    }

    .dialog.trav47ManualDialog #dialogCancelButton.iconButton.small.cancel:before {
        font-size: 19px !important;
        line-height: 17px !important;
    }

    body.manual {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    body.manual .manualEntry {
        padding: 0 10px 12px !important;
    }

    body.manual .manualEntry h1.titleInHeader,
    body.manual .manualEntry h1.titleInHeader {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    body.manual #troops,
    body.manual #buildings {
        width: calc(100% + 20px) !important;
        grid-template-rows: 22px auto !important;
        row-gap: 4px !important;
        margin-right: -10px !important;
        margin-left: -10px !important;
        margin-bottom: 10px !important;
        padding-bottom: 4px !important;
    }

    body.manual #troops > h3,
    body.manual #buildings > h3 {
        height: 22px !important;
        min-height: 22px !important;
        padding: 1px 4px !important;
        font-size: 12px !important;
        line-height: 16px !important;
    }

    body.manual #troops::before,
    body.manual #buildings::before {
        right: -10px !important;
        left: -10px !important;
        height: 22px !important;
    }

    body.manual #troops > h3 img,
    body.manual #buildings > h3 img {
        transform: scale(.82);
    }

    body.manual #troops > .contentNavi.tabNavi .tabItem,
    body.manual #buildings > .contentNavi.tabNavi .tabItem {
        min-height: 18px !important;
        padding: 1px 5px !important;
        font-size: 10px !important;
        line-height: 13px !important;
    }

    body.manual #troops > .contentNavi.tabNavi .container .content .tabItem,
    body.manual #buildings > .contentNavi.tabNavi .container .content .tabItem {
        padding-right: 0 !important;
        padding-left: 3px !important;
    }

    body.manual #troops > .contentNavi.tabNavi,
    body.manual #buildings > .contentNavi.tabNavi {
        width: 100% !important;
        gap: 0 !important;
        justify-content: stretch !important;
    }

    body.manual #troops > .contentNavi.tabNavi .container,
    body.manual #buildings > .contentNavi.tabNavi .container,
    body.manual #troops > .contentNavi.tabNavi .content,
    body.manual #buildings > .contentNavi.tabNavi .content {
        height: 20px !important;
        min-height: 20px !important;
        margin: 0 !important;
    }

    body.manual #troops > .contentNavi.tabNavi .container,
    body.manual #buildings > .contentNavi.tabNavi .container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    body.manual #troops > ul > li,
    body.manual #buildings > ul > li,
    body.manual #troops > ul > li a,
    body.manual #buildings > ul > li a {
        font-size: 12px !important;
        line-height: 20px !important;
    }

    /* التكلفة تبقى صفاً واحداً في دليلي القوات والمباني. */
    body.manual .manualBuilding .resourceWrapper {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 5px 3px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    body.manual .manualBuilding .resourceWrapper .inlineIcon,
    body.manual .manualTroop table#troop_info .inlineIcon,
    body.manual .manualTroop table#troop_info .resourceWrapper {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body.manual .manualBuilding .resourceWrapper .value,
    body.manual .manualTroop table#troop_info .value {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    body.manual .manualTroop table#troop_info {
        table-layout: fixed !important;
    }

    body.manual .manualTroop table#troop_info td {
        padding: 2px 1px !important;
        white-space: nowrap !important;
    }

    body.manual .manualEntry :is(.description, #t_desc, #prereqs),
    body.manual .manualEntry :is(.troopData, #troop_info) {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
}

/* Tablet map chrome: reserve dedicated header and footer bands so controls
   never cover playable tiles. */
@media screen and (min-width: 621px) and (max-width: 1024px) {
    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content {
        display: block !important;
        overflow: visible !important;
    }

    /* Restore the original desktop content header rather than recreating it. */
    body.map:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle {
        height: 67px !important;
        min-height: 67px !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 10px !important;
        background-color: #d2bda1 !important;
        box-shadow: none !important;
        z-index: 35 !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader {
        position: absolute !important;
        top: 32px !important;
        right: 45px !important;
        left: 180px !important;
        z-index: 36;
        width: auto !important;
        max-width: none !important;
        height: 32px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #f2f2f2 !important;
        font-family: "Noto Serif", serif !important;
        font-size: 25px !important;
        line-height: 32px !important;
        white-space: nowrap;
        text-shadow: 1px 0 0 #b68363, 1px 1px 0 #b68363, 0 1px 0 #b68363, -1px 1px 0 #5e463a, -1px 0 0 #5e463a, -1px -1px 0 #5e463a, 0 -1px 0 #5e463a, 1px -1px 0 #5e463a;
        text-align: right;
        box-sizing: border-box;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content .map2 {
        z-index: 1;
        margin: 0 auto !important;
        overflow: visible !important;
        border: 1px solid #636363 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > #closeContentButton.travian-map-close {
        position: absolute !important;
        top: 25px !important;
        left: 36px !important;
        right: auto !important;
        z-index: 37 !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        pointer-events: auto;
    }

    body.map:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > #closeContentButton.travian-map-close svg {
        width: 12px !important;
        height: 12px !important;
    }

    body.map #mapContainer #toolbar.toolbar,
    body.map #mapContainer #minimapContainer {
        top: 0 !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar {
        /* Keep the coordinate toolbar in the map container, aligned with
           the other map controls rather than below the tile area. */
        bottom: 0 !important;
    }
}

/* إطار موحد لصورة الحقل أو المبنى داخل منطقة الوصف.  صور البناء sprites
   شفافة بأحجام متفاوتة، لذا نضبط الإطار والتحجيم لا الصورة ذاتها. */
@media screen and (max-width: 1024px) {
    body.build #content #build > #descriptionAndInfo {
        position: relative !important;
        min-height: 112px !important;
        padding-left: 128px !important;
        box-sizing: border-box !important;
    }

    body.build #content #build > .roundedCornersBox.big .stickyImage {
        position: absolute !important;
        top: -108px !important;
        right: auto !important;
        bottom: auto !important;
        left: 8px !important;
        width: 108px !important;
        height: 102px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        background: transparent !important;
        transform: none !important;
    }

    body.build #content #build > .roundedCornersBox.big .stickyImage a.build_logo {
        position: absolute !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width: 184px !important;
        height: 179px !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.build #content #build > .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        position: absolute !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width: 184px !important;
        height: 179px !important;
        transform: scale(.52) !important;
        transform-origin: top left !important;
    }

}

/* Tablets have enough horizontal room for an intrinsic-width map toolbar.
   Keeping `left` automatic stops the zoom control's frame from stretching
   across the map while preserving its right-hand anchor. */
@media screen and (min-width: 621px) and (max-width: 1024px) {
    body.map #mapContainer #toolbar.toolbar {
        left: auto !important;
        width: auto !important;
        min-width: 240px !important;
        max-width: calc(100% - 8px) !important;
    }

    /* Use the whole toolbar width on tablets: the native 16px sprites stay
       sharp when enlarged, while flex distribution removes the dead space
       at either side of the zoom controls. */
    body.map #mapContainer #toolbar .contents {
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 4px 8px !important;
    }

    body.map #mapContainer #toolbar .iconButton {
        transform: scale(1.2);
        transform-origin: center;
    }

    /* Cropfinder is a framed two-layer icon; scale its wrapper once only. */
    body.map #mapContainer #toolbar .iconButton.iconRequireGold .iconButton {
        transform: none;
    }

    body.map #mapContainer #toolbar .dropdown {
        width: 72px !important;
        height: 24px !important;
        font-size: 13px !important;
    }

    body.map #mapContainer #toolbar .dropdown .dataContainer {
        width: 48px !important;
    }

    body.map #mapContainer #toolbar .dropdown .dataContainer .entry {
        font-size: 13px !important;
        min-width: 48px;
        direction: rtl;
        unicode-bidi: isolate;
        text-align: center !important;
        white-space: nowrap;
    }

    body.map #mapContainer #toolbar .text {
        font-size: 12px !important;
    }

    /* Match the collapsed mini-map header to the zoom toolbar's height
       without changing the mini-map's width. */
    body.map #mapContainer #minimapContainer {
        height: auto;
    }

    body.map #mapContainer #minimapContainer .headline {
        height: 40px !important;
        min-height: 40px !important;
        /* The 4px lower skin edge is included in the collapsed size while
           leaving the expanded height under control of the map script. */
        margin: 0 6px 4px !important;
    }

    body.map #mapContainer #minimapContainer .headline .title {
        font-size: 14px !important;
        line-height: 40px !important;
    }

    body.map #mapContainer #minimapContainer .headline .iconButton {
        transform: scale(1.7);
    }
}


/* The Gold Club is a self-contained phone panel. Its live boundaries are
   calculated in travian-mobile.js so it always clears both fixed bars. */
@media screen and (max-width: 1024px) {
    html.trav47GoldClubDialogOpen,
    html.trav47GoldClubDialogOpen body {
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady {
        position: fixed !important;
        z-index: 1605 !important;
        top: var(--trav47-goldclub-top, 90px) !important;
        right: 5px !important;
        bottom: var(--trav47-goldclub-bottom, 82px) !important;
        left: 5px !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 6px 20px rgba(28, 42, 22, .34) !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-tl,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-tc,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-tr,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-ml,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-mc,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-mr,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-bl,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-bc,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-background-br,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-dragbar,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady form > .title,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady form > .info,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady form > .buttons {
        display: none !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-container,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialog-contents,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .dialogContents,
    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady form {
        position: static !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady #dialogContent {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #f3d967 !important;
        border: 1px solid #b28b17 !important;
        border-radius: 8px !important;
        scrollbar-width: thin;
        scrollbar-color: #b28b17 #fff3b5;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .paymentPopupDialogWrapper {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 7px 12px !important;
        color: #4d3d0d !important;
        background: linear-gradient(180deg, #fffce2 0%, #f2da75 100%) !important;
        direction: rtl !important;
        text-align: right !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .paymentPopupDialogWrapper > h1 {
        position: sticky !important;
        z-index: 4 !important;
        top: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        box-sizing: border-box !important;
        min-height: 39px !important;
        margin: 0 -7px 7px !important;
        padding: 0 8px !important;
        color: #574307 !important;
        font-size: 15px !important;
        line-height: 39px !important;
        background: linear-gradient(180deg, #fffbd5 0%, #e7c64c 100%) !important;
        border: 0 !important;
        border-bottom: 1px solid #b58e18 !important;
        border-radius: 7px 7px 0 0 !important;
        box-shadow: 0 2px 5px rgba(54, 76, 38, .12) !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .paymentPopupDialogWrapper > h1 .headlineText {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .paymentPopupDialogWrapper > h1 .goldWrapper {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 2px 6px !important;
        color: #6b511c !important;
        font-size: 11px !important;
        line-height: 20px !important;
        background: rgba(255, 255, 255, .72) !important;
        border: 1px solid #c7ba86 !important;
        border-radius: 12px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .paymentPopupDialogWrapper > h1 .clear {
        display: none !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .paymentPopupDialogWrapper > h1 #dialogCancelButton.goldclubHeaderClose {
        position: static !important;
        order: 3 !important;
        flex: 0 0 27px !important;
        width: 27px !important;
        height: 27px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #9e342c !important;
        background: linear-gradient(180deg, #fff 0%, #e7eee2 100%) !important;
        border: 1px solid #a8b89b !important;
        border-radius: 50% !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(47, 64, 35, .18) !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .paymentPopupDialogWrapper > h1 #dialogCancelButton.goldclubHeaderClose::before {
        color: inherit !important;
        font: normal 22px/25px Arial, sans-serif !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .subHeadline {
        margin: 0 0 7px !important;
        padding: 7px 9px !important;
        color: #594916 !important;
        font-size: 12px !important;
        line-height: 18px !important;
        background: #fffbea !important;
        border: 1px solid #dcc45f !important;
        border-right: 3px solid #bc8d0d !important;
        border-radius: 5px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .feature {
        align-items: center !important;
        gap: 8px !important;
        min-height: 70px !important;
        margin: 0 0 6px !important;
        padding: 6px !important;
        color: #4b4019 !important;
        background: #fffdf3 !important;
        border: 1px solid #d8be50 !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 2px rgba(49, 70, 35, .07) !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .featureImage {
        flex: 0 0 60px !important;
        width: 60px !important;
        height: 60px !important;
        margin: 0 !important;
        background-color: #fff3b5 !important;
        border-color: #d2b64a !important;
        border-radius: 5px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .featureContent {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .featureTitle {
        margin: 0 0 3px !important;
        color: #624a05 !important;
        font-size: 13px !important;
        line-height: 17px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .featureText {
        color: #635a35 !important;
        font-size: 11px !important;
        line-height: 16px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .goldButtonWrapper {
        margin: 8px 0 9px !important;
        padding: 8px !important;
        text-align: center !important;
        background: #fffaf0 !important;
        border: 1px solid #d9c88d !important;
        border-radius: 6px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .goldButtonWrapper button.gold {
        min-width: 124px !important;
        height: 32px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .buttonSubTitle {
        margin-top: 5px !important;
        color: #685c38 !important;
        font-size: 11px !important;
        line-height: 16px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .extraFeatures {
        margin: 9px 0 6px !important;
        padding: 6px 8px !important;
        color: #51420e !important;
        font-size: 12px !important;
        line-height: 17px !important;
        background: #f1d86a !important;
        border: 0 !important;
        border-right: 3px solid #b6870d !important;
        border-radius: 4px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .furtherFeatures .feature {
        min-height: 70px !important;
        margin-bottom: 6px !important;
        padding: 6px !important;
        background: #fffdf3 !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .furtherFeatures .featureImage {
        flex-basis: 60px !important;
        width: 60px !important;
        height: 60px !important;
    }

    .dialog.premiumFeatureGoldclub.trav47GoldClubDialogReady .furtherInfos:empty {
        display: none !important;
    }
}

.trav47RailCardTitle {
    display: none;
}

@media screen and (max-width: 1024px) {
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .trav47RailCardTitle {
        display: block !important;
        width: 100% !important;
        height: 14px !important;
        margin: 0 0 2px !important;
        padding: 0 !important;
        color: #513a1f !important;
        font-size: 12px !important;
        font-weight: normal !important;
        line-height: 14px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47RailCardTitle {
        position: relative !important;
        top: -4px !important;
        right: -1px !important;
        margin-bottom: -2px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements {
        margin-bottom: 3px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents::before {
        content: none !important;
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops {
        margin-top: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements {
        margin-bottom: 3px !important;
    }
}

/* Final full-play rail header reset.  This stays last so late mobile rules
   cannot reintroduce a blank band above the card headings. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents {
        padding-top: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops {
        margin-top: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead tr,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead tr,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead tr,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead th,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead th,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead th {
        margin-top: 0 !important;
        padding-top: 0 !important;
        transform: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents {
        position: relative !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents::before {
        position: absolute !important;
        top: 1px !important;
        right: 3px !important;
        z-index: 1 !important;
        display: block !important;
        font-size: 12px !important;
        font-weight: normal !important;
        line-height: 13px !important;
        color: #513a1f !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents::before {
        content: "الإنتاج";
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents::before {
        content: "القوات:";
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents::before {
        content: "تحركات القوات:";
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops {
        margin-top: 15px !important;
    }
}

/* The compact queue heading belongs only to the phone full-play layout. */
@media screen and (min-width: 761px) {
    .trav47BuildingQueueHeading {
        display: none !important;
    }
}

/* Full-play village rail: let each movement row use the complete card width.
   A native table otherwise shrink-wraps to the timer text on small screens. */
@media (max-width: 1024px) {
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody {
        display: block !important;
        width: 100% !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody tr {
        box-sizing: border-box !important;
        width: 100% !important;
    }
}

/* Full play mode: retain the village scene and expose every desktop sidebar as a touch drawer. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production {
        display: block !important;
        margin-bottom: 10px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .showTroopsToggleMobile {
        display: none !important;
    }

    /* Full play mode uses two columns: a smaller resource scene and a compact status rail.
       This keeps every field tappable while production, troops, and movements stay visible. */
    html[data-trav47-layout="desktop"] body.village1 .village1Content {
        min-height: calc(var(--travian-mobile-scene-top, 152px) + 500px) !important;
        padding-bottom: 24px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 #resourceFieldContainer {
        left: 34% !important;
        transform: translateX(-50%) scale(0.59) !important;
        transform-origin: top center !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details {
        position: absolute !important;
        top: var(--travian-mobile-scene-top, 152px) !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 2 !important;
        width: min(123px, calc(31.5vw - 2px)) !important;
        max-width: calc(31.5vw - 2px) !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 0 10px !important;
        overflow: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    /* Troop movements are a separate upper card.  Keeping them outside the
       narrow scroll rail lets every movement stay on one line without
       widening the production and troops cards over the resource fields. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements {
        position: fixed !important;
        top: 94px !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 1085 !important;
        display: block !important;
        width: min(240px, calc(100vw - 135px)) !important;
        min-width: 0 !important;
        max-width: 240px !important;
        height: auto !important;
        max-height: 117px !important;
        margin: 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements > .villageList.movements {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: 117px !important;
        margin: -5px 0 0 !important;
        padding-top: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .trav47RailCardTitle {
        position: relative !important;
        top: -5px !important;
    }

    html[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.village1 div.village1 div#map_details > .movements {
        right: auto !important;
        left: 8px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units {
        overflow: hidden !important;
    }

    /* Keep the village scene fixed in full-play phone mode.  Only the status
       rail (movements, production, and troops) scrolls when its content is
       taller than the space above the bottom navigation. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details {
        height: calc(100dvh - var(--travian-mobile-scene-top, 152px) - 120px) !important;
        /* Let a long status rail continue a few pixels beneath the fixed
           bottom navigation instead of ending with a blank strip above it. */
        max-height: calc(100dvh - var(--travian-mobile-scene-top, 152px) - 120px) !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        /* Its position is final at first paint; do not inherit the desktop
           transition that makes the status rail follow the hero frame. */
        transition: none !important;
        animation: none !important;
    }

    /* The fixed village controls must stay above the scroll rail.  Leave only
       a small visual overlap instead of letting the rail consume the control
       bar's full height. */
    html[data-trav47-layout="desktop"] body.village1 #navigation {
        z-index: 20 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units {
        overflow: visible !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements {
        table-layout: fixed !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements td {
        min-width: 0 !important;
        overflow-wrap: anywhere;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents {
        max-height: 112px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /* One compact line per movement: icon, type/name, then the countdown. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody tr {
        display: grid !important;
        grid-template-columns: max-content max-content !important;
        grid-template-rows: 18px !important;
        align-items: center !important;
        justify-content: center !important;
        column-gap: 3px !important;
        min-height: 18px !important;
        padding: 0 2px !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody td.typ {
        display: flex !important;
        align-items: center !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        padding: 0 !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody td:not(.typ) {
        display: flex !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 13px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody .mov {
        display: block !important;
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 10.5px !important;
        line-height: 18px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody .dur_r,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody .dur_l {
        position: static !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #68513d !important;
        font-size: 10.5px !important;
        line-height: 18px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .boxes-contents.cf {
        padding: 5px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 11px !important;
    }

    /* Keep the construction queue in the resource-fields column, directly
       under the scaled field scene, rather than across the status rail. */
    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList {
        position: absolute !important;
        top: calc(var(--travian-mobile-scene-top, 152px) + 170px) !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        z-index: 1 !important;
        width: min(261px, calc(65vw - 6px)) !important;
        max-width: calc(65vw - 6px) !important;
        transform: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .boxes-contents {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        padding: 30px 4px 4px 2px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .trav47BuildingQueueHeading {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        left: auto !important;
        display: block !important;
        font-size: 11px !important;
        font-weight: bold !important;
        line-height: 23px !important;
        color: #6a4320 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .finishNow {
        position: absolute !important;
        z-index: 1 !important;
        top: 4px !important;
        right: auto !important;
        bottom: auto !important;
        left: 4px !important;
        width: 88px !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .finishNow button {
        width: 88px !important;
        max-width: 88px !important;
        height: 23px !important;
        min-height: 23px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList ul {
        width: 100% !important;
        margin: 0 0 5px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList li {
        display: flex !important;
        flex-flow: row wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px 0 !important;
        direction: rtl !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList li > a {
        position: absolute !important;
        position: static !important;
        order: 1 !important;
        flex: 0 0 9px !important;
        width: 9px !important;
        min-width: 9px !important;
        height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .name {
        order: 2 !important;
        flex: 0 1 auto !important;
        max-width: calc(100% - 9px) !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: right !important;
        font-size: 9px !important;
        line-height: 13px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .name .lvl {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList img.del {
        margin: 0 !important;
        transform: scale(0.62) !important;
        transform-origin: center !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .buildDuration {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 4px !important;
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 1px !important;
        padding: 0 !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .buildDuration .durationValue {
        display: block !important;
        grid-column: 1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-right: 10px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList .buildDuration .finishAt {
        display: block !important;
        grid-column: 2 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    /* Compact right rail: titles and useful data start at the right edge. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList .boxes-contents {
        padding-right: 3px !important;
        padding-left: 3px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents {
        padding-top: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents {
        padding-top: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead th,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead th {
        height: 13px !important;
        padding: 0 !important;
        line-height: 13px !important;
        text-align: right !important;
        vertical-align: top !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production {
        direction: rtl !important;
        table-layout: fixed !important;
        width: 100% !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td {
        padding: 0 !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico {
        width: 18px !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.res {
        width: 46px !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.num {
        width: auto !important;
        direction: ltr !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums !important;
    }

    /* Production rows need explicit columns; fixed table columns squeeze the
       resource names into the numbers on the narrow rail. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody {
        display: block !important;
        width: 100% !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody tr {
        display: grid !important;
        grid-template-columns: 18px 45px minmax(0, 1fr) !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 21px !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody td.ico {
        grid-column: 1 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody td.res {
        grid-column: 2 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody td.num {
        grid-column: 3 !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        font-size: 9px !important;
    }

    /* Use the original table flow for production values. It keeps every
       resource number present on all browser engines. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production {
        display: table !important;
        table-layout: auto !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody {
        display: table-row-group !important;
        width: auto !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody tr {
        display: table-row !important;
        width: auto !important;
        min-height: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody td {
        display: table-cell !important;
        width: auto !important;
        min-width: initial !important;
        overflow: visible !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody td.num {
        grid-column: auto !important;
        overflow: visible !important;
        font-size: 10px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops {
        display: block !important;
        width: 100% !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead {
        display: block !important;
        width: 100% !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead th {
        display: block !important;
        height: 13px !important;
        padding: 0 !important;
        line-height: 13px !important;
        font-size: 0 !important;
        text-align: right !important;
        vertical-align: top !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead th::before {
        content: "القوات:";
        font-size: 11px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops tbody {
        display: block !important;
        width: 100% !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops tbody tr {
        display: flex !important;
        align-items: center !important;
        direction: rtl !important;
        width: 100% !important;
        min-height: 20px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td {
        padding: 0 !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.ico {
        display: block !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num {
        display: block !important;
        flex: 0 1 auto !important;
        width: auto !important;
        direction: ltr !important;
        text-align: right !important;
        font-size: 10px !important;
        font-variant-numeric: tabular-nums !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.un {
        display: none !important;
    }

    @media screen and (max-width: 359px) {
        html[data-trav47-layout="desktop"] body.village1 .village1 div.buildingList {
            top: calc(var(--travian-mobile-scene-top, 152px) + 134px) !important;
            left: 0 !important;
            width: calc(65vw - 6px) !important;
            max-width: calc(65vw - 6px) !important;
            transform: none !important;
        }

        html[data-trav47-layout="desktop"] body.village1 div.village1 #resourceFieldContainer {
            left: 34% !important;
            transform: translateX(-50%) scale(0.46) !important;
        }

        html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details {
            right: 4px !important;
            width: calc(31.5vw - 4px) !important;
            max-width: calc(31.5vw - 4px) !important;
        }
    }

    /* Retired drawer shell for the phone web-layout. */
    @media not all {
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent,
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent {
        position: fixed !important;
        top: 68px !important;
        bottom: 0 !important;
        display: block !important;
        width: min(330px, calc(100vw - 38px)) !important;
        max-width: calc(100vw - 38px) !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 10px 8px 20px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        z-index: 1502 !important;
        background: #e9d0aa !important;
        box-shadow: 0 0 18px rgba(0, 0, 0, .48) !important;
        transition: transform 220ms ease-out !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent {
        right: 0 !important;
        left: auto !important;
        transform: translateX(105%) !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent {
        right: auto !important;
        left: 0 !important;
        transform: translateX(-105%) !important;
    }

    html[data-trav47-layout="desktop"] body.travian-mobile-right-sidebar-open #center #sidebarBeforeContent,
    html[data-trav47-layout="desktop"] body.travian-mobile-left-sidebar-open #center #sidebarAfterContent {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    html[data-trav47-layout="desktop"] body.travian-mobile-left-sidebar-open .travian-mobile-overlay,
    html[data-trav47-layout="desktop"] body.travian-mobile-right-sidebar-open .travian-mobile-overlay {
        display: block !important;
        z-index: 1501 !important;
    }
    }

}

@media screen and (max-width: 1024px) {
    body.globalMessage {
        padding-bottom: 12px !important;
    }

    body.globalMessage #center #contentOuterContainer,
    body.globalMessage #center #contentOuterContainer.size1 {
        overflow: hidden !important;
        border: 1px solid #91a7b4 !important;
        border-radius: 8px !important;
        background: linear-gradient(180deg, #f9fcfd 0%, #e4edf2 100%) !important;
        box-shadow: 0 7px 20px rgba(24, 43, 54, .34) !important;
    }

    body.globalMessage #center #contentOuterContainer > .globalMessageHeader {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 0 42px !important;
        border: 0 !important;
        border-bottom: 1px solid #b7c8d1 !important;
        background: linear-gradient(180deg, #fbfdfe 0%, #e5eef3 100%) !important;
        box-sizing: border-box !important;
    }

    body.globalMessage .globalMessageHeaderTitle {
        display: block !important;
        overflow: hidden !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .65) !important;
        transform: translateY(5px) !important;
        white-space: nowrap !important;
    }

    body.globalMessage .globalMessageHeader #closeContentButton {
        position: absolute !important;
        top: 7px !important;
        left: 7px !important;
        margin: 0 !important;
    }

    body.globalMessage .globalMessageHeader #answersButton {
        display: none !important;
    }

    body.globalMessage #center #contentOuterContainer,
    body.globalMessage #center #contentOuterContainer.size1 {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        padding: 0 4px 8px !important;
        box-sizing: border-box !important;
    }

    body.globalMessage #center #contentOuterContainer .contentContainer {
        min-height: 0 !important;
        max-height: calc(100svh - 88px) !important;
        overflow: hidden !important;
        border: 0 !important;
        background: #f8fbfc !important;
    }

    body.globalMessage #center #contentOuterContainer #content.messages.globalMessageContent {
        width: 100% !important;
        min-height: 0 !important;
        max-height: calc(100svh - 112px) !important;
        padding: 8px 8px 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    body.globalMessage #content.messages.globalMessageContent h1.titleInHeader {
        display: none !important;
    }

    body.globalMessage div#sysmsg {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    body.globalMessage .globalMessageArticleBanner {
        display: block !important;
        width: 100% !important;
        height: 150px !important;
        margin: 0 0 14px !important;
        border: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        box-sizing: border-box !important;
    }

    body.globalMessage .globalMessageBody {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.globalMessage .globalMessageBody {
        padding: 0 2px 8px !important;
        color: #2c1f15 !important;
        font-size: 14px !important;
        line-height: 1.75 !important;
        text-align: right !important;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    body.globalMessage .globalMessageBody br {
        line-height: 1.25 !important;
    }

    body.globalMessage .globalMessageBody li {
        margin: 0 18px 4px 0 !important;
        padding: 0 !important;
        line-height: 1.55 !important;
    }

    body.globalMessage .globalMessageContinue {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 8px 0 0 !important;
        padding: 4px 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        text-align: center !important;
    }

    body.globalMessage .globalMessageContinue .globalMessageVillageButton {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 132px !important;
        min-height: 30px !important;
        padding: 4px 16px !important;
        border: 1px solid #365f0b !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #80bf31 0%, #4f8d12 100%) !important;
        color: #fff !important;
        box-shadow: inset 0 1px rgba(255,255,255,.42), 0 1px 2px rgba(0,0,0,.2) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        text-decoration: none !important;
        text-shadow: 0 1px rgba(0,0,0,.3) !important;
        box-sizing: border-box !important;
    }

    body.globalMessage .globalMessageContinue .globalMessageVillageButton:hover,
    body.globalMessage .globalMessageContinue .globalMessageVillageButton:focus {
        background: linear-gradient(180deg, #8dca3d 0%, #5c9b18 100%) !important;
        text-decoration: none !important;
    }

    body.globalMessage #center #contentOuterContainer > .contentFooter {
        display: none !important;
    }

    body.winner #center #contentOuterContainer,
    body.winner #center #contentOuterContainer.size1 {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        padding: 0 4px 8px !important;
        box-sizing: border-box !important;
    }

    body.winner #center #contentOuterContainer .contentContainer {
        min-height: 0 !important;
        max-height: calc(100svh - 88px) !important;
        overflow: hidden !important;
    }

    body.winner #center #contentOuterContainer #content.plus {
        width: 100% !important;
        min-height: 0 !important;
        max-height: calc(100svh - 112px) !important;
        padding: 8px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    body.winner #content.plus h1.titleInHeader {
        margin-bottom: 8px !important;
        text-align: center !important;
        line-height: 26px !important;
    }

    body.winner #content.plus #content.village2 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 2px 8px !important;
        font-size: 14px !important;
        line-height: 1.75 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.winner #content.plus #content.village2 p {
        width: 100% !important;
        margin: 0 !important;
        line-height: 1.75 !important;
        overflow-wrap: anywhere;
    }

    body.winner #content.plus img.ww {
        float: none !important;
        display: block !important;
        max-width: 120px !important;
        max-height: 120px !important;
        margin: 0 auto 8px !important;
    }

    body .dialog {
        max-width: calc(100vw - 10px) !important;
        max-height: calc(100svh - 12px) !important;
        box-sizing: border-box !important;
    }

    body .dialog .dialog-container,
    body .dialog .dialogContainer,
    body .dialog .dialog-contents,
    body .dialog .dialogContents,
    body .dialog .dialog-contents form,
    body .dialog .dialogContents form {
        max-width: 100% !important;
        max-height: calc(100svh - 12px) !important;
        box-sizing: border-box !important;
    }

    body .dialog .dialog-contents form,
    body .dialog .dialogContents form {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    body .dialog #dialogContent,
    body .dialog .dialog-contents .content,
    body .dialog .dialogContents .content {
        min-height: 0 !important;
        max-height: calc(100svh - 96px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }
}

#answersButton {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    body.build #content #build:is(.gid19, .gid20, .gid21) .roundedCornersBox.big.headlineOnly {
        padding: 4px 6px !important;
        margin: 0 0 6px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) .roundedCornersBox.big.headlineOnly .upgradeBuilding {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 0 !important;
        padding: 4px 6px !important;
        margin: 0 0 6px !important;
        line-height: 1.2 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) .roundedCornersBox.big.headlineOnly .upgradeBuilding .completedMessage,
    body.build #content #build:is(.gid19, .gid20, .gid21) .roundedCornersBox.big.headlineOnly .upgradeBuilding .statusMessage {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) h4.round {
        min-height: 0 !important;
        padding: 2px 7px !important;
        margin: 4px 0 3px !important;
        font-size: 13px !important;
        line-height: 18px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) .buildActionOverview.trainUnits {
        border-width: 1px !important;
        background-color: #fff !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) .buildActionOverview.trainUnits div.action {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 4px 6px !important;
        min-height: 0 !important;
        padding: 4px 5px !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) .buildActionOverview.trainUnits div.action > .clear,
    body.build #content #build:is(.gid19, .gid20, .gid21) .buildActionOverview.trainUnits div.action > br {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.bigUnitSection {
        grid-column: 1 !important;
        float: none !important;
        width: 56px !important;
        height: 56px !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-color: #e7e7e7 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.bigUnitSection a.unitSection {
        width: 56px !important;
        height: 56px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.bigUnitSection img.unitSection {
        width: 140px !important;
        height: 140px !important;
        transform: scale(0.4) !important;
        transform-origin: top right !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details div.tit {
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details div.tit img.unit {
        margin: 0 2px !important;
        top: 2px !important;
        transform: scale(0.86);
        transform-origin: center;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details div.tit span.furtherInfo {
        font-size: 10.5px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .resourceWrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 4px !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .resourceWrapper .resource {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .resourceWrapper .resource i {
        flex: 0 0 auto !important;
        margin: 0 1px !important;
        transform: scale(0.76);
        transform-origin: center;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .resourceWrapper .resource .value {
        min-width: 0 !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .duration {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 3px auto 0 !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .duration i {
        margin: 0 2px !important;
        transform: scale(0.76);
        transform-origin: center;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 4px 0 0 !important;
        direction: rtl;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta:after,
    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > .status.none {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > span.value {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        line-height: 20px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > span.value:nth-of-type(1) {
        order: 1;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > input.text {
        order: 2;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 20px !important;
        min-height: 20px !important;
        padding: 1px 2px !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 18px !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > span.value:nth-of-type(2) {
        order: 3;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > a {
        order: 4;
        flex: 0 0 auto !important;
        font-size: 11px !important;
        font-weight: bold !important;
        line-height: 20px !important;
        color: #6f9f16 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > button.exchange {
        order: 5;
        float: none !important;
        flex: 0 0 78px !important;
        width: 78px !important;
        min-width: 0 !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 10px !important;
        line-height: 22px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > button.exchange .button-container,
    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta > button.exchange .button-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: inherit !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) button.startTraining {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 0 16px !important;
        margin: 6px auto 0 !important;
        font-size: 11.5px !important;
        line-height: 24px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) table.under_progress {
        margin: 4px 0 6px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) table.under_progress th,
    body.build #content #build:is(.gid19, .gid20, .gid21) table.under_progress td {
        height: auto !important;
        padding: 2px 3px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) table.under_progress td.desc {
        width: auto !important;
        text-align: right !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) table.under_progress td.dur,
    body.build #content #build:is(.gid19, .gid20, .gid21) table.under_progress td.fin {
        width: 23% !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) table.under_progress td.desc img.unit {
        margin: 0 2px !important;
        transform: scale(0.86);
        transform-origin: center;
    }
}

@media screen and (max-width: 1024px) {
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) #descriptionAndInfo {
        min-height: 78px !important;
        padding-left: 96px !important;
        margin-bottom: 4px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) #descriptionAndInfo .build_desc {
        padding-top: 2px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage {
        top: -84px !important;
        left: 0 !important;
        width: 92px !important;
        height: 78px !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage a.build_logo {
        top: -6px !important;
        left: -6px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(0.52) !important;
        transform-origin: top left !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly {
        padding: 0 !important;
        margin: 0 0 5px !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly > h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        max-width: calc(100% - 12px) !important;
        min-height: 0 !important;
        padding: 3px 9px !important;
        margin: 0 auto !important;
        border: 1px solid #a1bc79 !important;
        border-radius: 4px !important;
        background-color: #f9fbf4 !important;
        box-sizing: border-box !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly .statusMessage,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly .statusMessage .none {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits div.action {
        display: grid !important;
        grid-template-columns: 78px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 4px 6px !important;
        padding: 4px 5px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.bigUnitSection {
        grid-column: 1 !important;
        align-self: center !important;
        width: 78px !important;
        height: 78px !important;
        margin: 0 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.bigUnitSection a.unitSection {
        width: 78px !important;
        height: 78px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.bigUnitSection img.unitSection {
        width: 140px !important;
        height: 140px !important;
        transform: scale(0.56) !important;
        transform-origin: top right !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details {
        justify-content: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .resourceWrapper {
        gap: 0 3px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta {
        gap: 2px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > span.value {
        line-height: 22px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > span.value:nth-of-type(1)::after {
        content: ":";
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > input.text {
        flex: 0 0 clamp(52px, 16vw, 68px) !important;
        width: clamp(52px, 16vw, 68px) !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 1px 4px !important;
        font-size: 12px !important;
        line-height: 20px !important;
        direction: ltr !important;
        unicode-bidi: plaintext !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > a {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        line-height: 22px !important;
        direction: ltr !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) div.action div.details .cta > button.exchange {
        flex-basis: 68px !important;
        width: 68px !important;
        padding: 0 3px !important;
    }
}

@media screen and (max-width: 1024px) {
    body.build #content #build:is(.gid19, .gid20, .gid21) .buildActionOverview.trainUnits div.action {
        grid-template-columns: 70px minmax(0, 1fr) !important;
        gap: 3px 5px !important;
        padding: 3px 5px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.bigUnitSection {
        align-self: center !important;
        width: 70px !important;
        height: 70px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.bigUnitSection a.unitSection {
        width: 70px !important;
        height: 70px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.bigUnitSection img.unitSection {
        width: 140px !important;
        height: 140px !important;
        transform: scale(0.5) !important;
        transform-origin: top right !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details > br {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .resourceWrapper {
        margin: 1px 0 0 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .duration {
        direction: ltr !important;
        gap: 2px !important;
        margin: 1px auto 0 !important;
        unicode-bidi: isolate !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .duration i {
        order: 1 !important;
        margin: 0 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .duration .value {
        order: 2 !important;
        direction: ltr !important;
        unicode-bidi: plaintext !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21) div.action div.details .cta {
        margin-top: 3px !important;
    }
}

@media screen and (max-width: 1024px) {
    body.build #content #build .roundedCornersBox.big.headlineOnly,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    body.build #content #build .roundedCornersBox.big.headlineOnly > h4,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly > h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(to left, #e7f0dc 0%, #f9fbf4 100%) !important;
        box-sizing: border-box !important;
        color: #2f261b !important;
        direction: rtl !important;
        font-family: Arial, Helvetica, Verdana, sans-serif !important;
        font-size: 12px !important;
        font-weight: bold !important;
        line-height: 18px !important;
        text-align: right !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #2f261b !important;
    }

    body.build #content #build .roundedCornersBox.big.headlineOnly .statusMessage,
    body.build #content #build .roundedCornersBox.big.headlineOnly .statusMessage .none,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly .statusMessage,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big.headlineOnly .statusMessage .none {
        display: inline !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #2f261b !important;
        font-size: 12px !important;
        line-height: 18px !important;
        white-space: normal !important;
    }
}

#itemsToSale .inventory.travian-inventory-drop-target {
    outline: 2px solid #f1a33b;
    outline-offset: -2px;
    background-color: #fff6dc !important;
}

#itemsToSale .inventory .item.travian-inventory-drag-source {
    opacity: 0.35;
}

.travian-inventory-drag-ghost {
    position: fixed !important;
    z-index: 3000 !important;
    margin: 0 !important;
    pointer-events: none !important;
    opacity: 0.94;
    transform: scale(1.04);
    box-shadow: 0 5px 14px rgba(45, 32, 18, 0.28);
    cursor: grabbing;
}

@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #content.build #build.gid17 > .contentNavi.subNavi.tabFavorWrapper.trav47MarketTabs,
    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketTabs {
        display: block !important;
        width: calc(100% + 14px) !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: -7px -7px 8px !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketTabs > :is(.scrollFrom, .scrollTo) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketTabs > .scrollingContainer {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        direction: rtl !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketTabs > .scrollingContainer > .content {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketTabs a.tabItem {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketOverviewHeading {
        width: 100% !important;
        margin: 0 !important;
        padding: 7px 9px !important;
        border: 1px solid #bdc9b3 !important;
        border-bottom: 0 !important;
        border-radius: 5px 5px 0 0 !important;
        background: linear-gradient(180deg, #edf4e8 0%, #dfeadb 100%) !important;
        color: #33492e !important;
        font-size: 13px !important;
        line-height: 18px !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketMerchantStats,
    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketNpcCard {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketMerchantStats {
        padding: 0 8px !important;
        border-right: 1px solid #bdc9b3 !important;
        border-left: 1px solid #bdc9b3 !important;
        background: #fff !important;
        line-height: normal !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 .trav47MarketMerchantStat {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 33px !important;
        padding: 5px 2px !important;
        border-bottom: 1px solid #e1e6dd !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 .trav47MarketMerchantStatLabel {
        min-width: 0 !important;
        color: #465640 !important;
        font: 400 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 .trav47MarketMerchantStatValue {
        min-width: 54px !important;
        color: #60891d !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        text-align: left !important;
        direction: rtl !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 .trav47MarketMerchantStatValue > span {
        display: inline-block !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 > .trav47MarketNpcCard {
        clear: both !important;
        padding: 9px 9px 19px !important;
        border: 1px solid #bdc9b3 !important;
        border-top: 0 !important;
        border-radius: 0 0 5px 5px !important;
        background: #f6f9f3 !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 .trav47MarketNpcText {
        margin: 0 0 8px !important;
        color: #4e5c49 !important;
        font: 400 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 .trav47MarketNpcAction {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    html#mainLayout[data-trav47-layout] body #content #build.gid17 .trav47MarketNpcAction > button {
        float: none !important;
        margin: 0 !important;
    }

    body.build #content #build.gid17 table.send_res {
        float: none !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        table-layout: fixed;
    }

    body.build #content #build.gid17 table.send_res td {
        padding: 4px 2px !important;
        vertical-align: middle !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    body.build #content #build.gid17 table.send_res td.ico {
        width: 8% !important;
    }

    body.build #content #build.gid17 table.send_res td.nam {
        width: 22% !important;
    }

    body.build #content #build.gid17 table.send_res td.val {
        width: 36% !important;
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 1px !important;
    }

    body.build #content #build.gid17 table.send_res td.max {
        width: 19% !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        text-align: right !important;
        padding-right: 0 !important;
        padding-left: 1px !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }

    body.build #content #build.gid17 table.send_res td.max a {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: bold !important;
        white-space: nowrap !important;
    }

    body.build #content #build.gid17 table.send_res td.val input.text {
        width: min(86px, 100%) !important;
        height: 26px !important;
        padding: 2px 4px !important;
        box-sizing: border-box;
        text-align: center !important;
    }

    body.build #content #build.gid17 .marketSendDestination {
        clear: both;
        float: none !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        line-height: normal !important;
    }

    body.build #content #build.gid17 .marketSendDestination .boxes-contents {
        padding: 5px 8px !important;
        white-space: normal !important;
    }

    body.build #content #build.gid17,
    body.build #content #build.gid17 input,
    body.build #content #build.gid17 select,
    body.build #content #build.gid17 button,
    body.build #content #build.gid17 table,
    body.build #content #build.gid17 label {
        font-family: inherit !important;
    }

    body.build #content #build.gid17 .marketSendToRow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        overflow: visible !important;
    }

    body.build #content #build.gid17 .marketSubmitRow,
    body.build #content #build.gid17 #button.marketSubmitRow {
        display: flex !important;
        clear: both !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 9px !important;
        direction: rtl !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 8px auto 0 !important;
        text-align: center !important;
    }

    body.build #content #build.gid17 .marketSubmitRow .marketRepeatControl {
        order: 1 !important;
    }

    body.build #content #build.gid17 .marketSubmitRow button#enabledButton,
    body.build #content #build.gid17 .marketSubmitRow button#btn_ok {
        order: 2 !important;
        margin: 0 !important;
    }

    body.build #content #build.gid17 .marketVillageTargetControl {
        display: inline-flex !important;
        position: relative !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    body.build #content #build.gid17 .marketVillageTargetControl span {
        flex: 0 0 auto !important;
    }

    body.build #content #build.gid17 select.myVillageTargetSelect {
        flex: 1 1 auto !important;
        min-width: 92px !important;
        max-width: 160px !important;
        height: 28px !important;
        padding: 2px 7px 2px 24px !important;
        border: 1px solid #bfa98a !important;
        border-radius: 6px !important;
        background: linear-gradient(#fffdf8, #eee2cf) !important;
        color: #3b2818 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(70, 45, 20, 0.14) !important;
        box-sizing: border-box !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        font-size: 12px !important;
    }

    body.build #content #build.gid17 .marketVillageTargetControl:after,
    body.build #content #build.gid17 .marketRepeatControl:after {
        content: "";
        position: absolute;
        left: 9px;
        top: 50%;
        width: 0;
        height: 0;
        margin-top: -2px;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        border-top: 5px solid #6b4b24;
        pointer-events: none;
    }

    body.build #content #build.gid17 .marketDestinationLine {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 4px;
        min-width: 0;
        width: 100%;
        overflow: visible;
        padding: 5px 4px;
        border: 1px solid rgba(128, 99, 61, 0.35);
        border-radius: 6px;
        background: rgba(255, 250, 239, 0.72);
        box-sizing: border-box;
    }

    body.build #content #build.gid17 .marketDestinationLine span.or {
        flex: 0 0 auto;
        font-size: 12px;
        line-height: 24px;
    }

    body.build #content #build.gid17 .marketDestinationLine div.coordinatesInput {
        flex: 0 0 auto;
        gap: 4px;
    }

    body.build #content #build.gid17 .marketDestinationLine div.coordinatesInput div.xCoord,
    body.build #content #build.gid17 .marketDestinationLine div.coordinatesInput div.yCoord {
        gap: 2px;
    }

    body.build #content #build.gid17 .marketDestinationLine div.coordinatesInput input {
        width: 32px !important;
        height: 24px !important;
        padding: 1px 3px !important;
        box-sizing: border-box;
    }

    body.build #content #build.gid17 .marketRepeatControl {
        position: relative;
        flex: 0 0 auto;
        gap: 3px;
        font-size: 12px;
        margin: 0 !important;
    }

    body.build #content #build.gid17 .marketRepeatControl select.markgos {
        width: 42px;
        max-width: 42px;
        height: 28px;
        border: 1px solid #bfa98a !important;
        border-radius: 6px !important;
        background: linear-gradient(#fffdf8, #eee2cf) !important;
        color: #3b2818 !important;
        padding-left: 18px !important;
        padding-right: 5px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
    }

    body.build #content #build.gid17 table#target_validate th,
    body.build #content #build.gid17 table#target_validate td {
        text-align: center !important;
        vertical-align: middle !important;
    }

    body.build #content #build.gid17 .marketResourceTotal {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    body.build #content #build.gid17 .marketResourceTotalIcons {
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
    }

    body.build #content #build.gid17 .marketResourceTotalValue {
        font-weight: bold !important;
        font-size: calc(1em + 0.5px) !important;
    }

    body.build #content #build.gid17 #button:not(.marketSubmitRow) {
        display: flex;
        clear: both;
        align-items: center;
        justify-content: flex-start;
        min-height: 34px;
        margin-top: 6px;
    }

    body.build #content #build.gid17 button#enabledButton,
    body.build #content #build.gid17 button#btn_ok {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        min-width: 86px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 18px !important;
        line-height: 30px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.build #content #build.gid17 button#enabledButton .button-container,
    body.build #content #build.gid17 button#enabledButton .button-content,
    body.build #content #build.gid17 button#btn_ok .button-container,
    body.build #content #build.gid17 button#btn_ok .button-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    /* Market / send resources: a self-contained phone layout which replaces
       the legacy 50% tables and image-sliced gray boxes on all phone modes. */
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage {
        clear: both !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 22px !important;
        color: #3f4b3b !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketTraderCount {
        display: grid !important;
        float: none !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 35px !important;
        margin: 0 0 8px !important;
        padding: 7px 10px !important;
        border: 1px solid #becbb5 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #edf4e9 0%, #e2ecde 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketTraderCountLabel {
        color: #3e5238 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketTraderCountValue {
        min-width: 55px !important;
        color: #5d851d !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-align: left !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendForm,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendConfirm {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage:has(> .trav47MarketSendConfirm) > .trav47MarketTraderCount,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage:has(> .trav47MarketSendConfirm) > .clear:first-of-type {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #c5cec0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(65, 80, 57, .08) !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor > tbody > tr:not(.trav47MarketResourceDivider):not(.trav47MarketCapacityRow) > td,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor > tr:not(.trav47MarketResourceDivider):not(.trav47MarketCapacityRow) > td {
        height: 39px !important;
        padding: 4px 3px !important;
        border: 0 !important;
        border-bottom: 1px solid #e1e6de !important;
        background: #fff !important;
        color: #465241 !important;
        font-size: 11px !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor tr:nth-child(even):not(.trav47MarketResourceDivider):not(.trav47MarketCapacityRow) > td {
        background: #fafcf8 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.ico {
        width: 28px !important;
        padding-right: 6px !important;
        padding-left: 1px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.ico > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.nam {
        width: 48px !important;
        padding-right: 1px !important;
        padding-left: 4px !important;
        color: #394a34 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.val {
        width: auto !important;
        padding: 4px 2px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.val input.text {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 3px 6px !important;
        border: 1px solid #aebaa6 !important;
        border-radius: 4px !important;
        outline: 0 !important;
        background: #fff !important;
        color: #2f3d2b !important;
        box-shadow: inset 0 1px 2px rgba(55, 70, 48, .1) !important;
        font: 700 12px/21px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.val input.text:focus {
        border-color: #79a33d !important;
        box-shadow: 0 0 0 2px rgba(117, 157, 57, .14), inset 0 1px 2px rgba(55, 70, 48, .08) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.val input.disabled {
        background: #f2f4f0 !important;
        color: #697365 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.max {
        width: 63px !important;
        padding-right: 3px !important;
        padding-left: 6px !important;
        color: #778071 !important;
        font-size: 11px !important;
        text-align: left !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.max a,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor td.max b {
        color: #5d851d !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketQuickFill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        max-width: 100% !important;
        direction: ltr !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketQuickFill > a {
        order: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        font-size: clamp(9px, 2.8vw, 11px) !important;
        font-variant-numeric: tabular-nums !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketQuickFillSeparator {
        order: 2 !important;
        flex: 0 0 auto !important;
        color: #8a9285 !important;
        font-size: 11px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor tr.trav47MarketResourceDivider {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketResourceEditor tr.trav47MarketCapacityRow > td {
        padding: 0 !important;
        border: 0 !important;
        background: #f1f6ed !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacitySummary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-height: 36px !important;
        border-top: 1px solid #cad5c4 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacityItem {
        display: flex !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        color: #4e5b48 !important;
        font-size: 10px !important;
        line-height: 18px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacityItem + .trav47MarketCapacityItem {
        border-right: 1px solid #d3dbcf !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacityItem strong {
        color: #5d851d !important;
        font-size: 11px !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacityItem .merchantCapacityVisualization {
        display: inline !important;
        float: none !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketLoadItem {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: repeat(2, 18px) !important;
        align-items: center !important;
        column-gap: 5px !important;
        row-gap: 0 !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketLoadItem .trav47MarketCapacityLabel {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #4e5b48 !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketLoadItem strong,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketLoadItem #sumResources,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketLoadItem #merchantCapacityValue {
        display: block !important;
        min-width: 52px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        font-size: clamp(9px, 2.8vw, 11px) !important;
        font-variant-numeric: tabular-nums !important;
        line-height: 18px !important;
        text-align: left !important;
        text-overflow: clip !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacityItem.error,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacityItem.error strong,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacityItem .error,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCapacityItem .notEnoughMerchants {
        color: #c43124 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketSendDestination {
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketDestinationCard {
        width: 100% !important;
        overflow: hidden !important;
        border: 1px solid #c3cec0 !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(65, 80, 57, .08) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketDestinationTitle {
        width: 100% !important;
        min-height: 30px !important;
        padding: 6px 9px !important;
        border-bottom: 1px solid #cbd6c6 !important;
        background: linear-gradient(180deg, #edf4e9 0%, #e2ecde 100%) !important;
        color: #3d5038 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketSendToRow {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 8px 6px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketVillageTargetControl {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        color: #465442 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 select.myVillageTargetSelect {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 31px !important;
        margin: 0 !important;
        padding: 3px 8px 3px 25px !important;
        border: 1px solid #aebaa6 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fff 0%, #f2f5ef 100%) !important;
        color: #33402f !important;
        box-shadow: inset 0 1px 1px rgba(55, 70, 48, .07) !important;
        font: 400 11px/23px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        direction: rtl !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketVillageTargetControl::after {
        left: 17px !important;
        border-top-color: #617456 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketDestinationLine {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 8px 8px !important;
        padding: 7px 8px !important;
        overflow: visible !important;
        border: 1px solid #d2dbce !important;
        border-radius: 4px !important;
        background: #f8faf6 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketDestinationLine span.or {
        margin: 0 !important;
        color: #4b5946 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 29px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketDestinationLine .coordinatesInput {
        display: flex !important;
        float: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-width: 0 !important;
        margin: 0 !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketDestinationLine .coordinatesInput .xCoord,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketDestinationLine .coordinatesInput .yCoord {
        display: flex !important;
        float: none !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketDestinationLine .coordinatesInput label {
        color: #60705a !important;
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketDestinationLine .coordinatesInput input.text {
        width: 48px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 3px 4px !important;
        border: 1px solid #aebaa6 !important;
        border-radius: 4px !important;
        outline: 0 !important;
        background: #fff !important;
        color: #33402f !important;
        box-shadow: inset 0 1px 2px rgba(55, 70, 48, .1) !important;
        font: 700 12px/21px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCarryNote {
        width: 100% !important;
        margin: 7px 0 0 !important;
        padding: 6px 8px !important;
        border: 1px solid #d6ddd2 !important;
        border-radius: 4px !important;
        background: #f7f9f5 !important;
        color: #667061 !important;
        font-size: 10px !important;
        line-height: 17px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketCarryNote b {
        color: #557a1c !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketSubmitRow,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 #button.marketSubmitRow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 32px !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketRepeatControl {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        height: 30px !important;
        margin: 0 !important;
        color: #4c5947 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .marketRepeatControl select.markgos {
        width: 50px !important;
        max-width: 50px !important;
        height: 30px !important;
        padding: 3px 7px 3px 19px !important;
        border: 1px solid #aebaa6 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fff 0%, #f1f4ee 100%) !important;
        color: #344131 !important;
        font: 700 11px/22px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendFeedback:empty,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 #note:empty {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendFeedback:not(:empty),
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 #note:not(:empty),
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendForm + span.error {
        display: block !important;
        width: 100% !important;
        margin: 7px 0 0 !important;
        padding: 7px 9px !important;
        border: 1px solid #d8a49c !important;
        border-radius: 4px !important;
        background: #fff2ef !important;
        color: #a72f24 !important;
        font-size: 10px !important;
        line-height: 17px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary {
        width: 92% !important;
        max-width: 300px !important;
        margin: 7px auto 0 !important;
        overflow: hidden !important;
        border: 1px solid #c5cec0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 5px !important;
        background: #fff !important;
        table-layout: fixed !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResources {
        display: block !important;
        width: 92% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        border: 1px solid #c5cec0 !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(65, 80, 57, .08) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourcesHeader {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 31px !important;
        padding: 6px 9px !important;
        border-bottom: 1px solid #cbd6c6 !important;
        background: linear-gradient(180deg, #edf4e9 0%, #e2ecde 100%) !important;
        color: #3d5038 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourcesHeader strong {
        color: #5c831f !important;
        font-size: clamp(9px, 2.8vw, 11px) !important;
        font-variant-numeric: tabular-nums !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourcesList {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourceItem {
        display: grid !important;
        grid-template-columns: 18px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        min-height: 31px !important;
        padding: 4px 8px !important;
        border-bottom: 1px solid #e1e6de !important;
        border-left: 0 !important;
        background: #fff !important;
        color: #465241 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourceItem:nth-child(even) {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourceItem:only-child {
        grid-column: 1 / -1 !important;
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourceItem > i {
        justify-self: center !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourceItem > span {
        min-width: 0 !important;
        overflow: hidden !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmResourceItem > strong {
        max-width: 68px !important;
        overflow: hidden !important;
        color: #5d851d !important;
        font-size: clamp(9px, 2.8vw, 11px) !important;
        font-variant-numeric: tabular-nums !important;
        text-align: left !important;
        text-overflow: clip !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmRepeat {
        min-height: 25px !important;
        padding: 4px 8px !important;
        background: #f5f8f3 !important;
        color: #5b6756 !important;
        font-size: 10px !important;
        line-height: 17px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmRepeat strong {
        color: #5d851d !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmAction {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 32px !important;
        margin: 7px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketConfirmAction > button {
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary th,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary td {
        height: 31px !important;
        padding: 5px 8px !important;
        border: 0 !important;
        border-bottom: 1px solid #e1e6de !important;
        background: #fff !important;
        font-size: 10px !important;
        line-height: 19px !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary th {
        width: 34% !important;
        background: #f3f7f0 !important;
        color: #475542 !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary td {
        color: #3f4c3a !important;
        text-align: left !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary td > a {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary td.vil span.clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary tr.trav47MarketDurationRow th,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary tr.trav47MarketDurationRow td {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketTargetSummary tr.trav47MarketDurationRow td {
        color: #4f7818 !important;
        font-variant-numeric: tabular-nums !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage > h4 {
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 6px 9px !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px 5px 0 0 !important;
        background: linear-gradient(180deg, #edf4e8 0%, #dfeadb 100%) !important;
        color: #3b5035 !important;
        font-size: 12px !important;
        line-height: 18px !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders {
        width: 100% !important;
        margin: 0 0 4px !important;
        overflow: hidden !important;
        border: 1px solid #c5cec0 !important;
        border-top: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 0 0 5px 5px !important;
        background: #fff !important;
        table-layout: fixed !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders th,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders td {
        padding: 3px 5px !important;
        border-color: #e0e6dd !important;
        background: #fff !important;
        font-size: 10px !important;
        line-height: 16px !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders thead td {
        height: 25px !important;
        padding: 2px 4px !important;
        background: #f4f7f1 !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47TraderRouteHeader {
        display: grid !important;
        grid-template-columns: minmax(38px, auto) minmax(0, 1fr) 28px !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47TraderOwner,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47TraderRoute {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        line-height: 17px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47TraderOwner {
        max-width: 70px !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47TraderRoute {
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47TraderRepeat {
        display: block !important;
        width: 28px !important;
        color: #3f6f0e !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        font-variant-numeric: tabular-nums !important;
        line-height: 17px !important;
        text-align: left !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage > h4.trav47MarketMovementHeading {
        min-height: 29px !important;
        margin-top: 7px !important;
        padding: 5px 8px !important;
        line-height: 17px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders tbody tr:not(.res) > td {
        min-width: 0 !important;
        height: 29px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders .in,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders .at {
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders .in {
        float: left !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders .at {
        float: right !important;
        max-width: calc(100% - 70px) !important;
        overflow: hidden !important;
        color: #687262 !important;
        font-size: 9px !important;
        text-overflow: ellipsis !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketLiveTimer {
        display: inline-block !important;
        min-width: 58px !important;
        color: #426e12 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        font-variant-numeric: tabular-nums !important;
        line-height: 16px !important;
        text-align: left !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketSendPage table.traders tr.res td {
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    /* Rally Point overview phone styles live in travian-rally-overview-mobile.css. */

    body.build #content #build.gid16 table.troop_details .rallyLoot {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px 6px !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
        direction: rtl !important;
    }

    body.build #content #build.gid16 table.troop_details .rallyResourceItem {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    body.build #content #build.gid16 table.troop_details .rallyResourceItem i {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    body.build #content #build.gid16 table.troop_details .rallyCarry {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 4px auto 0 !important;
        padding: 2px 7px !important;
        border: 1px solid #c6a85f !important;
        border-radius: 9px !important;
        color: #4d3717 !important;
        background: #fff4cd !important;
        font-size: 11.5px !important;
        font-weight: bold !important;
        line-height: 14px !important;
        text-align: center !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        box-sizing: border-box !important;
    }

    body.build #content #build.gid16 table.troop_details .rallyCarry img.carry {
        float: none !important;
        margin: 0 !important;
    }

    /* Keep normal mobile pages scrollable even when desktop layout rules hide root overflow. */
    html#mainLayout:not(.travian-mobile-map-page) {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    html#mainLayout:not(.travian-mobile-map-page)::-webkit-scrollbar {
        display: none;
    }

    body:not(.map) {
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: pan-y;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Hero pages need a single fixed-height touch scroller.  Root scrolling
       is blocked by the desktop hero canvas and inventory drag handlers. */
    body.hero:not(.village1):not(.village2) #center,
    body.hero_inventory:not(.village1):not(.village2) #center,
    body.hero_adventure:not(.village1):not(.village2) #center,
    body.start_adventure:not(.village1):not(.village2) #center,
    body.hero_auction:not(.village1):not(.village2) #center {
        height: calc(100dvh - 84px) !important;
        min-height: 0 !important;
        padding-bottom: 84px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    body.hero:not(.village1):not(.village2) #center::-webkit-scrollbar,
    body.hero_inventory:not(.village1):not(.village2) #center::-webkit-scrollbar,
    body.hero_adventure:not(.village1):not(.village2) #center::-webkit-scrollbar,
    body.start_adventure:not(.village1):not(.village2) #center::-webkit-scrollbar,
    body.hero_auction:not(.village1):not(.village2) #center::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    body.hero:not(.village1):not(.village2) #center #contentOuterContainer,
    body.hero:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer,
    body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.hero_adventure:not(.village1):not(.village2) #center #contentOuterContainer,
    body.hero_adventure:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.start_adventure:not(.village1):not(.village2) #center #contentOuterContainer,
    body.start_adventure:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.hero_auction:not(.village1):not(.village2) #center #contentOuterContainer,
    body.hero_auction:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer {
        height: auto !important;
        overflow: visible !important;
    }

    body.hero_inventory:not(.village1):not(.village2) #content.hero_inventory #itemsToSale .inventory .item,
    body.hero_inventory:not(.village1):not(.village2) #content.hero_inventory #itemsToSale .inventory .item.highlight,
    body.hero_inventory:not(.village1):not(.village2) #content.hero_inventory #itemsToSale .inventory .item.whileDragging {
        touch-action: pan-y !important;
    }

    /* Keep the complete building artwork inside the space reserved to the
       left of its description. The source is a CSS sprite on a 1px image,
       so object-fit cannot prevent clipping here. */
    body.build #content #build .roundedCornersBox.big .stickyImage {
        overflow: hidden !important;
    }

    body.build #content #build .roundedCornersBox.big .stickyImage a.build_logo {
        top: 0 !important;
        left: 3px !important;
    }

    body.build #content #build .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(0.58) !important;
        transform-origin: top left !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) #descriptionAndInfo {
        min-height: 96px !important;
        padding-left: 112px !important;
        margin-bottom: 4px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage {
        top: -100px !important;
        left: 0 !important;
        width: 108px !important;
        height: 96px !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage a.build_logo {
        top: 0 !important;
        left: 6px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(0.52) !important;
        transform-origin: top left !important;
    }

    /* Match the official build header: a single tall grass panel holds the
       complete sprite at the left and leaves the text a stable reading area. */
    body.build #content #build > #descriptionAndInfo {
        min-height: 160px !important;
        padding-left: 184px !important;
        margin-bottom: 4px !important;
    }

    body.build #content #build > .roundedCornersBox.big .stickyImage {
        top: -164px !important;
        left: 8px !important;
        width: 170px !important;
        height: 154px !important;
        overflow: hidden !important;
    }

    body.build #content #build > .roundedCornersBox.big .stickyImage a.build_logo {
        top: 0 !important;
        left: 0 !important;
    }

    body.build #content #build > .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(.75) !important;
        transform-origin: top left !important;
    }

    /* Keep the troop artwork close to its square source ratio. */
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits div.action {
        grid-template-columns: 92px minmax(0, 1fr) !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits .action > .bigUnitSection {
        position: relative !important;
        align-self: stretch !important;
        width: 92px !important;
        height: auto !important;
        min-height: 70px !important;
        border: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits .action > .bigUnitSection > a:first-child {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid44) .buildActionOverview.trainUnits .action > .bigUnitSection img.unitSection {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        transform: none !important;
        background-position: center !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }


}

/* Final full-play rail header reset: declared at the end to win after load. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops tbody tr {
        box-sizing: border-box !important;
        min-height: 24px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.ico img {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: calc(100% - 20px) !important;
        box-sizing: border-box !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        overflow: hidden !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num.trav47TroopNumberTight {
        font-size: 12px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num.trav47TroopNumberVeryTight {
        font-size: 10px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.num {
        font-size: 12.5px !important;
    }

    /* The troops card must grow with every present/reinforcing unit row. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops tbody {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements .dur_r,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements .dur_l {
        font-size: 10.5px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements {
        margin-bottom: 3px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements .boxes-contents,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents {
        padding-top: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead tr,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead tr,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead tr,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead th,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead th,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead th {
        margin-top: 0 !important;
        padding-top: 0 !important;
        transform: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .trav47RailCardTitle {
        display: block !important;
        width: 100% !important;
        height: 14px !important;
        margin: 0 0 2px !important;
        padding: 0 !important;
        color: #513a1f !important;
        font-size: 12px !important;
        font-weight: normal !important;
        line-height: 14px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .trav47RailCardTitle {
        box-sizing: border-box !important;
        padding-right: 3px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements .boxes-contents::before,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents::before {
        content: none !important;
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops {
        margin-top: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production thead,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops thead {
        display: none !important;
    }

    /* Authoritative phone production card.  It uses the narrow rail without
       compressing the resource names or clipping seven-digit production. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents {
        padding: 0 1px 4px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionHeading {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 3px !important;
        width: 100% !important;
        height: 22px !important;
        min-height: 22px !important;
        margin: 0 0 2px !important;
        padding: 0 1px 0 2px !important;
        direction: rtl !important;
        line-height: 22px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionHeading > span {
        min-width: 0 !important;
        color: #513a1f !important;
        font-size: 11px !important;
        line-height: 22px !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionBoostBadge {
        position: static !important;
        inset: auto !important;
        float: none !important;
        display: inline-flex !important;
        flex: 0 0 42px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 20px !important;
        min-height: 20px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        border: 1px solid #8e6b16 !important;
        border-radius: 4px !important;
        color: #4b3605 !important;
        background: linear-gradient(180deg, #fff2aa 0%, #e2b82f 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 1px 1px rgba(72,50,5,.24) !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 0 rgba(255,248,202,.78) !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionBoostBadge :is(.button-container, .button-content) {
        display: inline !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 18px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionBoostBadge :is(.button-background, .goldIcon) {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-spacing: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody tr {
        display: grid !important;
        grid-template-columns: 17px 33px minmax(0, 1fr) !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 22px !important;
        margin: 0 0 2px !important;
        padding: 0 1px !important;
        border: 0 !important;
        border-radius: 3px !important;
        background: linear-gradient(to left, rgba(239,245,232,.96), rgba(248,250,244,.96)) !important;
        box-sizing: border-box !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody tr:last-child {
        margin-bottom: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production tbody td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        line-height: 20px !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico {
        grid-column: 1 !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico div {
        position: relative !important;
        isolation: isolate;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico div i {
        position: relative !important;
        z-index: 1 !important;
        display: inline-block !important;
        transform: scale(.875) !important;
        transform-origin: center !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico div img.productionBoost {
        top: -2px !important;
        right: -1px !important;
        z-index: 3 !important;
        display: block !important;
        pointer-events: none !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.res {
        grid-column: 2 !important;
        color: #536249 !important;
        font-size: 10px !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.num {
        grid-column: 3 !important;
        direction: ltr !important;
        color: #2f4650 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        font-variant-numeric: tabular-nums !important;
        text-align: left !important;
        text-overflow: clip !important;
    }
}

/* Production boost on the two web-on-phone layouts.
   Its DOM and selectors are intentionally independent from the old payment popup. */
@media screen and (max-width: 760px) {
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog {
        position: fixed !important;
        z-index: 2005 !important;
        top: 210px !important;
        right: 139px !important;
        left: auto !important;
        width: min(228px, calc(100vw - 147px)) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.travianMobile .dialog.trav47ProductionBoostDialog {
        right: auto !important;
        left: 139px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog :is(
        .dialog-background-tl,
        .dialog-background-tc,
        .dialog-background-tr,
        .dialog-background-ml,
        .dialog-background-mr,
        .dialog-background-bl,
        .dialog-background-bc,
        .dialog-background-br,
        .dialog-dragbar,
        .dialog-info,
        .title,
        .buttons
    ) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog::before,
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog::after,
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .dialog-container::before,
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .dialog-container::after,
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .dialog-contents::before,
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .dialog-contents::after {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog :is(
        .dialog-container,
        .dialog-contents,
        .dialog-contents > form,
        #dialogContent,
        #dialogContent > .content
    ) {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .dialog-contents {
        max-height: calc(100dvh - 284px) !important;
        overflow: hidden !important;
        border: 1px solid #72867d !important;
        border-radius: 7px !important;
        background: #eef3ef !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 9px rgba(39, 50, 43, .28) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog #dialogContent > .content {
        max-height: calc(100dvh - 286px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: #84978d transparent !important;
        -webkit-overflow-scrolling: touch;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostWindow {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 5px 5px !important;
        color: #304239 !important;
        background: #eef3ef !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostHeader {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        width: calc(100% + 10px) !important;
        height: 32px !important;
        margin: 0 -5px 5px !important;
        padding: 4px 5px !important;
        border: 0 !important;
        border-bottom: 1px solid #a5b5aa !important;
        background: linear-gradient(180deg, #f7faf4 0%, #e5eee5 100%) !important;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .78) !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostTitle {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #30463b !important;
        font: 700 12px/22px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 0 #fff !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostBalance {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        min-width: 35px !important;
        max-width: 57px !important;
        height: 21px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        color: #655017 !important;
        border: 1px solid #c2a950 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #fff9d9, #eadd9c) !important;
        font: 700 9px/19px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostBalance > * {
        position: static !important;
        float: none !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostBalanceIcon {
        display: inline-block !important;
        flex: 0 0 12px !important;
        width: 12px !important;
        height: 12px !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog #dialogCancelButton.iconButton.small.cancel {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostClose {
        position: static !important;
        display: grid !important;
        flex: 0 0 21px !important;
        order: 3 !important;
        place-items: center !important;
        width: 21px !important;
        min-width: 21px !important;
        height: 21px !important;
        min-height: 21px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #fff !important;
        border: 1px solid #355d16 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #7cab3f, #4f7f1d) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 1px rgba(37, 58, 31, .22) !important;
        font: 700 17px/18px Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px rgba(26, 51, 23, .5) !important;
        cursor: pointer !important;
        appearance: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostList {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostCard {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 60px !important;
        align-items: center !important;
        column-gap: 4px !important;
        width: 100% !important;
        min-height: 57px !important;
        margin: 0 !important;
        padding: 4px !important;
        overflow: hidden !important;
        border: 1px solid #b6c6bb !important;
        border-radius: 6px !important;
        background: linear-gradient(100deg, #f9fbf7 0%, #edf4ee 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86) !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon {
        display: block !important;
        grid-column: 1 !important;
        width: 38px !important;
        height: 35px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        background-image: url("../../images/payment/productionBoostPopupIcons.png") !important;
        background-repeat: no-repeat !important;
        background-size: 38px auto !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostWood {
        background-position: 0 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostClay {
        background-position: 0 -35px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostIron {
        background-position: 0 -70px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostCrop {
        background-position: 0 -105px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostInfo {
        position: static !important;
        display: flex !important;
        grid-column: 2 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostName {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #293d33 !important;
        font: 700 10px/15px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostStatus {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #66796e !important;
        font: 400 9px/14px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostCountdown {
        display: block !important;
        overflow: hidden !important;
        color: #4f7327 !important;
        font-weight: 700 !important;
        direction: rtl !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47ProductionBoostUrgent {
        color: #a44a29 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47ProductionBoostExpired {
        color: #8c2d26 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostAction {
        position: static !important;
        display: flex !important;
        grid-column: 3 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostButton {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 0 3px !important;
        overflow: hidden !important;
        color: #fff !important;
        border: 1px solid #416f0d !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #86bd40, #5f9417) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 1px rgba(45, 69, 33, .2) !important;
        font: 700 9px/22px Tahoma, Arial, sans-serif !important;
        text-shadow: 0 1px 1px rgba(26, 55, 20, .5) !important;
        white-space: nowrap !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostButton.trav47BoostActivation {
        color: #513d08 !important;
        border-color: #9c7b16 !important;
        background: linear-gradient(180deg, #f7e66d, #e4bf1d) !important;
        text-shadow: 0 1px 0 rgba(255, 252, 213, .65) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog :is(
        .trav47BoostButtonLabel,
        .trav47BoostButtonCost
    ) {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostGoldIcon {
        position: static !important;
        display: inline-block !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 12px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostAutoRenew {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 13px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #53685c !important;
        font: 400 8px/13px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostAutoRenew > :is(input, label) {
        position: static !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostAutoRenew input {
        width: 11px !important;
        height: 11px !important;
        accent-color: #668f28 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostDuration {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #6a796f !important;
        font: 400 8px/11px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostNote {
        display: block !important;
        width: 100% !important;
        max-height: 31px !important;
        margin: 5px 0 0 !important;
        padding: 4px 5px !important;
        overflow: hidden !important;
        color: #6a7b71 !important;
        border: 1px solid #c9d5cd !important;
        border-radius: 5px !important;
        background: rgba(255, 255, 255, .55) !important;
        font: 400 8px/11px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostLoading {
        display: block !important;
        min-height: 0 !important;
        padding: 0 5px 5px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonBalance,
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonIcon,
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonInfo > i,
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonAction {
        display: block !important;
        border: 0 !important;
        border-radius: 5px !important;
        background: linear-gradient(90deg, #dce6df 20%, #f5f8f5 50%, #dce6df 80%) !important;
        background-size: 220% 100% !important;
        animation: trav47BoostSkeletonPulse 1s linear infinite !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonBalance {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 19px !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonIcon {
        grid-column: 1 !important;
        width: 34px !important;
        height: 32px !important;
        justify-self: center !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonInfo {
        display: flex !important;
        grid-column: 2 !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonInfo > i {
        width: 90% !important;
        height: 8px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonInfo > i:last-child {
        width: 66% !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostSkeletonAction {
        grid-column: 3 !important;
        width: 100% !important;
        height: 24px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostLoadingText {
        display: block !important;
        margin: 4px 0 0 !important;
        color: #718078 !important;
        font: 400 9px/15px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    @keyframes trav47BoostSkeletonPulse {
        from {
            background-position: 100% 0;
        }
        to {
            background-position: -100% 0;
        }
    }
}

@media screen and (max-width: 359px) {
    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog {
        top: 208px !important;
        right: 131px !important;
        width: calc(100vw - 139px) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.travianMobile .dialog.trav47ProductionBoostDialog {
        right: auto !important;
        left: 131px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostCard {
        grid-template-columns: 34px minmax(0, 1fr) 55px !important;
        column-gap: 3px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon {
        width: 34px !important;
        height: 34px !important;
        background-size: 34px auto !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostClay {
        background-position-y: -31px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostIron {
        background-position-y: -63px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.travianMobile .dialog.trav47ProductionBoostDialog .trav47BoostIcon.productionBoostCrop {
        background-position-y: -94px !important;
    }
}

/* Side drawers show their own cards; they do not need a beige page behind them. */
@media screen and (max-width: 1024px) {
    /* Retired paper-card implementation for both phone drawers. */
    @media not all {
    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarBeforeContent,
    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarAfterContent {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* نسخة الويب على الهاتف: لوحة المعلومات تحتاج عرضاً صالحاً للقراءة،
       لا العمود الضيق القديم ذي 170 بكسل. */
    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarBeforeContent {
        width: min(72vw, 290px) !important;
        max-width: min(72vw, 290px) !important;
        padding: 8px 6px 16px !important;
    }

    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarBeforeContent .sidebarBox,
    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarBeforeContent .sidebarBox > .content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarBeforeContent .sidebarBox > .content {
        font-size: 12px !important;
        line-height: 17px !important;
    }

    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarBeforeContent .sidebarBox .boxTitle {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarBeforeContent .sidebarBox :is(p, li, li a, .name, .timer) {
        font-size: 12px !important;
        line-height: 17px !important;
    }

    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarBeforeContent #sidebarBoxLinklist .content ul li a {
        grid-template-columns: 14px minmax(0, 1fr) !important;
        min-height: 26px !important;
    }

    /* أعطِ بطاقات قائمة القرى في اليسار الترويسة والإطار نفسيهما، بدلاً من
       ظهور المحتوى ككتلة عائمة عند استخدام نسخة الويب على الهاتف. */
    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarAfterContent .sidebarBox {
        margin: 0 0 9px !important;
        border: 0 !important;
        border-radius: 5px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarAfterContent .sidebarBox > .header {
        display: flex !important;
        align-items: center;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 3px 7px !important;
        border: 2px solid #745239 !important;
        border-bottom: 1px solid #8e6845 !important;
        border-radius: 5px 5px 0 0 !important;
        background: linear-gradient(180deg, #fff3d8 0%, #dab98b 50%, #a97854 100%) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.7) !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarAfterContent .sidebarBox > .header .buttonsWrapper {
        display: flex !important;
        align-items: center;
        gap: 4px;
        min-height: 22px;
    }

    html[data-trav47-layout="desktop"] body.travianMobile #center #sidebarAfterContent .sidebarBox > .content {
        border: 2px solid #745239 !important;
        border-top: 0 !important;
        border-radius: 0 0 5px 5px !important;
        background: radial-gradient(circle at 82% 12%, rgba(255,255,255,.68), transparent 35%), linear-gradient(135deg, #fff6e2 0%, #efd3a6 53%, #d8b27c 100%) !important;
        box-shadow: inset 0 0 0 2px rgba(255,250,232,.7), 0 1px 2px rgba(37,24,15,.3) !important;
    }

    /* نسخة الويب لا تضع فئة travianMobile على body. لذلك كانت القاعدة السابقة
       تصل فقط إلى بطاقة الإدارة في بعض الحالات، بينما تبقى بطاقة اللاعب
       وبطاقة القرى محكومة بقواعد الهاتف العامة التي تخفي ترويساتهما. */
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxActiveVillage,
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist {
        margin: 0 0 9px !important;
        border: 0 !important;
        border-radius: 5px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* استخدم ورق وإطار بطاقات اللوحة اليمنى نفسيهما، لا بطاقة الهاتف
       الذهبية التي كانت تغطيهما. */
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxActiveVillage:before,
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist:before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        bottom: 2px !important;
        left: 5px !important;
        z-index: 0 !important;
        border-style: solid !important;
        border-width: 28px 30px 30px 34px !important;
        border-image: url("../../images/ui/boxes/default_paper.png") 28 30 30 34 fill stretch !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxActiveVillage > .header,
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header {
        display: flex !important;
        align-items: center;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 10px 35px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 3 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .buttonsWrapper,
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .layoutButton {
        position: relative !important;
        z-index: 4 !important;
        pointer-events: auto !important;
    }

    /* عنوان القرى وأزرارها في ترويسة واحدة: العنوان يميناً والأزرار يساراً. */
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header {
        justify-content: space-between !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .villageListTitle {
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #61332b !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 30px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .buttonsWrapper {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 0 !important;
        min-height: 30px !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .layoutButton {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .layoutButton svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* في سطح المكتب فقط: الترويسة أصبحت داخل الورقة نفسها، لذلك لا نترك
       الترويسة القديمة الفارغة، ونثبت العنوان والأيقونتين في صف واحد. */
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 30px !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .villageListTitle {
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #61332b !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 30px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .buttonsWrapper {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: 3px !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .layoutButton {
        position: relative !important;
        z-index: 4 !important;
        display: inline-flex !important;
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        float: none !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }

    /* شريط النقاط الحضارية يبدأ مباشرة بعد فاصل الترويسة، وبسماكة أخف. */
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content {
        padding-top: 5px !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .content .expansionSlotInfo {
        margin-bottom: 5px !important;
        padding-bottom: 8px !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .content .expansionSlotInfo .barWrapper {
        height: 7px !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .content .expansionSlotInfo .barWrapper .bar {
        height: 5px !important;
    }

    /* إجراءات القرية: زر صغير بين الاسم والإحداثيات، مع قائمة فوق الصف. */
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .content ul li {
        overflow: visible !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsToggle {
        position: absolute !important;
        top: 50% !important;
        left: 75px !important;
        z-index: 8 !important;
        display: inline-flex !important;
        width: 22px !important;
        height: 22px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #6e7476 !important;
        border-radius: 50% !important;
        color: #f8faf9 !important;
        background: linear-gradient(180deg, #9aa1a3 0%, #687174 100%) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.48), 0 1px 2px rgba(0,0,0,.28) !important;
        cursor: pointer !important;
        transform: translateY(-50%) !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsToggle svg {
        width: 14px !important;
        height: 14px !important;
        fill: currentColor !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu {
        position: absolute !important;
        bottom: calc(100% + 4px) !important;
        left: 4px !important;
        z-index: 12 !important;
        display: grid !important;
        min-width: 164px !important;
        max-width: min(250px, calc(100vw - 18px)) !important;
        overflow: hidden !important;
        border: 14px solid transparent !important;
        border-image: url("../../images/ui/boxes/default_paper.png") 28 30 30 34 fill stretch !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: 0 2px 6px rgba(45,31,17,.36) !important;
        direction: rtl !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu[hidden] {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist.villageActionsOpen > .content {
        z-index: 6 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu .villageActionsTitle {
        min-width: 0 !important;
        padding: 1px 3px 6px !important;
        border-bottom: 1px solid rgba(93,67,42,.32) !important;
        color: #61332b !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu .villageActionsTitle span {
        display: inline-block !important;
        max-width: 118px !important;
        margin-right: 3px !important;
        padding: 0 4px !important;
        overflow: hidden !important;
        border-radius: 2px !important;
        color: #4f5e43 !important;
        background: rgba(164, 192, 132, .24) !important;
        text-overflow: ellipsis !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu > :is(a, span.disabled) {
        display: block !important;
        min-height: 27px !important;
        padding: 5px 8px !important;
        border-bottom: 1px solid rgba(93,67,42,.2) !important;
        color: #513d2e !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu > :is(a, span.disabled):last-child {
        border-bottom: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu a:hover {
        background: rgba(255,250,232,.72) !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu .disabled {
        color: #8c9497 !important;
        background: rgba(115,108,96,.12) !important;
        cursor: not-allowed !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxActiveVillage > .header:after,
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header:after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        right: 25px !important;
        bottom: 0 !important;
        left: 25px !important;
        height: 2px !important;
        opacity: .5 !important;
        border-style: solid !important;
        border-width: 0 38px 2px 70px !important;
        border-image: url("../../images/ui/boxes/default_separator.png") 0 38 2 70 round !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxActiveVillage > .content,
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* على الهاتف لا نكرر روابط السوق والثكنة والإسطبل والورشة داخل بطاقة اللاعب؛
       الوصول إليها موجود في واجهة الهاتف الأساسية. */
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxActiveVillage > .header,
    body #center #sidebarAfterContent #sidebarBoxActiveVillage > .header {
        display: none !important;
    }

    /* اترك مسافة واضحة تحت أيقونات الترويسة في نسخة الويب على الهاتف. */
    html[data-trav47-layout="desktop"] body #center #sidebarAfterContent {
        top: 93px !important;
        left: -10px !important;
        width: min(271px, calc(85vw - 42px)) !important;
        max-width: min(271px, calc(85vw - 42px)) !important;
    }

    /* اللوحة اليمنى تستخدم الورق والحجم نفسيهما في لوحة القرى اليسرى. */
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent {
        top: 93px !important;
        right: -10px !important;
        width: min(271px, calc(85vw - 42px)) !important;
        max-width: min(271px, calc(85vw - 42px)) !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) {
        margin: 0 0 9px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist):before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        bottom: 2px !important;
        left: 5px !important;
        z-index: 0 !important;
        border-style: solid !important;
        border-width: 28px 30px 30px 34px !important;
        border-image: url("../../images/ui/boxes/default_paper.png") 28 30 30 34 fill stretch !important;
        background: transparent !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .header {
        position: relative !important;
        z-index: 1 !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 10px 35px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .header:after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        right: 25px !important;
        bottom: 0 !important;
        left: 25px !important;
        height: 2px !important;
        opacity: .5 !important;
        border-style: solid !important;
        border-width: 0 38px 2px 70px !important;
        border-image: url("../../images/ui/boxes/default_separator.png") 0 38 2 70 round !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .content {
        position: relative !important;
        z-index: 1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .content:before {
        display: none !important;
    }

    /*
     * The game wraps sidebar cards in .sidebarBoxInnerBox after the page is
     * rendered. That wrapper owns the original dark/brown border, so styling
     * only the card itself leaves the legacy frame visible above the paper.
     */
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .sidebarBoxInnerBox {
        position: relative !important;
        z-index: 3 !important;
        background: transparent !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .sidebarBoxInnerBox:after,
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .sidebarBoxInnerBox > .content:before {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .sidebarBoxInnerBox > .header {
        position: relative !important;
        z-index: 1 !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 10px 35px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .sidebarBoxInnerBox > .header:after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        right: 25px !important;
        bottom: 0 !important;
        left: 25px !important;
        height: 2px !important;
        opacity: .5 !important;
        border-style: solid !important;
        border-width: 0 38px 2px 70px !important;
        border-image: url("../../images/ui/boxes/default_separator.png") 0 38 2 70 round !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxAlliance, #sidebarBoxAllianceNoNews, #sidebarBoxLinklist) > .sidebarBoxInnerBox > .content {
        position: relative !important;
        z-index: 1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .header .buttonsWrapper {
        position: absolute !important;
        top: 9px !important;
        left: 35px !important;
        z-index: 2 !important;
        display: block !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .header .buttonsWrapper .layoutButton.edit {
        position: static !important;
        float: none !important;
        display: grid !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .header .buttonsWrapper .layoutButton.edit svg {
        width: 12px !important;
        height: 15px !important;
    }

    /* The labels now live in the actual header, so they remain inside the
       paper regardless of whether the game adds its inner sidebar wrapper. */
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxLinklist) .header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxLinklist) .header > .boxTitle {
        position: static !important;
        z-index: 2 !important;
        margin: 0 !important;
        color: #4d3826 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 30px !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .header > .messageShortInfo {
        position: static !important;
        z-index: 2 !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 3px !important;
        height: 20px !important;
        margin: 0 !important;
        color: #664629 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox .header > .messageShortInfo svg {
        width: 17px !important;
        height: 13px !important;
        fill: #e39a37 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .header .buttonsWrapper {
        position: static !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* The link-list edit control is an anchor, so it keeps the legacy
       buttonFramed background unless it is explicitly reset. */
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist #buttonSbCOS5JTM2euX {
        position: static !important;
        display: inline-flex !important;
        width: 18px !important;
        height: 22px !important;
        min-width: 18px !important;
        min-height: 22px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist #buttonSbCOS5JTM2euX:before,
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist #buttonSbCOS5JTM2euX:after {
        display: none !important;
        content: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist #buttonSbCOS5JTM2euX svg {
        position: static !important;
        display: block !important;
        width: 12px !important;
        height: 15px !important;
        transform: none !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist #buttonSbCOS5JTM2euX {
        border: 1px solid #8c641f !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fff3bf 0%, #e2b94d 100%) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 1px 1px rgba(78,50,11,.2) !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist #buttonSbCOS5JTM2euX svg .outline {
        fill: #784d17 !important;
        stroke: #784d17 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist #buttonSbCOS5JTM2euX svg .icon {
        fill: #fff9db !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 8px !important;
        min-height: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > ul > li {
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > ul > li > a {
        min-height: 22px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        line-height: 18px !important;
    }

    /* Keep the two real header rows on the same paper tone as their cards. */
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxLinklist) > .header,
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxLinklist) > .sidebarBoxInnerBox > .header {
        background: #f6e7c2 !important;
    }
    }

    /* Gold shop: the payment wizard used its own brown legacy frame, rather
       than the cool silver dialog language used by the other mobile dialogs. */
    .dialog.travianPaymentShop {
        width: min(calc(100vw - 20px), 410px) !important;
        max-width: min(calc(100vw - 20px), 410px) !important;
        max-height: calc(100dvh - 16px) !important;
        direction: rtl !important;
        color: #38505d !important;
    }

    .dialog.travianPaymentShop .dialog-background-tl,
    .dialog.travianPaymentShop .dialog-background-tr,
    .dialog.travianPaymentShop .dialog-background-tc,
    .dialog.travianPaymentShop .dialog-background-ml,
    .dialog.travianPaymentShop .dialog-background-mr,
    .dialog.travianPaymentShop .dialog-background-mc,
    .dialog.travianPaymentShop .dialog-background-bl,
    .dialog.travianPaymentShop .dialog-background-br,
    .dialog.travianPaymentShop .dialog-background-bc {
        display: none !important;
    }

    .dialog.travianPaymentShop .dialog-container,
    .dialog.travianPaymentShop .dialog-contents {
        width: 100% !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 16px) !important;
        border: 1px solid #91acb8 !important;
        border-radius: 8px !important;
        background: linear-gradient(180deg, #fbfdfe 0%, #e7f0f4 100%) !important;
        box-shadow: 0 3px 12px rgba(12, 29, 39, .42) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop #dialogContent {
        width: 100% !important;
        max-height: calc(100dvh - 18px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop #paymentWizard.travian47ShopWizard {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 9px 9px 12px !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop #paymentWizard .header {
        position: static !important;
        order: -2 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 7px !important;
        padding: 0 40px 7px 0 !important;
        border-bottom: 1px solid #b7cbd4 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop #paymentWizard .header > ul {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .dialog.travianPaymentShop #paymentWizard .header li,
    .dialog.travianPaymentShop #paymentWizard .header .tabButton {
        width: auto !important;
        min-width: 0 !important;
        height: 31px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border: 1px solid #9db5c0 !important;
        border-radius: 4px !important;
        background: linear-gradient(#f9fcfd, #d8e6ec) !important;
        color: #38505d !important;
        box-shadow: inset 0 1px rgba(255,255,255,.9) !important;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop #paymentWizard .header .tabButton {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .dialog.travianPaymentShop #paymentWizard .header li.active .tabButton {
        border-color: #6e9bac !important;
        background: linear-gradient(#d6ebf2, #a9cbd8) !important;
        color: #244653 !important;
        box-shadow: inset 0 1px rgba(255,255,255,.95), 0 1px 2px rgba(39,74,88,.2) !important;
    }

    .dialog.travianPaymentShop #paymentWizard .header .tabButton .text {
        display: block !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .dialog.travianPaymentShop #paymentWizard .accountBalance {
        order: -1 !important;
        align-self: flex-start !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        min-height: 25px !important;
        margin: 0 0 8px !important;
        padding: 2px 8px !important;
        border: 1px solid #b9cbd3 !important;
        border-radius: 4px !important;
        background: rgba(255,255,255,.7) !important;
        color: #38505d !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop #paymentWizard .contentWrapper,
    .dialog.travianPaymentShop #paymentWizard .contentBorder.contentArea {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop #paymentWizard .contentArea > h4 {
        margin: 0 0 7px !important;
        padding: 0 0 6px !important;
        border-bottom: 1px solid #bed0d8 !important;
        color: #38505d !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    .dialog.travianPaymentShop .trav47ShopPackageGrid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackage {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-width: 0 !important;
        min-height: 238px !important;
        margin: 0 !important;
        padding: 7px !important;
        border: 1px solid #a9c1cb !important;
        border-radius: 6px !important;
        background: linear-gradient(180deg, #ffffff 0%, #edf4f7 100%) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.95) !important;
        color: #38505d !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageName {
        min-width: 0 !important;
        color: #38505d !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageMeta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 28px !important;
        margin: 3px 0 4px !important;
        color: #765322 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageGoldIcon {
        width: 25px !important;
        height: 25px !important;
        margin-left: 3px !important;
        vertical-align: middle !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageImage {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 115px !important;
        margin: 0 0 6px !important;
        border: 1px solid #c4d5db !important;
        border-radius: 4px !important;
        background: rgba(255,255,255,.5) !important;
        overflow: hidden !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageImage img {
        max-width: 100px !important;
        max-height: 100px !important;
        width: auto !important;
        height: auto !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackagePrice {
        margin: 0 0 5px !important;
        color: #38505d !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
        text-align: center !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageButton {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 29px !important;
        padding: 0 7px !important;
        border: 1px solid #2b4b0d !important;
        border-radius: 4px !important;
        background: linear-gradient(#82b93a, #4b7f13) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-shadow: 0 1px rgba(0,0,0,.35) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.32), 0 1px 2px rgba(0,0,0,.18) !important;
        box-sizing: border-box !important;
    }

    .dialog.travianPaymentShop .trav47PaymentClose {
        position: absolute !important;
        z-index: 5 !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #9eb8c4 !important;
        border-radius: 4px !important;
        background: linear-gradient(#ffffff, #dbe8ed) !important;
        color: #b43b2f !important;
        font-size: 25px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    /* Keep the phone packages visually identical to the desktop shop cards. */
    .dialog.travianPaymentShop .trav47ShopPackageGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackage {
        position: relative !important;
        min-height: 205px !important;
        padding: 9px 7px 7px !important;
        overflow: hidden !important;
        border: 2px solid #d19a2b !important;
        border-radius: 5px !important;
        background: radial-gradient(circle at 50% 54%, rgba(91,232,224,.28) 0%, rgba(91,232,224,0) 52%), linear-gradient(180deg, #006066 0%, #004c52 100%) !important;
        color: #fff !important;
        isolation: isolate;
    }

    .dialog.travianPaymentShop .trav47GoldPackage:nth-child(3n + 1) {
        border-color: #e0ad35 !important;
        background: radial-gradient(circle at 50% 54%, rgba(255,232,136,.32) 0%, rgba(255,232,136,0) 50%), linear-gradient(180deg, #bd7b12 0%, #d79c25 54%, #aa6809 100%) !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageName,
    .dialog.travianPaymentShop .trav47GoldPackageButton {
        display: none !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageGlow {
        position: absolute !important;
        z-index: 0 !important;
        top: 38px !important;
        right: 50% !important;
        width: 148px !important;
        height: 148px !important;
        opacity: .84 !important;
        transform: translateX(50%) !important;
        pointer-events: none !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageMeta {
        position: relative !important;
        z-index: 1 !important;
        order: 1 !important;
        min-height: 25px !important;
        margin: 0 !important;
        direction: ltr !important;
        color: #f0d18a !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        line-height: 25px !important;
        text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageGoldIcon {
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 0 0 5px !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageImage {
        position: relative !important;
        z-index: 1 !important;
        order: 2 !important;
        min-height: 102px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackageImage img {
        max-width: 88px !important;
        max-height: 94px !important;
        filter: drop-shadow(0 3px 3px rgba(14,11,4,.28)) !important;
    }

    .dialog.travianPaymentShop .trav47GoldPackagePrice {
        position: relative !important;
        z-index: 1 !important;
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 31px !important;
        margin: auto -7px -7px !important;
        border-top: 1px solid rgba(255,255,255,.16) !important;
        background: rgba(10,22,23,.5) !important;
        color: #e9e1cc !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }
}

/* Tablet only: preserve the responsive game shell, enlarge just Dorf 1's
   field scene, and keep regular content pages as centred panels. */
@media screen and (min-width: 761px) and (max-width: 1024px) {
    /* Tablet HUD only.  Keep Dorf's side cards untouched: this applies just
       to the top resource stores, currency/time capsules, and navigation. */
    body {
        --travian-mobile-nav-button-size: 62px;
        --travian-mobile-nav-icon-scale: 0.888;
        --travian-mobile-currency-width: 126px;
        --travian-mobile-servertime-width: 130px;
    }

    /* Keep the existing tablet footer width; only the upper HUD was unified. */
    body #topBar {
        right: 0 !important;
        left: 0 !important;
        width: 80vw !important;
        max-width: 960px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        transform: none !important;
    }

    body #topBar #header {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    /* Tablet village rail: give movements, production and troops 20% more
       usable width, then scale the actual content rather than the whole rail. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details {
        width: min(148px, calc(37.8vw - 2px)) !important;
        max-width: min(148px, calc(37.8vw - 2px)) !important;
        top: var(--travian-mobile-scene-top, 152px) !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements {
        width: min(320px, calc(100vw - 180px)) !important;
        max-width: 320px !important;
        max-height: 142px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details > .movements {
        top: 104px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents {
        max-height: 142px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList .boxes-contents {
        padding: 6px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .trav47RailCardTitle {
        height: 17px !important;
        margin-bottom: 3px !important;
        font-size: 14.4px !important;
        line-height: 17px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table {
        font-size: 13.2px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production {
        width: calc(37.8vw - 6px) !important;
        min-width: calc(37.8vw - 6px) !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.num {
        font-size: 15.6px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico i {
        transform: scale(1.05) !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops tbody tr {
        min-height: 29px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.ico img {
        transform: scale(1.2) !important;
        transform-origin: center !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num {
        max-width: calc(100% - 24px) !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        font-size: 16.8px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num.trav47TroopNumberTight {
        font-size: 14.4px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num.trav47TroopNumberVeryTight {
        font-size: 12px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody tr {
        grid-template-columns: 34px minmax(0, 1fr) max-content !important;
        grid-template-rows: 22px !important;
        min-height: 22px !important;
        column-gap: 4px !important;
        padding: 0 3px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements tbody td.typ {
        width: 34px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements .mov {
        font-size: 13.2px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements .dur_r,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#movements .dur_l {
        font-size: 12.6px !important;
    }

    /* The hero is part of the same tablet HUD and leaves the same ten-pixel
       chat-capsule allowance as the three phone layouts. */
    body.village1 #topBarHeroWrapper,
    body.village2 #topBarHeroWrapper {
        top: 74px !important;
        width: 144px !important;
        height: 173px !important;
    }

    body.village1 #topBarHeroWrapper #topBarHero,
    body.village2 #topBarHeroWrapper #topBarHero {
        transform: scale(1.08) !important;
    }

    html[data-trav47-layout] body.village1 div.village1 #resourceFieldContainer {
        transform: translateX(-50%) scale(1.10) !important;
    }

    body:not(.village1):not(.village2):not(.trav47ReportsPage):not(.map):not(.login):not(.logout):not(.activate):not(.error_site) #center #contentOuterContainer {
        float: none !important;
        width: 70% !important;
        min-width: 0 !important;
        max-width: 590px !important;
        margin: 30px auto 16px !important;
    }

    body:not(.village1):not(.village2):not(.map) #center #contentOuterContainer .contentContainer,
    body:not(.village1):not(.village2):not(.map) #center #contentOuterContainer #content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Keep every rally-point tab inside one stable tablet window. */
    body.build.rallyPointPage:not(.village1):not(.village2) #center,
    body.build.rallyPointPage:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.build.rallyPointPage:not(.village1):not(.village2) #center #contentOuterContainer #content,
    body.build.rallyPointPage:not(.village1):not(.village2) #center #contentOuterContainer #content #build.gid16 {
        min-height: 720px !important;
        box-sizing: border-box;
    }

    /* Larger tablet workspace for every building and resource-field page. */
    body.build:not(.village1):not(.village2) #center #contentOuterContainer {
        width: min(600px, calc(100vw - 16px)) !important;
        max-width: 600px !important;
    }

    body.build:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.build:not(.village1):not(.village2) #center #contentOuterContainer #content {
        min-height: 450px !important;
    }

    body.build #content,
    body.build #content p,
    body.build #content .description,
    body.build #content .buildingDescription,
    body.build #content .statusMessage,
    body.build #content span.none {
        font-size: 15px !important;
    }

    body.build #content h4 {
        font-size: 17px !important;
    }

    body.build #content button,
    body.build #content .textButtonV1,
    body.build #content input,
    body.build #content select {
        min-height: 30px !important;
        font-size: 14px !important;
    }

    body.build #content .upgradeButtonsContainer button.textButtonV1,
    body.build #content .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        line-height: 32px !important;
        font-size: 14px !important;
    }

    body.build #content .inlineIcon i,
    body.build #content img.unit,
    body.build #content .goldIcon {
        transform: scale(1.125) !important;
        transform-origin: center !important;
    }

    body.build #content #build .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(0.591) !important;
        transform-origin: top left !important;
    }

    /* Keep one fixed, viewport-safe hero window.  Attribute details scroll
       inside the paper instead of stretching the frame over the HUD/footer. */
    html[data-trav47-layout="desktop"] body.hero:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    html[data-trav47-layout="desktop"] body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    html[data-trav47-layout="desktop"] body.hero_adventure:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    html[data-trav47-layout="desktop"] body.hero_auction:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    html[data-trav47-layout="desktop"] body.hero:not(.village1):not(.village2) #center #contentOuterContainer #content,
    html[data-trav47-layout="desktop"] body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer #content,
    html[data-trav47-layout="desktop"] body.hero_adventure:not(.village1):not(.village2) #center #contentOuterContainer #content,
    html[data-trav47-layout="desktop"] body.hero_auction:not(.village1):not(.village2) #center #contentOuterContainer #content {
        height: min(720px, calc(100dvh - 185px)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 185px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* The generic touch rule hides .tooltip elements.  Hero benefit cells
       intentionally use that class for their help text, so restore this
       table only on tablet layouts. */
    body.travianMobile.hero_inventory:not(.village1):not(.village2) #attributes #attributesOfHero.trav47HeroBenefits .tooltip {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Spacious training rows for barracks, stable, workshop, residence,
       palace and command-centre related training screens. */
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) h4.round {
        padding: 6px 12px !important;
        margin: 8px 0 6px !important;
        font-size: 16px !important;
        line-height: 24px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) .buildActionOverview.trainUnits div.action {
        grid-template-columns: 104px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        row-gap: 8px !important;
        min-height: 126px !important;
        padding: 12px 14px !important;
        overflow: visible !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.bigUnitSection,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.bigUnitSection a.unitSection {
        width: 104px !important;
        height: 104px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.bigUnitSection img.unitSection {
        width: 140px !important;
        height: 140px !important;
        transform: scale(0.74) !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details {
        align-items: stretch !important;
        justify-content: center !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details div.tit {
        overflow: visible !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details div.tit span.furtherInfo {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .resourceWrapper {
        flex-wrap: wrap !important;
        gap: 5px 10px !important;
        margin-top: 7px !important;
        overflow: visible !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .resourceWrapper .resource,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .resourceWrapper .resource .value {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .resourceWrapper .resource i,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .duration i {
        transform: scale(0.9) !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .duration {
        margin-top: 7px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .cta {
        flex-wrap: wrap !important;
        gap: 6px 8px !important;
        margin-top: 8px !important;
        white-space: normal !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .cta > span.value,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .cta > a {
        font-size: 13px !important;
        line-height: 30px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .cta > input.text {
        width: 76px !important;
        height: 30px !important;
        min-height: 30px !important;
        font-size: 14px !important;
        line-height: 28px !important;
        padding: 1px 6px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .cta > button.exchange,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) button.startTraining {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        font-size: 13px !important;
        line-height: 32px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) div.action div.details .cta > button.exchange {
        flex-basis: 88px !important;
        width: 88px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid27, .gid44) button.startTraining {
        padding: 0 22px !important;
        margin-top: 12px !important;
    }

}

/* المباني فقط في الهاتف: الوصف في اليمين وصورة المبنى في اليسار. */
@media screen and (max-width: 1024px) {
    body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > #descriptionAndInfo {
        direction: rtl !important;
        text-align: right !important;
        padding-right: 14px !important;
        padding-left: 184px !important;
    }

    body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > .roundedCornersBox.big .stickyImage {
        right: auto !important;
        left: 8px !important;
    }

    body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > .roundedCornersBox.big .stickyImage a.build_logo,
    body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        right: auto !important;
        left: 0 !important;
    }

    body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform-origin: top left !important;
    }

    /* شريط تكلفة القوات والمباني في الدليل السريع. */
    body.manual .manualBuilding .resourceWrapper > .inlineIcon > i,
    body.manual .manualTroop table#troop_info > tbody > tr:first-child .resourceWrapper .inlineIcon > i {
        display: inline-block;
        transform: scale(.75) !important;
        transform-origin: center !important;
    }

    /* لا يلتف شريط التكلفة: أربعة أعمدة تستغل عرض الهاتف كاملاً. */
    body.manual .manualBuilding .resourceWrapper {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        gap: 0 !important;
        overflow: hidden !important;
    }

    body.manual .manualBuilding .resourceWrapper > .inlineIcon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0 !important;
        white-space: nowrap;
    }

    body.manual .manualTroop table#troop_info > tbody > tr:first-child > td {
        width: 25%;
        text-align: center;
    }

    body.manual .manualTroop table#troop_info > tbody > tr:first-child .resourceWrapper {
        display: flex !important;
        justify-content: center;
    }

    body.manual .manualTroop .troopData tr:has(.cropBalance) > td {
        text-align: center;
    }

    body.manual .manualTroop .cropBalance {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        min-height: 24px;
        padding: 2px 6px;
        border: 1px solid #b6ce91;
        border-radius: 4px;
        background: linear-gradient(#f8fbed, #e7f1d9);
        box-sizing: border-box;
    }

    body.manual .manualTroop .cropBalance > i.r5 {
        display: inline-block;
        transform: scale(.82);
        transform-origin: center;
    }

    body.manual .manualTroop .cropBalance::after {
        content: "✓";
        position: absolute;
        right: 1px;
        bottom: 1px;
        display: grid;
        place-items: center;
        width: 11px;
        height: 11px;
        border: 1px solid #eaf6dc;
        border-radius: 50%;
        color: #fff;
        background: #5c9c27;
        font: 700 9px/1 Arial, sans-serif;
    }

    body.manual .manualEntry > p:has(.manualBack) {
        margin: 3px 0 !important;
        line-height: 15px !important;
    }

    body.manual .manualEntry > p > .manualBack {
        margin: 0 !important;
    }

    /* الهاتف: منطقة الوصف والصورة أقصر للمباني والحقول مع بقاء المحتوى مقروءاً. */
    html[data-trav47-layout] body.build #content #build:has(> #descriptionAndInfo) {
        overflow-x: visible !important;
    }

    html[data-trav47-layout] body.build #content #build > #descriptionAndInfo {
        min-height: 100px !important;
        /* width: calc(100% + 12px) !important; */
        padding-top: 10px !important;
        padding-bottom: 2px !important;
        padding-left: 116px !important;
        margin-right: -7px !important;
        margin-left: -7px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout] body.build #content #build > .roundedCornersBox.big .stickyImage {
        top: -108px !important;
        width: 120px !important;
        height: 100px !important;
    }

    html[data-trav47-layout] body.build #content #build > .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(.55) !important;
        transform-origin: top left !important;
    }

    /* المباني فقط: زيادة 20% عن مقياس الهاتف الأساسي (.55 → .66). */
    html[data-trav47-layout] body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > #descriptionAndInfo {
        padding-left: 132px !important;
    }

    html[data-trav47-layout] body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > .roundedCornersBox.big .stickyImage {
        top: -120px !important;
        width: 132px !important;
        height: 118px !important;
    }

    html[data-trav47-layout] body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(.66) !important;
        transform-origin: top left !important;
    }

}

/* سطح المكتب فقط: قلم قائمة الروابط بجانب عنوانها داخل الورقة. */
html[data-trav47-layout="desktop"] body .sidebar #sidebarBoxLinklist > .content,
html[data-trav47-layout="desktop"] body .sidebar #sidebarBoxLinklist > .sidebarBoxInnerBox > .content {
    position: relative;
}

html[data-trav47-layout="desktop"] body .sidebar #sidebarBoxLinklist .content > .buttonsWrapper {
    position: absolute !important;
    top: 35px !important;
    left: 25px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/* قواعد درج الهاتف لنسخة الويب محصورة هنا كي لا تعيد تموضع ترويسة
   صندوق المعلومات فوق إطار سطح المكتب. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="desktop"] body .sidebar :is(#sidebarBoxInfobox, #sidebarBoxLinklist) > .header,
    html[data-trav47-layout="desktop"] body .sidebar :is(#sidebarBoxInfobox, #sidebarBoxLinklist) > .sidebarBoxInnerBox > .header {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body .sidebar :is(#sidebarBoxInfobox, #sidebarBoxLinklist) .content > .boxTitle {
        position: relative !important;
        top: auto !important;
        right: auto !important;
    }

    html[data-trav47-layout="desktop"] body .sidebar #sidebarBoxInfobox .content > .messageShortInfo {
        top: 35px !important;
    }
}

/* هذا هو الغلاف الحقيقي للقلم بعد وضعه داخل المحتوى. */
html body .sidebar #sidebarBoxLinklist .content > .buttonsWrapper {
    position: absolute !important;
    top: 35px !important;
    right: auto !important;
    bottom: auto !important;
    left: 25px !important;
    z-index: 3 !important;
    margin: 0 !important;
}

#sidebarBoxLinklist .trav47LinklistEditControl {
    position: absolute !important;
    top: -5px !important;
    right: auto !important;
    bottom: auto !important;
    left: 25px !important;
    z-index: 20 !important;
    display: block !important;
    margin: 0 !important;
    transform: none !important;
}

/* بعد نقل العناوين للمحتوى، تبقى الترويسة الأصلية فارغة ويجب ألا تحجز مساحة. */
#sidebarBoxInfobox > .header,
#sidebarBoxLinklist > .header,
#sidebarBoxInfobox > .sidebarBoxInnerBox > .header,
#sidebarBoxLinklist > .sidebarBoxInnerBox > .header {
    display: none !important;
}

/* هذه المعالجة تخص درج الهاتف عند تشغيل تخطيط الويب فقط. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox > .header,
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .header,
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxInfobox > .sidebarBoxInnerBox > .header,
    html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .sidebarBoxInnerBox > .header {
        display: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
}

/* بعد إلغاء الترويسة الفارغة، هذا هو السطر الداخلي لعنوان قائمة الروابط. */
html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content,
html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .sidebarBoxInnerBox > .content {
    padding-top: 18px !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist .trav47LinklistEditControl {
    top: 15px !important;
}

/* ترويسة قائمة الروابط في «نسخة الويب»: العنوان والقلم في سطر الورقة نفسه. */
html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: rtl !important;
    min-height: 34px !important;
    margin: 0 0 7px !important;
    padding: 0 8px !important;
    border-bottom: 1px solid rgba(108, 79, 38, .22) !important;
    box-sizing: border-box !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .boxTitle {
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    line-height: 34px !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl {
    position: static !important;
    display: flex !important;
    flex: 0 0 30px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 0 0 10px !important;
    transform: none !important;
    transform-origin: center !important;
    z-index: auto !important;
}

/* زر القلم وحده: دائرة سليمة وأصغر 15%، دون أي تغيير على عنوان القائمة. */
html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl {
    flex-basis: 25.5px !important;
    width: 25.5px !important;
    height: 25.5px !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl > #buttonSbCOS5JTM2euX {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 25.5px !important;
    height: 25.5px !important;
    min-width: 25.5px !important;
    min-height: 25.5px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl > #buttonSbCOS5JTM2euX svg {
    width: 10.2px !important;
    height: 12.75px !important;
}

/* قائمة القرى في «نسخة الويب» على الهاتف: المصدر يرسم سطر الترويسة داخل
   المحتوى، لذا نعطل إزاحة أزرار الشريط العامة ونبقي الأيقونتين قرب العنوان. */
html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header {
    display: none !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 30px !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    direction: rtl !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .villageListTitle {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 30px !important;
    white-space: nowrap !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .buttonsWrapper {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .layoutButton {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 30px !important;
    float: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
}

/* سطح المكتب الرئيسي فقط: تكبير أيقونتي نظرة القرى والترتيب بنسبة 20%. */
@media screen and (min-width: 1025px) {
    html#mainLayout body #center #sidebarAfterContent #sidebarBoxVillagelist > .header {
        display: none !important;
    }

    html#mainLayout body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 40px !important;
        margin: -4px 0 5px !important;
        padding: 2px 5px !important;
        color: #344b23 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .villageListTitle {
        flex: 1 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #344b23 !important;
        font-size: 13px !important;
        line-height: 32px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html#mainLayout body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .villageListCount {
        display: inline-flex !important;
        flex-flow: row nowrap !important;
        align-items: baseline !important;
        gap: 1px !important;
        margin-inline-start: 4px !important;
        color: #6f7d64 !important;
        font-size: 13px !important;
        direction: rtl !important;
        unicode-bidi: isolate !important;
    }

    html#mainLayout body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .buttonsWrapper {
        position: static !important;
        display: flex !important;
        flex: 0 0 auto !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: 3px !important;
        width: auto !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow #buttonBuild {
        display: none !important;
    }

    html#mainLayout body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .layoutButton {
        position: relative !important;
        display: inline-flex !important;
        flex-basis: 36px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
    }

    html#mainLayout body #center #sidebarAfterContent #sidebarBoxVillagelist > .content > .villageListHeaderRow .layoutButton svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* نثبت ترتيب عداد القرى بصرياً في RTL: الحالي يمين / والمتاح يسار. */
html[data-trav47-layout="desktop"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageListCount {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: baseline !important;
    gap: 1px !important;
    margin-inline-start: 4px !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    vertical-align: middle !important;
}

/* Retired: replaced by travian-phone-side-panels.css. */
@media not all {
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent,
    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent {
        position: fixed !important;
        top: 68px !important;
        bottom: 0 !important;
        display: block !important;
        width: min(72vw, 290px) !important;
        max-width: min(72vw, 290px) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 6px 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        pointer-events: none !important;
        z-index: 1502 !important;
        background: transparent !important;
        box-shadow: none !important;
        transition: transform 220ms ease-out !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent {
        right: 0 !important;
        left: auto !important;
        /* لوحة المعلومات والروابط: نفس مسافة لوحة اللاعب أسفل الهيدر. */
        top: 88px !important;
        transform: translateX(105%) !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent {
        right: auto !important;
        left: 0 !important;
        /* لوحتا اللاعب والقرى: 20px تحت الترويسة كي لا تلامسا أيقونات الهيدر. */
        top: 88px !important;
        transform: translateX(-105%) !important;
    }

    html[data-trav47-layout="mobile"] body.travian-mobile-right-sidebar-open #center #sidebarBeforeContent,
    html[data-trav47-layout="mobile"] body.travian-mobile-left-sidebar-open #center #sidebarAfterContent {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    html[data-trav47-layout="mobile"] body.travian-mobile-left-sidebar-open .travian-mobile-overlay,
    html[data-trav47-layout="mobile"] body.travian-mobile-right-sidebar-open .travian-mobile-overlay {
        display: block !important;
        z-index: 1501 !important;
    }

    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox {
        position: relative !important;
        width: 100% !important;
        margin: 0 0 9px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        bottom: 2px !important;
        left: 5px !important;
        z-index: 0 !important;
        border-style: solid !important;
        border-width: 28px 30px 30px 34px !important;
        border-image: url("../../images/ui/boxes/default_paper.png") 28 30 30 34 fill stretch !important;
        background: transparent !important;
    }

    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .content::before,
    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .sidebarBoxInnerBox::after,
    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .sidebarBoxInnerBox > .content::before {
        display: none !important;
    }

    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .sidebarBoxInnerBox,
    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > :is(.header, .content),
    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .sidebarBoxInnerBox > :is(.header, .content) {
        position: relative !important;
        z-index: 1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .header,
    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .sidebarBoxInnerBox > .header {
        min-height: 30px !important;
        margin: 0 !important;
        padding: 10px 35px 6px !important;
    }

    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .content,
    html[data-trav47-layout="mobile"] body #center :is(#sidebarBeforeContent, #sidebarAfterContent) .sidebarBox > .sidebarBoxInnerBox > .content {
        margin: 0 !important;
        padding: 4px 35px 14px !important;
    }

    /* نسخة الجوال تستخدم ترويسة القرى الأصلية (وليست villageListHeaderRow)،
       لذلك نعيد الأزرار إلى السطر نفسه ولا نترك قواعد الهاتف القديمة تضعها
       فوق شريط النقاط الحضارية. */
    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 8px 35px 4px !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .villageListTitle {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #61332b !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 26px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .buttonsWrapper {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex: 0 0 auto !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: 3px !important;
        width: auto !important;
        min-height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .layoutButton {
        position: static !important;
        display: inline-flex !important;
        flex: 0 0 26px !important;
        float: none !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header .layoutButton svg {
        width: 13px !important;
        height: 13px !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .content {
        padding-top: 2px !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .content .expansionSlotInfo {
        position: relative !important;
        z-index: 1 !important;
        margin: 0 0 6px !important;
        padding: 0 0 7px !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .content .expansionSlotInfo .barWrapper {
        height: 7px !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .content .expansionSlotInfo .barWrapper .bar {
        height: 5px !important;
    }

    /* الزران الفعليان في هذه الترويسة: لا نسمح لزر ترتيب القرى أن يرث
       عرضاً كاملاً أو خلفية شريطية من أزرار الهاتف. */
    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header :is(#buttond17, #buttonVillageOrder) {
        position: relative !important;
        display: inline-flex !important;
        flex: 0 0 26px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #4d672a !important;
        border-radius: 50% !important;
        background: linear-gradient(180deg, #b7d66f 0%, #75a333 52%, #476f25 100%) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.62), 0 1px 2px rgba(41, 31, 18, .36) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header :is(#buttond17, #buttonVillageOrder)::before,
    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header :is(#buttond17, #buttonVillageOrder)::after {
        display: none !important;
        content: none !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header :is(#buttond17, #buttonVillageOrder) svg {
        /* نفس تموضع رمز نسخة الويب داخل الدائرة. */
        position: absolute !important;
        top: 50% !important;
        right: 50% !important;
        z-index: 1 !important;
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        transform: translateX(50%) translateY(-50%) scaleX(-1) !important;
        fill: #fff7d2 !important;
        filter: drop-shadow(0 1px 0 rgba(49, 70, 25, .7)) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header :is(#buttond17, #buttonVillageOrder) svg .outline {
        fill: #365222 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header :is(#buttond17, #buttonVillageOrder) svg .icon,
    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header :is(#buttond17, #buttonVillageOrder) svg path {
        display: inline !important;
        fill: #fff7d2 !important;
        stroke: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header :is(#buttond17, #buttonVillageOrder) svg .outline path {
        fill: #365222 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header #buttond17 svg.overview {
        width: 16px !important;
        height: 12px !important;
        transform: translateX(50%) translateY(-50%) scaleX(-1) !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist > .header #buttonVillageOrder svg.villageOrder {
        width: 13px !important;
        height: 13px !important;
        transform: translateX(50%) translateY(-50%) scaleX(-1) !important;
    }
}

/* Retired: icon geometry is owned by the new phone panels. */
@media not all {
    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxVillagelist :is(#buttond17, #buttonVillageOrder) svg {
        position: absolute !important;
        top: 50% !important;
        right: 50% !important;
        z-index: 5 !important;
        transform: translateX(50%) translateY(-50%) scaleX(-1) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxVillagelist :is(#buttond17, #buttonVillageOrder) svg .icon,
    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxVillagelist :is(#buttond17, #buttonVillageOrder) svg path {
        display: inline !important;
        fill: #fff7d2 !important;
        stroke: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-trav47-layout] body #center #sidebarAfterContent #sidebarBoxVillagelist :is(#buttond17, #buttonVillageOrder) svg .outline path {
        fill: #365222 !important;
    }
}

/* Retired: phone link and village-action card rules. */
@media not all {
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > ul,
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist #linkList,
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist #linkList :is(.list, ul) {
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > ul > li,
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content #linkList li {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > ul > li > a,
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content #linkList li > a {
        min-height: 19px !important;
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        line-height: 17px !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .content ul li {
        position: relative !important;
        overflow: visible !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsToggle {
        position: absolute !important;
        top: 50% !important;
        left: 6px !important;
        z-index: 8 !important;
        display: inline-flex !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #6e7476 !important;
        border-radius: 50% !important;
        color: #f8faf9 !important;
        background: linear-gradient(180deg, #9aa1a3 0%, #687174 100%) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.48), 0 1px 2px rgba(0,0,0,.28) !important;
        cursor: pointer !important;
        transform: translateY(-50%) !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsToggle svg {
        width: 14px !important;
        height: 14px !important;
        fill: currentColor !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu {
        position: absolute !important;
        bottom: calc(100% + 4px) !important;
        left: 2px !important;
        z-index: 12 !important;
        display: grid !important;
        min-width: 156px !important;
        max-width: calc(100vw - 24px) !important;
        overflow: hidden !important;
        border: 14px solid transparent !important;
        border-image: url("../../images/ui/boxes/default_paper.png") 28 30 30 34 fill stretch !important;
        background: transparent !important;
        box-shadow: 0 2px 6px rgba(45,31,17,.36) !important;
        direction: rtl !important;
        text-align: right !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu[hidden] {
        display: none !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu .villageActionsTitle {
        padding: 1px 3px 5px !important;
        border-bottom: 1px solid rgba(93,67,42,.32) !important;
        color: #61332b !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu > :is(a, span.disabled) {
        display: block !important;
        min-height: 24px !important;
        padding: 4px 7px !important;
        border-bottom: 1px solid rgba(93,67,42,.2) !important;
        color: #513d2e !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu > :is(a, span.disabled):last-child {
        border-bottom: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarAfterContent #sidebarBoxVillagelist .villageActionsMenu .disabled {
        color: #8c9497 !important;
        background: rgba(115,108,96,.12) !important;
        cursor: not-allowed !important;
    }
}

/* Retired: phone information and link-list card rules. */
@media not all {
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxLinklist) > .content {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox > .content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 8px !important;
        row-gap: 5px !important;
        align-items: center !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox > .content > .boxTitle {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 22px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox > .content > .messageShortInfo {
        position: static !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 22px !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox > .content > .messageShortInfo svg.messageNew {
        display: block !important;
        width: 16px !important;
        height: 12px !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox > .content > ul {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox > .content > ul > li,
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > ul > li,
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > ul > li > a {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 24px !important;
        margin: 0 0 5px !important;
        padding: 0 0 4px !important;
        border-bottom: 1px solid rgba(108, 79, 38, .22) !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .boxTitle {
        position: static !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 22px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl {
        position: static !important;
        display: flex !important;
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl > #buttonSbCOS5JTM2euX {
        position: relative !important;
        display: inline-block !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist > .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl > #buttonSbCOS5JTM2euX svg.edit {
        width: 10px !important;
        height: 13px !important;
    }
}

/* الجوال الأصلي قد يضيف sidebarBoxInnerBox حول المحتوى؛ نستهدف المحتوى
   الفعلي كي يبقى العنوان وأيقونته في السطر ذاته في الحالتين. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent :is(#sidebarBoxInfobox, #sidebarBoxLinklist) .content {
        padding-top: 0 !important;
        padding-bottom: 6px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 8px !important;
        row-gap: 3px !important;
        align-items: center !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > .boxTitle {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 22px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > .messageShortInfo {
        position: static !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 22px !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > .messageShortInfo svg.messageNew {
        display: block !important;
        width: 16px !important;
        height: 12px !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > .trav47LinklistHeaderRow {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 24px !important;
        margin: 0 0 4px !important;
        padding: 0 0 3px !important;
        border-bottom: 1px solid rgba(108, 79, 38, .22) !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > .trav47LinklistHeaderRow > .boxTitle {
        position: static !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 22px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl,
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxLinklist .content > .trav47LinklistHeaderRow > .trav47LinklistEditControl > #buttonSbCOS5JTM2euX {
        position: relative !important;
        display: inline-block !important;
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    /* خبر المخطوطات: نرفعه قليلاً ونفصله عن زر إغلاق البطاقة. */
    html[data-trav47-layout="mobile"] body #center #sidebarBeforeContent #sidebarBoxInfobox .content > ul {
        margin-top: -5px !important;
        margin-bottom: 5px !important;
    }
}

/* The selectable phone layout can be used in a wide desktop viewport.  Key
   its hero geometry to the selected layout instead of the media width so it
   never inherits the tablet/desktop fixed-height paper. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="mobile"] body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    html[data-trav47-layout="mobile"] body.hero_inventory:not(.village1):not(.village2) #center #contentOuterContainer #content {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* خريطة الهاتف: أدوات مستقلة بلا الشريط المكتبي القديم. */
@media screen and (max-width: 1024px) {
    body.map:not(.village1):not(.village2) #bodyWrapper {
        top: 0 !important;
        bottom: 0 !important;
        height: var(--travian-mobile-map-viewport-height, 100dvh) !important;
    }

    /* Borderless, full-width map in both phone layouts. */
    body.map:not(.village1):not(.village2) #center #contentOuterContainer::before,
    body.map:not(.village1):not(.village2) #center #contentOuterContainer::after {
        content: none !important;
        display: none !important;
    }

    body.map:not(.village1):not(.village2) #center,
    body.map:not(.village1):not(.village2) #center #contentOuterContainer,
    body.map:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer,
    body.map:not(.village1):not(.village2) #center #contentOuterContainer #content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.map:not(.village1):not(.village2) #content > h1.titleInHeader {
        display: none !important;
    }

    body.map:not(.village1):not(.village2) #content .map2,
    body.map:not(.village1):not(.village2) div.map2 {
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--travian-mobile-map-viewport-height, 100dvh) !important;
        min-height: var(--travian-mobile-map-viewport-height, 100dvh) !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.map:not(.village1):not(.village2) #mapContainer {
        height: var(--travian-mobile-map-logical-height, 401px) !important;
    }

    body.map:not(.village1):not(.village2) #closeContentButton.travian-map-close,
    body.map:not(.village1):not(.village2) .map2 > #closeContentButton,
    body.map:not(.village1):not(.village2) .contentTitle > #closeContentButton {
        display: none !important;
    }

    body.map #mapContainer::before,
    body.map #mapContainer .innerShadow {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    body.map #mapContainer .ruler.x {
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: var(--travian-mobile-map-footer-safe-logical, 64px) !important;
        left: 0 !important;
        z-index: 2250 !important;
        width: 100% !important;
        height: 32px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-top: 1px solid #777 !important;
        background: #fff !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body.map #mapContainer .ruler.x .rulerContainer {
        width: 100% !important;
        height: 32px !important;
        margin: 0 !important;
        background-color: #fff !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar {
        top: auto !important;
        bottom: calc(var(--travian-mobile-map-footer-safe-logical, 64px) + 34px) !important;
        z-index: 2260 !important;
        width: 263px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 2px 2px 0 !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .ml,
    body.map #mapContainer #mapCoordEnter.toolbar .mr,
    body.map #mapContainer #mapCoordEnter.toolbar .mc {
        height: 38px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .contents {
        width: 236px !important;
        height: 38px !important;
        padding: 3px 6px !important;
        gap: 6px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .coordinatesInput {
        gap: 9px !important;
        line-height: 27px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .coordinatesInput > div {
        gap: 4px !important;
        height: 27px !important;
        line-height: 27px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .coordinatesInput label {
        font-size: 15px !important;
        line-height: 27px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar .coordinatesInput input {
        width: 59px !important;
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 3px !important;
        font-size: 15px !important;
        line-height: 27px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar button {
        width: 54px !important;
        height: 29px !important;
        min-height: 29px !important;
    }

    body.map #mapContainer #mapCoordEnter.toolbar button .button-content {
        font-size: 14px !important;
    }

    body.map #mapContainer #toolbar.toolbar {
        top: auto !important;
        right: 0 !important;
        bottom: calc(var(--travian-mobile-map-footer-safe-logical, 64px) + 34px) !important;
        left: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 8px) !important;
        height: 38px !important;
        overflow: visible !important;
        background: none !important;
        box-shadow: none !important;
    }

    body.map #mapContainer #toolbar > .ml,
    body.map #mapContainer #toolbar > .ml > .mr,
    body.map #mapContainer #toolbar > .ml > .mr > .mc {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    body.map #mapContainer #toolbar > .bl {
        display: none !important;
    }

    body.map #mapContainer #toolbar .contents {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        height: 38px !important;
        min-height: 38px !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 5px 7px !important;
        overflow: visible !important;
        direction: rtl !important;
        border: 1px solid rgba(20, 15, 9, 0.9) !important;
        border-radius: 4px !important;
        background: rgba(41, 32, 18, 0.92) !important;
        box-sizing: border-box !important;
    }

    body.map #mapContainer #toolbar .contents > .text,
    body.map #mapContainer #toolbar .contents > .separator,
    body.map #mapContainer #toolbar .iconButton.zoomOut {
        display: none !important;
    }

    body.map #mapContainer #toolbar .iconButton.zoomIn,
    body.map #mapContainer #toolbar .iconButton.travianMobileMiniMapToggle,
    body.map #mapContainer #toolbar .iconButton.filterMy,
    body.map #mapContainer #toolbar .iconButton.filterAlliance,
    body.map #mapContainer #toolbar .iconButton.iconRequireGold,
    body.map #mapContainer #toolbar .iconButton.linkCropfinder {
        flex: 0 0 16px !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        background-repeat: no-repeat !important;
        transform: none !important;
        zoom: var(--travian-mobile-map-inverse-scale, 1);
    }

    body.map #mapContainer #toolbar .iconButton.filterAlliance {
        display: none !important;
    }

    body.map #mapContainer #toolbar .iconButton.zoomIn.disabled,
    body.map #mapContainer #toolbar .iconButton.zoomIn.disabled:hover {
        background-position: 0 top !important;
        cursor: pointer !important;
        opacity: 1 !important;
    }

    body.map #mapContainer #toolbar .iconButton.zoomIn {
        flex: 0 0 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        overflow: hidden !important;
        border: 1px solid #1c160e !important;
        border-radius: 5px !important;
        background-image: none !important;
        background-color: #392d1f !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .14),
            0 1px 2px rgba(0, 0, 0, .45) !important;
        box-sizing: border-box !important;
    }

    body.map #mapContainer #toolbar .iconButton.zoomIn::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 5px;
        display: block;
        width: 16px;
        height: 16px;
        background: url('../../images/zoom.svg') center / 16px 16px no-repeat;
        pointer-events: none;
    }

    body.map #mapContainer #toolbar .iconButton.zoomIn::after {
        content: attr(data-zoom-label);
        position: absolute;
        right: 1px;
        bottom: 1px;
        display: block;
        min-width: 18px;
        height: 8px;
        padding: 0 1px;
        border-radius: 2px;
        color: #fff;
        background: rgba(10, 8, 5, .88);
        font: bold 7px/8px Arial, sans-serif;
        text-align: center;
        text-shadow: 0 1px 1px #000;
        box-sizing: border-box;
        pointer-events: none;
    }

    body.map #mapContainer #toolbar.travian-mobile-zoom-open .iconButton.zoomIn,
    body.map #mapContainer #toolbar .iconButton.zoomIn.travian-mobile-zoom-half {
        border-color: #9fc85e !important;
        background-color: #4e6427 !important;
        box-shadow:
            inset 0 0 0 1px rgba(215, 245, 161, .24),
            0 0 4px rgba(131, 183, 48, .75) !important;
    }

    body.map #mapContainer #toolbar .iconButton.iconRequireGold {
        position: relative !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-basis: 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 20px !important;
    }

    body.map #mapContainer #toolbar .iconButton.iconRequireGold > .iconButton.linkCropfinder {
        zoom: 1 !important;
    }

    body.map #mapContainer #toolbar .iconButton.travianMobileMiniMapToggle {
        background-image: url('../../images/map-svg.svg') !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
    }

    body.map #mapContainer #toolbar .dropdown {
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: calc(100% + 5px) !important;
        left: auto !important;
        z-index: 2100 !important;
        display: none !important;
        width: 94px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 3px !important;
        overflow: visible !important;
        border: 1px solid #7892a0 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #fafdff, #dce9ef) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .35) !important;
        box-sizing: border-box !important;
        zoom: var(--travian-mobile-map-inverse-scale, 1);
    }

    body.map #mapContainer #toolbar.travian-mobile-zoom-open .dropdown {
        display: block !important;
    }

    body.map #mapContainer #toolbar .dropdown .dataContainer,
    body.map #mapContainer #toolbar .dropdown .dataContainer.opened {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        width: 86px !important;
        height: 22px !important;
        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 3px !important;
        background: #eef5f7 !important;
        box-shadow: none !important;
        direction: ltr !important;
    }

    body.map #mapContainer #toolbar.travian-mobile-zoom-open .dropdown .dataContainer .entry {
        display: block !important;
        flex: 1 1 50% !important;
        width: 50% !important;
        min-width: 0 !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #365466 !important;
        font: bold 11px/22px Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    body.map #mapContainer #toolbar.travian-mobile-zoom-open .dropdown .dataContainer .entry + .entry {
        border-left: 1px solid #b5c8d1 !important;
    }

    body.map #mapContainer #toolbar.travian-mobile-zoom-open .dropdown .dataContainer .entry.selected,
    body.map #mapContainer #toolbar.travian-mobile-zoom-open .dropdown .dataContainer .entry.display {
        color: #fff !important;
        background: linear-gradient(180deg, #83bd2a, #50890c) !important;
    }

    body.map #mapContainer #toolbar .dropdown .dropDownImage,
    body.map #mapContainer #toolbar .dropdown .clear {
        display: none !important;
    }

    body.map #mapContainer #minimapContainer {
        position: absolute !important;
        top: -10000px !important;
        right: 4px !important;
        left: auto !important;
        display: block !important;
        width: 193px !important;
        height: 117px !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.map #mapContainer.travian-mobile-minimap-open #minimapContainer {
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: calc(var(--travian-mobile-map-footer-safe-logical, 64px) + 80px) !important;
        left: auto !important;
        z-index: 2090 !important;
        display: block !important;
        width: 193px !important;
        height: 117px !important;
        margin: 0 !important;
        padding: 4px !important;
        overflow: hidden !important;
        border: 1px solid #7892a0 !important;
        border-radius: 5px !important;
        background: rgba(247, 251, 252, .97) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .4) !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        zoom: var(--travian-mobile-map-inverse-scale, 1);
    }

    body.map #mapContainer.travian-mobile-minimap-open #minimapContainer > .background,
    body.map #mapContainer.travian-mobile-minimap-open #minimapContainer > .headline,
    body.map #mapContainer.travian-mobile-minimap-open #minimapContainer > .bl {
        display: none !important;
    }

    body.map #mapContainer.travian-mobile-minimap-open #miniMap {
        position: relative !important;
        display: block !important;
        width: 185px !important;
        height: 109px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body.map #mapContainer.travian-mobile-minimap-open #miniMap .map {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 185px !important;
        height: 109px !important;
        max-width: none !important;
        max-height: none !important;
    }
}


/* Shared compact phone header for legacy building, hero and report pages.
   Player profiles own their header in travian-player-mobile.css. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="mobile"] body:is(.build, .hero, .hero_inventory, .hero_adventure, .hero_auction, .reports):not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle {
        position: relative !important;
        height: 43px !important;
        min-height: 46px !important;
        border: 0 !important;
        border-radius: 10px 10px 0 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body:is(.build, .reports):not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle #closeContentButton {
        position: absolute !important;
        top: 24px !important;
        right: auto !important;
        left: 50px !important;
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        min-height: 17px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background-image: linear-gradient(to bottom, #6f8f34, #425b25) !important;
        box-shadow: 0 0 2px rgba(0, 0, 0, .45) !important;
        transform: none !important;
        transform-origin: center center !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body:is(.build, .reports):not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle #closeContentButton::after {
        top: 4px !important;
        right: 4px !important;
        width: 9px !important;
        height: 9px !important;
        background-size: 9px 9px !important;
    }

    html[data-trav47-layout="mobile"] body:is(.build, .reports):not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle #closeContentButton svg {
        width: 9px !important;
        height: 9px !important;
    }

    /* The mobile hero/auction header is independent from the obsolete shared header offsets above. */
    html#mainLayout[data-trav47-layout="mobile"] body:is(.hero, .hero_inventory, .hero_adventure, .hero_auction).trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader #closeContentButton {
        top: 7px !important;
        right: auto !important;
        left: 9px !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 0 !important;
        border-radius: 3px !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body:is(.hero, .hero_inventory, .hero_adventure, .hero_auction).trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader > .heroSectionHeader {
        top: 7px !important;
        right: 43px !important;
        left: 43px !important;
        width: auto !important;
        height: 24px !important;
        font: 700 16px/24px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html[data-trav47-layout="mobile"] body.build:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle .travian-mobile-build-title {
        position: absolute !important;
        top: 21px !important;
        right: 50px !important;
        bottom: auto !important;
        left: 50px !important;
        z-index: 50 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: auto !important;
        height: 24px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #f2f2f2 !important;
        direction: rtl !important;
        font-family: "Noto Serif", Arial, Helvetica, Verdana, sans-serif !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 24px !important;
        text-align: center !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        text-shadow: 1px 0 0 #b68363, 1px 1px 0 #b68363, 0 1px 0 #b68363, -1px 1px 0 #5e463a, -1px 0 0 #5e463a, -1px -1px 0 #5e463a, 0 -1px 0 #5e463a, 1px -1px 0 #5e463a !important;
        -webkit-text-fill-color: #f2f2f2 !important;
        transform: none !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body:is(.build, .hero, .hero_inventory, .hero_adventure, .hero_auction):not(.village1):not(.village2) #center #contentOuterContainer #content > h1.titleInHeader {
        display: none !important;
    }

    html[data-trav47-layout="mobile"] body:is(.build, .hero, .hero_inventory, .hero_adventure, .hero_auction):not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle :is(.travian-mobile-build-title, .travian-mobile-hero-title, .travian-mobile-auction-title) .level {
        color: #ff9b23 !important;
        font-size: 12px !important;
        line-height: 18px !important;
        text-shadow: 1px 0 0 #5e463a, 0 1px 0 #5e463a, -1px 0 0 #5e463a, 0 -1px 0 #5e463a !important;
        -webkit-text-fill-color: #ff9b23 !important;
    }
}

/* Building phone frame: keep the wooden artwork around the compact header only. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="mobile"] body.build:not(.village1):not(.village2) #center #contentOuterContainer {
        top: 7px !important;
    }

    html[data-trav47-layout="mobile"] body.build:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle .travian-mobile-build-title {
        top: 16px !important;
    }

    html[data-trav47-layout="mobile"] body.build:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > .contentTitleButton {
        transform: translateY(-5px) !important;
    }

    html[data-trav47-layout="mobile"] body.build:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > :is(#closeContentButton, #tabFavorButton) {
        top: 19px !important;
        transform: none !important;
    }

    html[data-trav47-layout="mobile"] body.build:not(.village1):not(.village2) #center #contentOuterContainer::before {
        top: 0 !important;
        bottom: auto !important;
        height: 46px !important;
        background-position: center bottom !important;
    }

    html[data-trav47-layout="mobile"] body.build:not(.village1):not(.village2) #center #contentOuterContainer::after {
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        border-width: 43px 50px 10px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form select#demolish {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 14px 0 42px !important;
        margin: 8px 0 10px !important;
        border: 1px solid #9aae73 !important;
        border-radius: 8px !important;
        outline: 0 !important;
        color: #3d4d28 !important;
        background-color: #f3f8e9 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2351692d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: left 14px center !important;
        background-size: 12px 8px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(67, 85, 43, .16) !important;
        direction: rtl !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 13px !important;
        line-height: 40px !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form select#demolish:focus {
        border-color: #668b35 !important;
        background-color: #f8fbed !important;
        box-shadow: 0 0 0 3px rgba(102, 139, 53, .16), inset 0 1px 0 #ffffff !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form select#demolish option {
        color: #33291d !important;
        background-color: #ffffff !important;
        font-size: 13px !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectShell {
        position: relative !important;
        z-index: 80;
        display: block !important;
        width: 100% !important;
        margin: 8px 0 10px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectShell select#demolish.demolishNativeSelect {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectTrigger {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 14px 0 42px !important;
        margin: 0 !important;
        border: 1px solid #9aae73 !important;
        border-radius: 8px !important;
        color: #3d4d28 !important;
        background: linear-gradient(180deg, #fbfdf6 0%, #edf5df 100%) !important;
        box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(67, 85, 43, .18) !important;
        direction: rtl !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 13px !important;
        font-weight: normal !important;
        line-height: 38px !important;
        text-align: right !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectTrigger::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 15px;
        width: 9px;
        height: 9px;
        border-right: 2px solid #51692d;
        border-bottom: 2px solid #51692d;
        transform: translateY(-70%) rotate(45deg);
        transition: transform .15s ease;
        pointer-events: none;
        box-sizing: border-box;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectShell.open .demolishSelectTrigger {
        border-color: #668b35 !important;
        border-radius: 8px 8px 4px 4px !important;
        box-shadow: 0 0 0 3px rgba(102, 139, 53, .14), inset 0 1px 0 #ffffff !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectShell.open .demolishSelectTrigger::after {
        transform: translateY(-25%) rotate(225deg);
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectValue {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectMenu {
        position: fixed !important;
        top: 72px;
        right: 50%;
        left: auto;
        z-index: 1000 !important;
        width: min(340px, calc(100vw - 32px));
        max-height: min(390px, calc(100dvh - 155px)) !important;
        padding: 5px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid #879b64 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 20px rgba(42, 52, 28, .28), 0 2px 5px rgba(42, 52, 28, .16) !important;
        scrollbar-width: thin;
        scrollbar-color: #9db678 #eef3e5;
        transform: translateX(50%);
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectMenu[hidden] {
        display: none !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectOption {
        display: block !important;
        width: 100% !important;
        min-height: 36px !important;
        padding: 8px 11px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 5px !important;
        color: #3b3124 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        direction: rtl !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 13px !important;
        font-weight: normal !important;
        line-height: 20px !important;
        text-align: right !important;
        text-shadow: none !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectOption + .demolishSelectOption {
        margin-top: 2px !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectOption:hover,
    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectOption:focus {
        outline: 0 !important;
        color: #31451d !important;
        background: #edf5df !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form .demolishSelectOption.selected {
        color: #ffffff !important;
        background: linear-gradient(180deg, #759d3f, #557b2c) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form.demolishForm {
        display: grid !important;
        grid-template-columns: max-content max-content !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 8px !important;
        width: 100% !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form.demolishForm .demolishSelectShell {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        width: min(340px, 100%) !important;
        max-width: 100% !important;
        margin: 8px auto 10px !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form.demolishForm .demolishSelectTrigger {
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form.demolishForm #btn_demolish {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form.demolishForm .demolishNow {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        display: block !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.build #content #build.gid15 form.demolishForm .demolishNow > button {
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.build #content .demolitionBuildStatus {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    html[data-trav47-layout="mobile"] body.build #content .demolitionBuildStatus > p {
        margin: 0 0 6px !important;
        text-align: center !important;
    }

    html[data-trav47-layout="mobile"] body.build #content .demolitionBuildTime {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        direction: ltr !important;
        min-height: 18px !important;
    }

    html[data-trav47-layout="mobile"] body.build #content .demolitionBuildTime > i.clock_medium {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.build #content .demolitionBuildTime > .timer {
        display: inline-block !important;
        direction: ltr !important;
        line-height: 18px !important;
    }
}

/* Keep every hero window clear of the phone quick-access header. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="mobile"] body:is(.hero, .hero_inventory, .hero_adventure, .start_adventure, .hero_auction):not(.village1):not(.village2) #center #contentOuterContainer {
        top: 7px !important;
    }
}

/* Native crop-finder panel used by both phone layouts on the map. */
@media screen and (max-width: 1024px) {
    body.map.travian-mobile-cropfinder-open {
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.map .travian-mobile-cropfinder-overlay {
        --trav47-mobile-cropfinder-window-inset: 30px;
        position: fixed !important;
        top: calc(68px + var(--trav47-mobile-cropfinder-window-inset)) !important;
        right: 0 !important;
        bottom: calc(76px + var(--trav47-mobile-cropfinder-window-inset)) !important;
        left: 0 !important;
        /* Keep the coordinate details dialog (2300) above the finder while
           preserving the finder above the map itself. */
        z-index: 2200 !important;
        display: block !important;
        width: 100vw !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        direction: rtl !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    html#mainLayout[data-trav47-layout] body.map .travian-mobile-cropfinder-dialog {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        border: 2px solid #7695a3 !important;
        border-radius: 7px !important;
        color: #304955 !important;
        background: linear-gradient(180deg, #fbfdfe 0%, #e7f0f4 100%) !important;
        box-shadow: inset 0 0 0 1px #fff, 0 7px 22px rgba(10, 22, 28, .48) !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 11px !important;
        direction: rtl !important;
        scrollbar-width: none !important;
        overscroll-behavior: contain !important;
    }

    html#mainLayout[data-trav47-layout] body.map .travian-mobile-cropfinder-dialog::-webkit-scrollbar {
        display: none !important;
    }

    body.map .travian-mobile-cropfinder-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        flex: 0 0 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        padding: 0 40px !important;
        border-bottom: 1px solid #a9c0cb !important;
        background: linear-gradient(#fafdff, #dfebf0) !important;
    }

    body.map .travian-mobile-cropfinder-header h2 {
        margin: 0 !important;
        color: #2e4d5c !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 38px !important;
        text-align: center !important;
    }

    body.map .travian-mobile-cropfinder-close {
        position: absolute !important;
        top: 6px !important;
        left: 7px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 27px !important;
        height: 26px !important;
        padding: 0 !important;
        border: 1px solid #9fb1ba !important;
        border-radius: 4px !important;
        color: #c33b30 !important;
        background: linear-gradient(#fff, #e5eef2) !important;
        box-shadow: inset 0 1px #fff !important;
        font: 400 22px/22px Arial, sans-serif !important;
    }

    body.map .travian-mobile-cropfinder-form {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 6px 8px !important;
        padding: 8px 9px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #bfd0d8 !important;
        background: rgba(255, 255, 255, .48) !important;
    }

    body.map .travian-mobile-cropfinder-form > p {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        font-size: 10.5px !important;
        line-height: 15px !important;
        text-align: center !important;
    }

    body.map .travian-mobile-cropfinder-coordinates {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        direction: rtl !important;
    }

    body.map .travian-mobile-cropfinder-coordinates label {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        color: #3c5865 !important;
        font-weight: 700 !important;
    }

    body.map .travian-mobile-cropfinder-coordinates input.text {
        width: 52px !important;
        height: 24px !important;
        padding: 2px 4px !important;
        box-sizing: border-box !important;
        border: 1px solid #a8bcb1 !important;
        border-radius: 3px !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 11px !important;
        line-height: 18px !important;
        text-align: center !important;
        direction: ltr !important;
        background: #fff !important;
    }

    body.map .travian-mobile-cropfinder-types {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px !important;
        direction: rtl !important;
    }

    body.map .travian-mobile-cropfinder-types label {
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.map .travian-mobile-cropfinder-types input {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.map .travian-mobile-cropfinder-types span {
        display: block !important;
        height: 25px !important;
        padding: 3px 2px !important;
        box-sizing: border-box !important;
        border: 1px solid #a9bbc3 !important;
        border-radius: 3px !important;
        color: #365462 !important;
        background: linear-gradient(#fff, #e1ebef) !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.map .travian-mobile-cropfinder-types input:checked + span {
        border-color: #8a671a !important;
        color: #fff !important;
        background: linear-gradient(#c99120, #9f6b09) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .35) !important;
    }

    body.map .travian-mobile-cropfinder-options {
        grid-column: 1 / 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    body.map .travian-mobile-cropfinder-oasis {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    body.map .travian-mobile-cropfinder-oasis select {
        width: 72px !important;
        height: 24px !important;
        padding: 1px 4px !important;
        border: 1px solid #a9bbc3 !important;
        border-radius: 3px !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 10px !important;
        background: #fff !important;
    }

    body.map .travian-mobile-cropfinder-free {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }

    body.map .travian-mobile-cropfinder-free input {
        width: 13px !important;
        height: 13px !important;
        margin: 0 !important;
    }

    body.map .travian-mobile-cropfinder-submit {
        grid-column: 2 / 3 !important;
        align-self: center !important;
        min-width: 62px !important;
        height: 28px !important;
        padding: 2px 13px !important;
        margin: 0 !important;
        border: 1px solid #355f0b !important;
        border-radius: 4px !important;
        color: #fff !important;
        background: linear-gradient(#86bf37, #4f840d) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.45), 0 1px 1px rgba(0,0,0,.2) !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        text-shadow: 0 1px #315800 !important;
    }

    body.map .travian-mobile-cropfinder-submit:disabled {
        opacity: .65 !important;
    }

    body.map .travian-mobile-cropfinder-summary {
        flex: 0 0 29px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 29px !important;
        padding: 4px 10px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #c3d2d9 !important;
        color: #335260 !important;
        background: #edf4f7 !important;
    }

    body.map .travian-mobile-cropfinder-status {
        overflow: hidden !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.map .travian-mobile-cropfinder-status.is-error {
        color: #a3261e !important;
    }

    body.map .travian-mobile-cropfinder-results {
        flex: 0 0 auto !important;
        min-height: 110px !important;
        overflow: visible !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    body.map .travian-mobile-cropfinder-result {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 2px 7px !important;
        width: 100% !important;
        min-height: 43px !important;
        padding: 4px 7px !important;
        margin: 0 0 4px !important;
        box-sizing: border-box !important;
        border: 1px solid #b6c8d0 !important;
        border-radius: 4px !important;
        color: #314f5c !important;
        background: rgba(255,255,255,.78) !important;
        box-shadow: inset 0 1px #fff !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 10px !important;
        text-align: right !important;
    }

    body.map .travian-mobile-cropfinder-result:last-child {
        margin-bottom: 0 !important;
    }

    body.map .travian-mobile-cropfinder-result:active {
        background: #e0edf2 !important;
    }

    body.map .travian-mobile-cropfinder-result-type {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    body.map .travian-mobile-cropfinder-result-coordinates {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 3px 5px !important;
        box-sizing: border-box !important;
        border-radius: 3px !important;
        color: #24434f !important;
        background: #edf3e2 !important;
        font-size: 11px !important;
        text-align: center !important;
        unicode-bidi: isolate !important;
    }

    body.map .travian-mobile-cropfinder-result-bonus {
        grid-column: 3 !important;
        grid-row: 1 !important;
        color: #4b810e !important;
        font-weight: 700 !important;
        direction: ltr !important;
        text-align: center !important;
    }

    body.map .travian-mobile-cropfinder-result-distance {
        grid-column: 1 !important;
        grid-row: 2 !important;
        color: #6b7a80 !important;
        text-align: center !important;
    }

    body.map .travian-mobile-cropfinder-result-state {
        grid-column: 3 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        overflow: hidden !important;
        color: #64757c !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.map .travian-mobile-cropfinder-result.is-free .travian-mobile-cropfinder-result-state {
        color: #4c850d !important;
        font-weight: 700 !important;
    }

    body.map .travian-mobile-cropfinder-empty {
        padding: 24px 8px !important;
        color: #6a7d85 !important;
        text-align: center !important;
    }

    body.map .travian-mobile-cropfinder-loading {
        width: 25px !important;
        height: 25px !important;
        margin: 34px auto !important;
        border: 3px solid #c5d4da !important;
        border-top-color: #638d20 !important;
        border-radius: 50% !important;
        animation: travianMobileCropfinderSpin .7s linear infinite !important;
    }
}

@keyframes travianMobileCropfinderSpin {
    to { transform: rotate(360deg); }
}


/* Shared native-phone window positioning for remaining legacy pages. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout="mobile"] body:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window {
        position: relative !important;
        top: 5px !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

}

/* Web-on-phone village side chooser.  The alternate mode only mirrors the
   two existing columns; their widths, scales, and the hero stay untouched. */
.trav47DesktopSideMenuItem {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    html[data-trav47-layout="desktop"] .trav47DesktopSideMenuItem {
        display: block !important;
    }

    html[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.village1 div.village1 #resourceFieldContainer {
        left: 66% !important;
    }

    html[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.village1 div.village1 div#map_details {
        right: auto !important;
        left: 8px !important;
    }

    html[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.village1 .village1 div.buildingList {
        right: 0 !important;
        left: auto !important;
    }

    html[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.village1 nav#mobileMenu {
        right: 0 !important;
        left: auto !important;
        border-radius: 8px 0 0 8px !important;
        transform-origin: bottom right !important;
    }
}

@media screen and (max-width: 359px) {
    html[data-trav47-layout="desktop"][data-trav47-village-side="left"] body.village1 div.village1 div#map_details {
        left: 4px !important;
    }
}

/* Master-builder queue cost: label, number, then gold icon from right to left. */
.trav47ArchitectCost {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
    direction: rtl !important;
    color: #777 !important;
    white-space: nowrap !important;
}

.trav47ArchitectCostAmount {
    direction: ltr !important;
    unicode-bidi: isolate;
}

.trav47ArchitectCostGold.gold {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* The village options panel opens directly above the unified footer. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.village1 nav#mobileMenu {
        right: auto !important;
        bottom: 76px !important;
        left: 0 !important;
        transform-origin: bottom left !important;
    }

}

/* Building/resource-field phone shell: the carved artwork belongs to the
   compact 43px header, not to two full-height wooden side columns. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window {
        padding: 0 5px 6px !important;
        border-width: 0 1px 1px !important;
        border-style: solid !important;
        border-color: #5f4936 !important;
        border-radius: 10px 10px 8px 8px !important;
        background-color: #9b7e5c !important;
        background-image: linear-gradient(to bottom, #d5c3a3 0, #ae916b 48%, #74573e 100%) !important;
        box-shadow:
            inset 1px 0 0 #eadbc2,
            inset -1px 0 0 #eadbc2,
            inset 0 -1px 0 #c5a67d,
            0 1px 2px rgba(45, 31, 20, .35) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window > .contentTitle {
        position: relative !important;
        z-index: 3 !important;
        height: 43px !important;
        min-height: 43px !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window::before {
        top: 0 !important;
        bottom: auto !important;
        z-index: 0 !important;
        height: 43px !important;
        background-position: center bottom !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window::after {
        top: 0 !important;
        bottom: auto !important;
        z-index: 1 !important;
        height: 43px !important;
        border-width: 43px 50px 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window > .contentContainer {
        position: relative !important;
        z-index: 2 !important;
        border: 1px solid #b39253 !important;
        border-top: 0 !important;
        border-radius: 0 0 8px 8px !important;
        box-sizing: border-box !important;
    }

    /* Field artwork is deliberately lifted beside its description.  Clip it
       at the content boundary so neither the sprite nor text can ghost into
       the header when a field is already queued for an upgrade. */
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentContainer {
        overflow: hidden !important;
        isolation: isolate !important;
    }

    /* Resource fields use a cleaner game-native frame of their own: dark
       timber, a restrained gold separator, and compact square controls. */
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) {
        padding: 4px 4px 5px !important;
        overflow: hidden !important;
        border: 1px solid #493526 !important;
        border-radius: 7px 7px 5px 5px !important;
        background-color: #745338 !important;
        background-image: linear-gradient(90deg, #5b402c 0, #9b7854 4px, #9b7854 calc(100% - 4px), #5b402c 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(244, 222, 180, .55),
            inset 1px 0 0 rgba(232, 205, 160, .34),
            inset -1px 0 0 rgba(56, 37, 24, .65),
            0 2px 4px rgba(35, 23, 15, .38) !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4))::before,
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4))::after {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentTitle {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 2px solid #b68a43 !important;
        border-radius: 4px 4px 0 0 !important;
        background-color: #4f392b !important;
        background-image:
            linear-gradient(180deg, rgba(255, 239, 205, .16) 0, rgba(255, 255, 255, 0) 32%, rgba(26, 16, 11, .22) 100%),
            url('../../images/ui/hud/content/header.jpg') !important;
        background-position: center, center bottom !important;
        background-repeat: no-repeat, repeat-x !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 238, 201, .42),
            inset 0 -1px 0 rgba(54, 35, 23, .68) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentTitle .travian-mobile-build-title {
        top: 9px !important;
        right: 43px !important;
        left: 43px !important;
        height: 24px !important;
        color: #fff4df !important;
        font-size: 16px !important;
        line-height: 24px !important;
        text-shadow: 0 1px 1px #2e1b10 !important;
        -webkit-text-fill-color: #fff4df !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentTitle .travian-mobile-build-title .level {
        color: #f2a83b !important;
        text-shadow: 0 1px 1px #3e260f !important;
        -webkit-text-fill-color: #f2a83b !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentTitle > #answersButton {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentTitle > #closeContentButton {
        position: absolute !important;
        top: 9px !important;
        right: auto !important;
        left: 9px !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 #263d19 !important;
        border-radius: 4px !important;
        background-color: #52772f !important;
        background-image: linear-gradient(180deg, #89aa53 0, #52772f 54%, #354f22 100%) !important;
        box-shadow: inset 0 1px 0 rgba(235, 250, 207, .48), 0 1px 2px rgba(24, 15, 9, .55) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentTitle > #closeContentButton::before {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentTitle > #closeContentButton::after {
        top: 6px !important;
        right: 6px !important;
        width: 10px !important;
        height: 10px !important;
        background-size: 10px 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentTitle > #closeContentButton svg {
        width: 10px !important;
        height: 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window:has(#content.build > #build:is(.gid1, .gid2, .gid3, .gid4)) > .contentContainer {
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 0 3px 3px !important;
        background: #d9c9ad !important;
        box-shadow: inset 0 0 0 1px rgba(82, 58, 39, .28) !important;
        box-sizing: border-box !important;
    }
}

/* Phone layouts: compact, fully framed settlement confirmation. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout] body.build #content #build.gid16 > .troopstipo > h1 {
        margin: 2px 0 8px !important;
        font-size: 16px !important;
        line-height: 22px !important;
    }

    html[data-trav47-layout] body.build #content #build.gid16 .troopstipo table.troop_details.settle {
        width: calc(100% + 14px) !important;
        max-width: none !important;
        margin: 8px -7px 10px !important;
        border: 1px solid #bcc3c6 !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        table-layout: fixed !important;
        outline: 1px solid #aeb7bb !important;
        outline-offset: -1px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout] body.build #content #build.gid16 .troopstipo table.troop_details.settle tr > :first-child {
        border-right: 1px solid #aeb7bb !important;
    }

    html[data-trav47-layout] body.build #content #build.gid16 .troopstipo table.troop_details.settle tr > :last-child {
        border-left: 1px solid #aeb7bb !important;
    }

    html[data-trav47-layout] body.build #content #build.gid16 .troopstipo table.troop_details.settle col.trav47-settle-label-column {
        width: 44px !important;
    }

    html[data-trav47-layout] body.build #content #build.gid16 .troopstipo table.troop_details.settle th {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        white-space: nowrap !important;
    }
}

/* Resource-field window — one complete phone-only skin.
   It deliberately replaces the legacy carved header, floating artwork and
   generic rounded upgrade box while leaving the desktop layout untouched. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window {
        --trav47-field-accent: #789838;
        width: 100% !important;
        padding: 4px 4px 6px !important;
        overflow: hidden !important;
        border: 1px solid #3e2b1d !important;
        border-radius: 6px !important;
        background: linear-gradient(90deg, #4a3222 0 4px, #a88456 4px calc(100% - 4px), #4a3222 calc(100% - 4px)) !important;
        box-shadow:
            inset 0 1px 0 #ecd5ad,
            inset 1px 0 0 rgba(255, 238, 199, .35),
            inset -1px 0 0 rgba(37, 23, 14, .7),
            inset 0 -2px 0 #5a3c27,
            0 2px 5px rgba(25, 15, 9, .42) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window:has(#build.gid1) {
        --trav47-field-accent: #8b672e;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window:has(#build.gid2) {
        --trav47-field-accent: #b56d37;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window:has(#build.gid3) {
        --trav47-field-accent: #6d8190;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window:has(#build.gid4) {
        --trav47-field-accent: #a58b31;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window::before,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window::after {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentTitle {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 2px solid var(--trav47-field-accent) !important;
        border-radius: 3px 3px 0 0 !important;
        background:
            linear-gradient(180deg, rgba(255, 242, 211, .18), transparent 34%, rgba(24, 14, 8, .28)),
            url('../../images/ui/hud/content/header.jpg') center bottom / auto 58px repeat-x !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 241, 211, .45),
            inset 0 -1px 0 rgba(30, 18, 11, .72) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentTitle .travian-mobile-build-title {
        top: 8px !important;
        right: 40px !important;
        left: 40px !important;
        display: block !important;
        height: 25px !important;
        overflow: hidden !important;
        color: #fff4de !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 25px !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #28170d !important;
        white-space: nowrap !important;
        -webkit-text-fill-color: #fff4de !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentTitle .travian-mobile-build-title .level {
        display: inline !important;
        margin-right: 4px !important;
        color: #f1ad42 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 1px #3d230d !important;
        -webkit-text-fill-color: #f1ad42 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentTitle > #answersButton {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentTitle > #closeContentButton {
        position: absolute !important;
        top: 9px !important;
        right: auto !important;
        left: 8px !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 #243516 !important;
        border-radius: 3px !important;
        background: linear-gradient(180deg, #8bab51, #55782f 53%, #354f20) !important;
        box-shadow: inset 0 1px 0 rgba(240, 250, 218, .55), 0 1px 2px rgba(24, 14, 8, .62) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentTitle > #closeContentButton::before {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentTitle > #closeContentButton::after {
        top: 6px !important;
        right: 6px !important;
        width: 10px !important;
        height: 10px !important;
        background-size: 10px 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentTitle > #closeContentButton svg {
        width: 10px !important;
        height: 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window > .contentContainer {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #7e603c !important;
        border-top: 0 !important;
        border-radius: 0 0 3px 3px !important;
        background: #f1ead9 !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #content.build {
        width: 100% !important;
        min-height: 0 !important;
        padding: 7px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        background:
            linear-gradient(rgba(255, 255, 255, .55), rgba(239, 231, 210, .35)),
            #f1ead9 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #content.build > h1.titleInHeader {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #build:is(.gid1, .gid2, .gid3, .gid4) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 102px !important;
        grid-template-rows: auto auto !important;
        gap: 6px 8px !important;
        width: 100% !important;
        min-height: 112px !important;
        padding: 9px !important;
        margin: 0 0 7px !important;
        overflow: hidden !important;
        border: 1px solid color-mix(in srgb, var(--trav47-field-accent) 58%, #786443) !important;
        border-radius: 4px !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(230, 237, 210, .72)),
            #eef0dc !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(71, 50, 30, .12) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 4px !important;
        height: 100% !important;
        background: var(--trav47-field-accent) !important;
        opacity: .9 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo > .build_desc {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start !important;
        min-width: 0 !important;
        padding: 0 2px 5px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(105, 91, 61, .17) !important;
        color: #35402a !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.48 !important;
        text-align: right !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
        -webkit-font-smoothing: antialiased !important;
        -webkit-text-fill-color: #35402a !important;
        -webkit-text-stroke: 0 transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo > .build_desc * {
        color: inherit !important;
        font: inherit !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
        -webkit-text-fill-color: currentColor !important;
        -webkit-text-stroke: 0 transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo > .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo > table.productionValues {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 2px !important;
        background: transparent !important;
        table-layout: auto !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window table.productionValues tr,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window table.productionValues th,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window table.productionValues td {
        height: auto !important;
        min-height: 0 !important;
        padding: 2px 4px !important;
        border: 0 !important;
        background: rgba(255, 255, 255, .5) !important;
        color: #4d4737 !important;
        font-size: 10.5px !important;
        font-weight: 400 !important;
        line-height: 15px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window table.productionValues th {
        width: 58% !important;
        border-radius: 0 3px 3px 0 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window table.productionValues td {
        width: 42% !important;
        border-radius: 3px 0 0 3px !important;
        color: #385e20 !important;
        direction: rtl !important;
        text-align: left !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window table.productionValues th *,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window table.productionValues td * {
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        opacity: 1 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: currentColor !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window table.productionValues tr.underConstruction > * {
        background: #fff1c9 !important;
        color: #8b5a14 !important;
    }

    /* Legacy field rules use the duplicated build_value id and otherwise win
       on specificity.  Reset those exact cells so the production panel keeps
       the readable ink and soft row background of the new skin. */
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo > table#build_value.productionValues > tbody > tr > th {
        background: rgba(255, 255, 255, .56) !important;
        color: #4d4737 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #4d4737 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo > table#build_value.productionValues > tbody > tr > td,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo > table#build_value.productionValues > tbody > tr > td > * {
        background: rgba(255, 255, 255, .56) !important;
        color: #385e20 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #385e20 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #descriptionAndInfo > table#build_value.productionValues > tbody > tr.underConstruction > * {
        background: #fff1c9 !important;
        color: #8b5a14 !important;
        -webkit-text-fill-color: #8b5a14 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .trav47-resource-field-visual {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: stretch !important;
        display: block !important;
        width: 102px !important;
        min-height: 102px !important;
        overflow: hidden !important;
        border: 1px solid rgba(91, 72, 43, .32) !important;
        border-radius: 3px !important;
        background:
            radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .72), transparent 59%),
            linear-gradient(180deg, color-mix(in srgb, var(--trav47-field-accent) 20%, #f4efd8), #dce5c7) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .trav47-resource-field-visual > a.build_logo {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 102px !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .trav47-resource-field-visual img.build_logo.building.big {
        position: absolute !important;
        top: 1px !important;
        right: auto !important;
        left: 0 !important;
        width: 184px !important;
        height: 179px !important;
        margin: 0 !important;
        transform: scale(.55) !important;
        transform-origin: top left !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #build:is(.gid1, .gid2, .gid3, .gid4) > .roundedCornersBox.big {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 9px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b5a278 !important;
        border-radius: 4px !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(241, 232, 210, .68)),
            #f4eddd !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(66, 45, 26, .12) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #build:is(.gid1, .gid2, .gid3, .gid4) > .roundedCornersBox.big > .stickyImage {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #build:is(.gid1, .gid2, .gid3, .gid4) > .roundedCornersBox.big:not(.headlineOnly) > h4 {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #build:is(.gid1, .gid2, .gid3, .gid4) > .roundedCornersBox.big.headlineOnly > h4 {
        display: block !important;
        min-height: 0 !important;
        padding: 8px !important;
        margin: 0 !important;
        border-right: 3px solid var(--trav47-field-accent) !important;
        border-radius: 3px !important;
        background: #eef2df !important;
        color: #445333 !important;
        font-size: 12px !important;
        line-height: 18px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #contractSpacer {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #contract.contractWrapper {
        width: 100% !important;
        padding: 0 0 8px !important;
        margin: 0 0 7px !important;
        border-bottom: 1px solid rgba(112, 89, 53, .22) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #contract.contractWrapper::before {
        content: "تكلفة الترقية" !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        color: #5c4a30 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #contract .resourceWrapper {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #contract .resourceWrapper > .inlineIcon.resource {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 43px !important;
        margin: 0 !important;
        padding: 3px 1px !important;
        overflow: hidden !important;
        border: 1px solid rgba(123, 103, 67, .2) !important;
        border-radius: 3px !important;
        background: rgba(255, 255, 255, .58) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #contract .resourceWrapper > .inlineIcon.resource > i {
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: scale(.88) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window #contract .resourceWrapper > .inlineIcon.resource > .value {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #453b2d !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 11px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .culturePointsAndPopulation {
        width: 100% !important;
        padding: 0 0 7px !important;
        margin: 0 0 7px !important;
        border-bottom: 1px solid rgba(112, 89, 53, .22) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .culturePointsAndPopulation .wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .culturePointsAndPopulation .unit {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 86px !important;
        min-height: 25px !important;
        padding: 3px 7px !important;
        margin: 0 !important;
        border: 1px solid rgba(118, 99, 65, .2) !important;
        border-radius: 3px !important;
        background: #eee8d8 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .upgradeButtonsContainer {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .upgradeButtonsContainer .section1,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .upgradeButtonsContainer .section2 {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .upgradeButtonsContainer.section2Enabled .section2 {
        padding: 7px 0 0 !important;
        border-top: 1px dashed rgba(112, 89, 53, .28) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .upgradeButtonsContainer .inlineIcon.duration {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 92px !important;
        height: 28px !important;
        padding: 3px 8px !important;
        margin: 4px 0 !important;
        border: 1px solid rgba(111, 91, 57, .25) !important;
        border-radius: 3px !important;
        background: #f5f1e5 !important;
        color: #4b4335 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .upgradeButtonsContainer .inlineIcon.duration > i {
        margin: 0 0 0 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-resource-field-window .upgradeButtonsContainer button.textButtonV1 {
        width: auto !important;
        min-width: 112px !important;
        max-width: calc(100% - 4px) !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        padding: 0 9px !important;
        margin: 3px 0 !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        line-height: 31px !important;
        white-space: nowrap !important;
    }
}

/* Final shell precedence for the structured building skin.  Older generic
   phone-frame rules appear later than some historical building rules, so the
   two explicit window classes keep this new frame authoritative. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window {
        width: 100% !important;
        padding: 4px 4px 6px !important;
        overflow: hidden !important;
        border: 1px solid #3e2b1d !important;
        border-radius: 6px !important;
        background: linear-gradient(90deg, #4a3222 0 4px, #a88456 4px calc(100% - 4px), #4a3222 calc(100% - 4px)) !important;
        box-shadow:
            inset 0 1px 0 #ecd5ad,
            inset 1px 0 0 rgba(255, 238, 199, .35),
            inset -1px 0 0 rgba(37, 23, 14, .7),
            inset 0 -2px 0 #5a3c27,
            0 2px 5px rgba(25, 15, 9, .42) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window::before,
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window::after {
        content: none !important;
        display: none !important;
    }

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

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentContainer {
        border: 1px solid #7e603c !important;
        border-top: 0 !important;
        border-radius: 0 0 3px 3px !important;
        background: #f1ead9 !important;
    }

    /* Match the proven resource-field header exactly.  Historical building
       rules moved both controls 50px inward and reduced the close control to
       17px, so these selectors intentionally include the full window scope. */
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentTitle {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 2px solid #b68a43 !important;
        border-radius: 4px 4px 0 0 !important;
        background-color: #4f392b !important;
        background-image:
            linear-gradient(180deg, rgba(255, 239, 205, .16) 0, rgba(255, 255, 255, 0) 32%, rgba(26, 16, 11, .22) 100%),
            url('../../images/ui/hud/content/header.jpg') !important;
        background-position: center, center bottom !important;
        background-repeat: no-repeat, repeat-x !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 238, 201, .42),
            inset 0 -1px 0 rgba(54, 35, 23, .68) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentTitle .travian-mobile-build-title {
        top: 9px !important;
        right: 43px !important;
        left: 43px !important;
        display: block !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #fff4df !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 24px !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #2e1b10 !important;
        white-space: nowrap !important;
        -webkit-text-fill-color: #fff4df !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentTitle .travian-mobile-build-title .level {
        display: inline !important;
        margin-right: 4px !important;
        color: #f2a83b !important;
        font-size: 12px !important;
        line-height: inherit !important;
        text-shadow: 0 1px 1px #3e260f !important;
        -webkit-text-fill-color: #f2a83b !important;
    }

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

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentTitle > :is(#closeContentButton, #tabFavorButton) {
        position: absolute !important;
        top: 9px !important;
        right: auto !important;
        left: 9px !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 #263d19 !important;
        border-radius: 4px !important;
        background-color: #52772f !important;
        background-image: linear-gradient(180deg, #89aa53 0, #52772f 54%, #354f22 100%) !important;
        box-shadow: inset 0 1px 0 rgba(235, 250, 207, .48), 0 1px 2px rgba(24, 15, 9, .55) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

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

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

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentTitle > #closeContentButton::after {
        top: 6px !important;
        right: 6px !important;
        width: 10px !important;
        height: 10px !important;
        background-size: 10px 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentTitle > #closeContentButton svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* Unit costs: anchor every value 4px above the lower edge and align the
       visual bottoms of differently-sized resource sprites on one baseline. */
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .resourceWrapper > .resource {
        position: relative !important;
        display: block !important;
        height: 37px !important;
        min-height: 37px !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .resourceWrapper > .resource > i {
        position: absolute !important;
        right: auto !important;
        bottom: 17px !important;
        left: 50% !important;
        margin: 0 !important;
        transform: translateX(-50%) scale(.72) !important;
        transform-origin: center bottom !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.action div.details .resourceWrapper > .resource > .value {
        position: absolute !important;
        right: 0 !important;
        bottom: 4px !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 10px !important;
        text-align: center !important;
    }

    /* Keep the unit portrait at its original scale, but centre it vertically
       inside the full-height image column instead of leaving all spare space
       beneath the artwork. */
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection {
        position: relative !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection > a:first-child {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection > a:first-child > img.unitSection {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        flex: 0 0 140px !important;
        width: 140px !important;
        height: 140px !important;
        margin: 0 !important;
        transform: scale(.59) !important;
        transform-origin: center center !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection > a:first-child::before,
    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection > a:first-child::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        z-index: 2 !important;
        display: block !important;
        width: 68px !important;
        height: 0 !important;
        pointer-events: none !important;
        transform: translateX(-50%) !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection > a:first-child::before {
        top: calc(50% - 44px) !important;
        border-top: 1px solid #c8bc9f !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window .buildActionOverview.trainUnits div.bigUnitSection > a:first-child::after {
        bottom: calc(50% - 44px) !important;
        border-bottom: 1px solid #9f8c67 !important;
    }
}

/* -------------------------------------------------------------------------
   Trav47 phone text buttons
   One visual system for all three phone layouts.  Icon-only controls retain
   their dedicated skins; only readable action buttons are normalized here.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body {
        --trav47-action-green-top: #8ab64a;
        --trav47-action-green-mid: #6f9933;
        --trav47-action-green-bottom: #4b711f;
        --trav47-action-green-border: #355419;
        --trav47-action-green-text: #fffced;
        --trav47-action-gold-top: #f7dc83;
        --trav47-action-gold-mid: #dfb547;
        --trav47-action-gold-bottom: #b87e1c;
        --trav47-action-gold-border: #704c0e;
        --trav47-action-gold-text: #392706;
    }

    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto;
        min-width: 82px;
        height: 30px !important;
        min-height: 30px !important;
        max-height: none !important;
        margin-top: 3px;
        margin-bottom: 3px;
        padding: 0 8px !important;
        overflow: hidden !important;
        color: var(--trav47-action-green-text) !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-indent: 0 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        appearance: none !important;
        background-color: var(--trav47-action-green-bottom) !important;
        background-image: linear-gradient(180deg,
            var(--trav47-action-green-top) 0%,
            var(--trav47-action-green-mid) 48%,
            var(--trav47-action-green-bottom) 100%) !important;
        border: 1px solid var(--trav47-action-green-border) !important;
        border-radius: 4px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .38),
            inset 0 -1px 0 rgba(28, 54, 12, .26),
            0 1px 2px rgba(35, 51, 20, .28) !important;
        text-shadow: 0 1px 1px rgba(24, 45, 12, .72) !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        box-sizing: border-box !important;
        cursor: pointer;
    }

    html#mainLayout[data-trav47-layout] body button.gold:not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) {
        color: var(--trav47-action-gold-text) !important;
        background-color: var(--trav47-action-gold-bottom) !important;
        background-image: linear-gradient(180deg,
            var(--trav47-action-gold-top) 0%,
            var(--trav47-action-gold-mid) 50%,
            var(--trav47-action-gold-bottom) 100%) !important;
        border-color: var(--trav47-action-gold-border) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .62),
            inset 0 -1px 0 rgba(93, 59, 7, .23),
            0 1px 2px rgba(91, 61, 13, .27) !important;
        text-shadow: 0 1px 0 rgba(255, 248, 206, .72) !important;
    }

    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) > .button-container,
    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) .button-content {
        position: static !important;
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: inherit !important;
        font: inherit !important;
        line-height: 1.15 !important;
        text-align: center !important;
        text-shadow: inherit !important;
        white-space: nowrap !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: inherit !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) .button-background,
    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) .buttonStart,
    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) .buttonEnd,
    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) .buttonMiddle {
        display: none !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body button.green:not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle):is(:hover, :focus-visible) {
        color: #fff !important;
        background-image: linear-gradient(180deg, #96c657 0%, #76a63a 48%, #567f26 100%) !important;
        border-color: #294713 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .48),
            0 0 0 2px rgba(196, 222, 153, .42),
            0 2px 4px rgba(31, 50, 16, .3) !important;
    }

    html#mainLayout[data-trav47-layout] body button.gold:not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle):is(:hover, :focus-visible) {
        color: #352609 !important;
        background-image: linear-gradient(180deg, #fff0aa 0%, #f4d56a 48%, #ca9429 100%) !important;
        border-color: #68470e !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .72),
            0 0 0 2px rgba(242, 211, 126, .38),
            0 2px 4px rgba(86, 57, 11, .28) !important;
    }

    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle):active {
        transform: translateY(1px) !important;
        filter: saturate(.96) brightness(.94) !important;
        box-shadow: inset 0 2px 3px rgba(35, 44, 18, .3) !important;
    }

    html#mainLayout[data-trav47-layout] body button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle):is(:disabled, .disabled) {
        opacity: .58 !important;
        filter: grayscale(.32) !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    }

    html#mainLayout[data-trav47-layout] body button.gold:not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) .goldIcon {
        order: 2 !important;
        flex: 0 0 14px !important;
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        background-size: 14px 14px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        filter: drop-shadow(0 1px 0 rgba(66, 41, 4, .3)) !important;
        transform: none !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body button.gold:not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) .goldValue {
        order: 1 !important;
        flex: 0 0 auto !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
    }

    /* Building upgrades are primary actions and have enough room for a clear
       Arabic label without shrinking it below the rest of the interface. */
    html#mainLayout[data-trav47-layout] body.build #content .upgradeButtonsContainer button.textButtonV1 {
        width: auto !important;
        min-width: 128px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: none !important;
        padding: 0 12px !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel {
        width: auto !important;
        min-width: 178px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: none !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        color: #f2f2f2 !important;
        border: 1px solid #200532 !important;
        background-color: #ad73c5 !important;
        background-image: linear-gradient(180deg, #ad73c5, #805d8f) !important;
        box-shadow: inset -2px 0 1px -1px #88579d,
                    inset 3px 0 1px -1px #87569b,
                    inset 0 3px 1px -1px #d68ef6,
                    inset 0 -3px 1px -1px rgba(66, 29, 83, .6) !important;
        text-shadow: -1px 1px 1px rgba(0, 0, 0, .5) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel:is(:hover, :focus-visible) {
        color: #333 !important;
        border-color: #4c1a6e !important;
        background-color: #ad73c5 !important;
        background-image: linear-gradient(180deg, transparent, #a87bbe) !important;
        box-shadow: inset 0 20px 25px -10px rgba(255, 255, 255, .7) !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel:active {
        color: #333 !important;
        background-image: linear-gradient(0deg, #9b6dae, #64327c) !important;
        box-shadow: inset -2px 0 1px -1px #88579d,
                    inset 3px 0 1px -1px #87569b !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel:is(:disabled, .disabled) {
        color: #333 !important;
        border-color: #665a6f !important;
        background: #7c7182 none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Compact resource exchange actions remain compact, but no longer use the
       unreadable 9-10px legacy label. */
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid29, .gid30, .gid44) div.action div.details .cta > button.exchange {
        flex: 0 0 92px !important;
        width: 92px !important;
        min-width: 92px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: none !important;
        padding: 0 8px !important;
        margin: 0 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid29, .gid30, .gid44) button.startTraining {
        width: auto !important;
        min-width: 116px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: none !important;
        padding: 0 16px !important;
        margin: 7px auto 0 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    html#mainLayout[data-trav47-layout] body .sidebar button.productionBoostButton {
        min-width: 76px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: none !important;
        padding: 0 10px !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        border-width: 1px !important;
        border-radius: 6px !important;
    }

    /* Content pages contain several old ID-heavy size rules.  This final
       authority prevents those rules from shrinking otherwise normalized
       labels back to 9-10px. */
    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer #content button:is(.green, .gold):not(.layoutButton):not(.iconButton):not(.round):not(.toggle):not(.villageActionsToggle) {
        height: var(--trav47-text-button-height, 31px) !important;
        min-height: var(--trav47-text-button-height, 31px) !important;
        max-height: none !important;
        padding-right: var(--trav47-text-button-padding, 10px) !important;
        padding-left: var(--trav47-text-button-padding, 10px) !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: var(--trav47-text-button-font-size, 11.5px) !important;
        line-height: 1.15 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content button.gold.exchange {
        --trav47-text-button-height: 30px;
        --trav47-text-button-padding: 6px;
        --trav47-text-button-font-size: 11px;
        width: 98px !important;
        min-width: 98px !important;
        max-width: 98px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content button.gold.exchange > .button-container,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content button.gold.exchange .button-content {
        flex: 0 0 auto !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content button.gold.exchange.finishTrainingGold {
        --trav47-text-button-height: 31px;
        --trav47-text-button-padding: 8px;
        --trav47-text-button-font-size: 11.5px;
        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content button.finishTrainingGold .goldIcon {
        display: inline-block !important;
        flex: 0 0 14px !important;
        width: 14px !important;
        min-width: 14px !important;
        height: 14px !important;
        margin: 0 2px !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* In RTL flex layout the legacy DOM order places the gold icon to the
       right of its value.  Explicit ordering keeps the number first and the
       icon visually to its left. */
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content button.upgradeToMaxLevel .goldValue {
        order: 1 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content button.upgradeToMaxLevel .goldIcon {
        order: 2 !important;
    }

    /* Clean activation/extension component. Its DOM is rebuilt without any
       of the legacy buttonStart/buttonEnd/buttonMiddle image structure. */
    html#mainLayout[data-trav47-layout] body button.trav47CleanGoldAction {
        all: unset !important;
        position: relative !important;
        display: inline-flex !important;
        direction: rtl !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        color: #3b2908 !important;
        background: linear-gradient(180deg, #f8df8a 0%, #ddb242 55%, #b67c1c 100%) !important;
        border: 1px solid #6d490c !important;
        border-radius: 4px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 1px 1px rgba(52,35,7,.25) !important;
        font: 700 10px/16px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 0 rgba(255,245,194,.72) !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    html#mainLayout[data-trav47-layout] body button.trav47CleanGoldAction:is(:hover, :focus-visible) {
        color: #2f2106 !important;
        background: linear-gradient(180deg, #ffe9a4 0%, #e7be50 55%, #c18720 100%) !important;
        border-color: #604008 !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 0 0 1px rgba(239,207,114,.34) !important;
    }

    html#mainLayout[data-trav47-layout] body button.trav47CleanGoldAction:active:not(.disabled):not(:disabled) {
        transform: translateY(1px) !important;
        filter: brightness(.94) !important;
        box-shadow: inset 0 2px 2px rgba(73,47,6,.28) !important;
    }

    html#mainLayout[data-trav47-layout] body button.trav47CleanGoldAction:is(.disabled, :disabled) {
        opacity: .52 !important;
        filter: grayscale(.38) !important;
        cursor: default !important;
    }

    html#mainLayout[data-trav47-layout] body button.trav47CleanGoldAction > .trav47CleanGoldActionLabel {
        all: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        height: 16px !important;
        color: inherit !important;
        font: 700 10px/16px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body button.trav47CleanGoldAction > .trav47CleanGoldPrice {
        all: unset !important;
        display: inline-flex !important;
        direction: rtl !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
        height: 16px !important;
        color: inherit !important;
        line-height: 16px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body button.trav47CleanGoldAction .trav47CleanGoldValue {
        all: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        direction: ltr !important;
        flex: 0 0 auto !important;
        height: 16px !important;
        color: inherit !important;
        font: 800 10px/16px Tahoma, Arial, sans-serif !important;
        unicode-bidi: isolate !important;
        box-sizing: border-box !important;
    }

}

/* Alliance phone header/tab seam: keep the first tab row physically joined
   to the compact header, regardless of generic content padding declared in
   older responsive sections above. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentTitle {
        margin-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window > .contentContainer {
        top: auto !important;
        margin-top: -1px !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window #content.alliance {
        padding-top: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #center #contentOuterContainer.trav47-alliance-window #content.alliance > .trav47-alliance-main-tabs {
        top: auto !important;
        margin-top: 0 !important;
        border-top: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance.trav47-alliance-loading::after {
        content: '' !important;
        position: absolute !important;
        top: 44px !important;
        left: 9px !important;
        z-index: 30 !important;
        width: 18px !important;
        height: 18px !important;
        border: 2px solid rgba(86, 116, 45, .25) !important;
        border-top-color: #62882c !important;
        border-radius: 50% !important;
        background: transparent !important;
        animation: trav47AllianceAjaxSpin .65s linear infinite !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-ajax-status {
        position: absolute !important;
        top: 42px !important;
        right: 7px !important;
        left: 7px !important;
        z-index: 31 !important;
        display: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 7px 9px !important;
        border: 1px solid #bcd0aa !important;
        border-radius: 4px !important;
        background: #edf5e7 !important;
        color: #44612d !important;
        font-size: 11.5px !important;
        line-height: 17px !important;
        text-align: center !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-ajax-status.is-visible {
        display: block !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-ajax-status.is-error {
        border-color: #dfb0a9 !important;
        background: #fbebe8 !important;
        color: #9d3128 !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance :is(#offs, #events).trav47-alliance-live-update {
        animation: trav47AllianceLiveFlash .9s ease-out !important;
    }
}

@keyframes trav47AllianceAjaxSpin {
    to { transform: rotate(360deg); }
}

@keyframes trav47AllianceLiveFlash {
    0% { box-shadow: 0 0 0 2px rgba(112, 155, 54, .52); }
    100% { box-shadow: 0 0 0 0 rgba(112, 155, 54, 0); }
}

@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-summary-grid :is(#details, #memberTitles) {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: stretch !important;
    }

    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-summary-grid :is(#details, #memberTitles) > h4.round.small {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        float: none !important;
        display: flex !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* Alliance combat-points helper.  It is shared by desktop and all phone
   layouts because the figures come from the same alliance statistics. */
/* Shared playable-tribe emblems.  Both compact and medium placements use the
   same artwork and scale it without cropping. */
i:is(.tribe1_small, .tribe1_medium) {
    background-image: url('../../images/icons/tribes/roman_medium.png') !important;
}

i:is(.tribe2_small, .tribe2_medium) {
    background-image: url('../../images/icons/tribes/teuton_medium.png') !important;
}

i:is(.tribe3_small, .tribe3_medium) {
    background-image: url('../../images/icons/tribes/gaul_medium.png') !important;
}

i:is(.tribe6_small, .tribe6_medium) {
    background-image: url('../../images/icons/tribes/egyptian_medium.png') !important;
}

i:is(.tribe7_small, .tribe7_medium) {
    background-image: url('../../images/icons/tribes/hun_medium.png') !important;
}

i:is(.tribe1_small, .tribe2_small, .tribe3_small, .tribe6_small, .tribe7_small) {
    width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

i:is(.tribe1_medium, .tribe2_medium, .tribe3_medium, .tribe6_medium, .tribe7_medium) {
    width: 22px !important;
    height: 26px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.alliance.trav47AlliancePage #content.alliance table.allianceMembers td.tribe > i:is(.tribe1_medium, .tribe2_medium, .tribe3_medium, .tribe6_medium, .tribe7_medium) {
        width: 24px !important;
        height: 33px !important;
    }
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers {
    width: 100% !important;
    table-layout: fixed !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers col.counter {
    width: 42px !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers col.tribe {
    width: 34px !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers col.hab {
    width: 92px !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers col.vil {
    width: 64px !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers td.player {
    width: auto !important;
    max-width: none !important;
    direction: rtl !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers td.hab,
html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers td.vil {
    text-align: center !important;
    white-space: nowrap !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance #memberTitles td.trav47-alliance-manager-line {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    direction: rtl !important;
    width: auto !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    overflow: hidden !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance #memberTitles .trav47-alliance-manager-separator {
    display: inline-block !important;
    margin: 0 1px 0 4px !important;
    color: #8a806f !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance table.allianceMembers td.tribe > .trav47StatisticsTribeHeaderIcon {
    display: block !important;
    width: 18px !important;
    height: auto !important;
    margin: 0 auto !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-points-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    direction: rtl !important;
    white-space: nowrap !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-points-value {
    display: inline-block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    font-variant-numeric: tabular-nums !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-points-help {
    display: inline-flex !important;
    flex: 0 0 17px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #6e5a35 !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #f2d889 0, #c6a24d 100%) !important;
    color: #4e3c1f !important;
    font: 700 11px/15px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 1px 1px rgba(58, 44, 26, .24) !important;
    cursor: pointer !important;
    appearance: none !important;
    box-sizing: border-box !important;
}

html#mainLayout body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-points-help:hover,
html#mainLayout body.alliance.trav47AlliancePage #content.alliance .trav47-alliance-points-help:focus-visible {
    background: linear-gradient(180deg, #ffe7a0 0, #d5b15b 100%) !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 #fff3bf, 0 0 0 2px rgba(184, 143, 52, .22) !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-points-overlay[hidden] {
    display: none !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-points-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10020 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: rgba(22, 17, 12, .48) !important;
    backdrop-filter: blur(1px) !important;
    box-sizing: border-box !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-points-dialog {
    width: min(330px, calc(100vw - 12px)) !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 1px solid #493526 !important;
    border-radius: 6px !important;
    background: #a88456 !important;
    box-shadow: inset 0 1px 0 #ecd5ad, 0 7px 22px rgba(21, 14, 9, .5) !important;
    box-sizing: border-box !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-points-dialog-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 35px !important;
    padding: 0 35px !important;
    border-bottom: 2px solid #b68a43 !important;
    border-radius: 3px 3px 0 0 !important;
    background: linear-gradient(180deg, #674b38 0, #493326 100%) !important;
    box-sizing: border-box !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-points-dialog-header h3 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #fff4df !important;
    font: 700 13px/33px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 1px #2e1b10 !important;
    white-space: nowrap !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-points-close {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    border: 1px solid #263d19 !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #89aa53 0, #52772f 58%, #354f22 100%) !important;
    color: #fff !important;
    font: 700 17px/19px Arial, sans-serif !important;
    box-shadow: inset 0 1px 0 rgba(235, 250, 207, .48) !important;
    cursor: pointer !important;
    appearance: none !important;
    box-sizing: border-box !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-combat-row {
    display: grid !important;
    grid-template-columns: minmax(44px, .55fr) minmax(58px, .65fr) minmax(124px, 1.8fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 37px !important;
    padding: 6px 7px !important;
    gap: 2px !important;
    border: 1px solid #d5cdbf !important;
    border-top: 0 !important;
    background: #fff !important;
    color: #474138 !important;
    font: 11.5px/17px Tahoma, Arial, sans-serif !important;
    box-sizing: border-box !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-combat-row:last-child {
    border-radius: 0 0 3px 3px !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-combat-row + .trav47-alliance-combat-row {
    border-top: 1px solid #ebe5da !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-combat-title {
    color: #516e2f !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-combat-row span {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    gap: 3px !important;
    overflow: visible !important;
    text-align: right !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

html#mainLayout body.alliance.trav47AlliancePage .trav47-alliance-combat-row b {
    display: inline-block !important;
    min-width: 0 !important;
    color: #2f2b25 !important;
    font-size: clamp(10px, 2.9vw, 11.5px) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
}

/* Market plans: shared structure. */
.trav47MarketPlanPage {
    width: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.trav47MarketPlanCreateToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 150px;
    min-height: 38px;
    margin: 0 0 8px auto;
    padding: 7px 10px;
    gap: 7px;
    border: 1px solid #aeba9e;
    border-radius: 5px;
    background: linear-gradient(#f5faef, #dce9cf);
    color: #405739;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    cursor: pointer;
    box-sizing: border-box;
}

.trav47MarketPlanCreateToggle > b {
    font: 700 20px/20px Arial, sans-serif;
}

.trav47MarketPlanForm[hidden] {
    display: none !important;
}

.trav47MarketPlanForm {
    width: 100%;
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid #c5cec0;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

.trav47MarketPlanForm > h4 {
    margin: -10px -10px 9px;
    padding: 6px 9px;
    border: 0;
    border-bottom: 1px solid #cbd4c6;
    border-radius: 5px 5px 0 0;
    background: #e5efe1;
}

.trav47MarketPlanGrid {
    display: grid;
    grid-template-columns: minmax(190px, 1.6fr) repeat(4, minmax(75px, 1fr)) minmax(90px, .8fr);
    align-items: end;
    gap: 7px;
}

.trav47MarketPlanField label {
    display: block;
    margin: 0 0 4px;
    font-weight: 700;
}

.trav47MarketPlanField input,
.trav47MarketPlanField select {
    width: 100%;
    min-height: 31px;
    box-sizing: border-box;
}

.trav47MarketPlanResourceLabel {
    white-space: nowrap;
}

.trav47MarketPlanActions,
.trav47MarketPlanButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.trav47MarketPlanActions {
    margin-top: 9px;
    justify-content: space-between;
}

.trav47MarketPlanIntervalInline,
.trav47MarketPlanActionButtons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.trav47MarketPlanIntervalInline {
    white-space: nowrap;
}

.trav47MarketPlanIntervalInline input {
    width: 44px;
    min-height: 29px;
    text-align: center;
    box-sizing: border-box;
}

.trav47MarketPlanCancel {
    min-width: 70px;
    min-height: 29px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #f2f2f2;
    color: #555;
    font: 700 11px/20px Tahoma, Arial, sans-serif;
}

.trav47MarketPlanListHeading {
    margin-bottom: 0 !important;
}

.trav47MarketPlanTargetMeta,
.trav47MarketPlanStatus {
    margin-top: 3px;
    color: #737d6e;
    font-size: 10px;
}

.trav47MarketPlanResources {
    display: grid;
    grid-template-columns: repeat(2, minmax(65px, 1fr));
    gap: 3px 6px;
    white-space: nowrap;
}

.trav47MarketPlanButtons {
    flex-wrap: wrap;
}

.trav47MarketPlanButtons form {
    display: inline-block;
    margin: 0;
}

.trav47MarketPlanEmpty {
    padding: 16px !important;
    color: #777;
    text-align: center;
}

.trav47MarketPlanList {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 6px;
    gap: 6px;
    border: 1px solid #bdc9b3;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: #f7f9f5;
    box-sizing: border-box;
}

.trav47MarketPlanItem {
    width: 100%;
    margin: 0;
    border: 1px solid #c4cec0;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

.trav47MarketPlanSummary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 52px 18px;
    align-items: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 6px 9px;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(#fff, #eef4ea);
    color: #3e4b39;
    font: 700 11px/20px Tahoma, Arial, sans-serif;
    text-align: right;
    cursor: pointer;
    appearance: none;
    box-sizing: border-box;
}

.trav47MarketPlanSummaryTarget {
    min-width: 0;
    overflow: hidden;
    color: #5f861d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trav47MarketPlanSummaryInterval,
.trav47MarketPlanSummaryState {
    white-space: nowrap;
}

.trav47MarketPlanSummaryInterval {
    color: #596553;
    font-variant-numeric: tabular-nums;
}

.trav47MarketPlanSummaryState {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 6px;
    border-radius: 11px;
    font-size: 10px;
    line-height: 16px;
    box-sizing: border-box;
}

.trav47MarketPlanSummaryState.is-active {
    background: #e4f1d7;
    color: #4c771c;
}

.trav47MarketPlanSummaryState.is-paused {
    background: #eeeae5;
    color: #776c61;
}

.trav47MarketPlanSummaryArrow {
    color: #6d7a65;
    font: 700 16px/18px Arial, sans-serif;
    text-align: center;
    transition: transform .16s ease;
}

.trav47MarketPlanItem.is-open .trav47MarketPlanSummaryArrow {
    transform: rotate(180deg);
}

.trav47MarketPlanDetails[hidden] {
    display: none !important;
}

.trav47MarketPlanDetails {
    padding: 7px;
    border-top: 1px solid #cfd8ca;
    background: #fff;
}

.trav47MarketPlanDetailGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.trav47MarketPlanDetail {
    min-width: 0;
    padding: 6px;
    border: 1px solid #e0e6dc;
    border-radius: 4px;
    background: #f8faf7;
    color: #4b5547;
    font: 400 10px/16px Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

.trav47MarketPlanDetail > strong {
    display: block;
    margin: -6px -6px 5px;
    padding: 3px 6px;
    border-bottom: 1px solid #dce4d8;
    background: #edf4e9;
    color: #485a41;
    font-weight: 700;
}

.trav47MarketPlanDetailTarget,
.trav47MarketPlanDetailResourcesBlock {
    grid-column: 1 / -1;
}

.trav47MarketPlanDetailResourcesBlock .trav47MarketPlanResources {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    gap: 4px;
}

.trav47MarketPlanDetailResourcesBlock .trav47MarketPlanResources > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 2px;
    direction: ltr;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trav47MarketPlanDetailResourcesBlock .trav47MarketPlanResources > span > i {
    display: block;
    flex: 0 0 auto;
    margin: 0 auto;
}

.trav47MarketPlanDetailLastLoad {
    grid-column: 1 / -1;
}

.trav47MarketPlanDetailLastLoad .trav47MarketPlanResources {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
}

.trav47MarketPlanDetailLastLoad .trav47MarketPlanResources > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 2px;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trav47MarketPlanDetailLastLoad .trav47MarketPlanResources > span > i {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
}

.trav47MarketPlanDetailTarget > small {
    display: block;
    margin-top: 2px;
    color: #768071;
}

.trav47MarketPlanDetailNextRun,
.trav47MarketPlanDetailNextRun > strong {
    text-align: center;
}

.trav47MarketPlanDetailNextRun .trav47MarketPlanStatus,
.trav47MarketPlanDetailNextRun .timer {
    display: block;
    width: 100%;
    text-align: center;
}

.trav47MarketPlanDetails > .trav47MarketPlanButtons {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #e1e6de;
}

.trav47MarketPlanConfirm[hidden] {
    display: none !important;
}

.trav47MarketPlanConfirm {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(29, 35, 25, .58);
    direction: rtl;
    box-sizing: border-box;
}

.trav47MarketPlanConfirmBox {
    width: min(310px, calc(100vw - 36px));
    overflow: hidden;
    border: 1px solid #9cab91;
    border-radius: 8px;
    background: #fff;
    color: #354032;
    box-shadow: 0 8px 24px rgba(24, 31, 20, .34);
    box-sizing: border-box;
}

.trav47MarketPlanConfirmBox > h4 {
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #c4cfbd;
    border-radius: 0;
    background: linear-gradient(#edf5e8, #dce9d5);
    color: #34472f;
    font: 700 14px/20px Tahoma, Arial, sans-serif;
    text-align: right;
}

.trav47MarketPlanConfirmBox > p {
    margin: 0;
    padding: 16px 12px 13px;
    color: #4a5146;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    text-align: center;
}

.trav47MarketPlanConfirmActions {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px 14px;
    gap: 8px;
}

.trav47MarketPlanConfirmActions > button {
    min-width: 82px;
    min-height: 32px;
    margin: 0;
    padding: 5px 12px;
    border-radius: 5px;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    cursor: pointer;
    box-sizing: border-box;
}

.trav47MarketPlanConfirmDelete {
    border: 1px solid #9e3e32;
    background: linear-gradient(#d66b5c, #ad4639);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.trav47MarketPlanConfirmCancel {
    border: 1px solid #9da997;
    background: linear-gradient(#f7faf5, #e2e9de);
    color: #40503b;
}

html.trav47-market-plan-confirm-open,
html.trav47-market-plan-confirm-open body {
    overflow: hidden !important;
}

/* Market plans: compact cards for the three phone layouts. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanPage {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 22px !important;
        direction: rtl !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanCreateToggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        min-width: 150px !important;
        min-height: 36px !important;
        margin: 0 0 7px auto !important;
        padding: 6px 9px !important;
        gap: 7px !important;
        border: 1px solid #a9b99b !important;
        border-radius: 5px !important;
        background: linear-gradient(#f5faef, #dce9cf) !important;
        background-image: linear-gradient(#f5faef, #dce9cf) !important;
        color: #3f5636 !important;
        font: 700 11px/20px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-shadow: inset 0 1px 0 #fff !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanCreateToggle > b {
        color: #65852e !important;
        font: 700 19px/20px Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanForm {
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 7px !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px !important;
        background: #fff !important;
        overflow: visible !important;
        box-shadow: 0 1px 2px rgba(61, 72, 51, .09) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanForm[hidden] {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanForm > h4 {
        width: calc(100% + 14px) !important;
        min-height: 30px !important;
        margin: -7px -7px 7px !important;
        padding: 6px 8px !important;
        border: 0 !important;
        border-bottom: 1px solid #ccd6c7 !important;
        border-radius: 4px 4px 0 0 !important;
        background: #e5efe1 !important;
        color: #3f4e39 !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanGrid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: end !important;
        width: 100% !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanFieldTarget {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        gap: 7px !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanFieldTarget > label {
        justify-content: flex-start !important;
        margin: 0 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageSelect {
        position: relative !important;
        z-index: 12 !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto 0 0 !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageTrigger {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: fit-content !important;
        min-width: 116px !important;
        max-width: 170px !important;
        height: 33px !important;
        min-height: 33px !important;
        margin: 0 !important;
        padding: 4px 7px !important;
        gap: 8px !important;
        border: 1px solid #aebb9f !important;
        border-radius: 4px !important;
        background: linear-gradient(#fff, #edf3e9) !important;
        background-image: linear-gradient(#fff, #edf3e9) !important;
        color: #40503a !important;
        font: 700 10px/23px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-shadow: inset 0 1px 0 #fff !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageTrigger[aria-invalid="true"] {
        border-color: #b95d4e !important;
        box-shadow: 0 0 0 1px rgba(185, 93, 78, .16) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageTrigger > span {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageTrigger > b {
        flex: 0 0 auto !important;
        color: #698150 !important;
        font: 700 14px/18px Arial, sans-serif !important;
        transition: transform .12s ease !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageSelect.is-open .trav47MarketPlanVillageTrigger > b {
        transform: rotate(180deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageMenu {
        position: absolute !important;
        z-index: 40 !important;
        top: calc(100% + 3px) !important;
        left: 0 !important;
        display: none !important;
        width: max(100%, 140px) !important;
        margin: 0 !important;
        padding: 3px !important;
        border: 1px solid #9eae92 !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-shadow: 0 5px 13px rgba(44, 53, 38, .24) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageSelect.is-open .trav47MarketPlanVillageMenu {
        display: grid !important;
        gap: 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageOption {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 4px 7px !important;
        border: 0 !important;
        border-radius: 3px !important;
        background: #f7f9f5 !important;
        background-image: none !important;
        color: #46533f !important;
        font: 700 10px/20px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-shadow: none !important;
        appearance: none !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageOption:hover,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanVillageOption.is-selected {
        background: #dceacb !important;
        color: #3c6018 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanFieldTarget select.trav47MarketPlanVillageNative {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanResourceField,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanIntervalField {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) 64px !important;
        align-items: center !important;
        min-height: 39px !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        gap: 6px !important;
        border: 1px solid #d2d9ce !important;
        border-radius: 4px !important;
        background: #f8faf7 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanQuickFill {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 64px !important;
        min-width: 64px !important;
        height: 33px !important;
        min-height: 33px !important;
        margin: 0 !important;
        padding: 1px 3px !important;
        gap: 0 !important;
        border: 1px solid #aebe9f !important;
        border-radius: 4px !important;
        background: linear-gradient(#f7fbf3, #e2ecd9) !important;
        background-image: linear-gradient(#f7fbf3, #e2ecd9) !important;
        color: #526a3d !important;
        font: 700 8px/13px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-shadow: inset 0 1px 0 #fff !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanQuickFill > b {
        max-width: 100% !important;
        color: #3f611e !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanQuickFill:hover,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanQuickFill:active {
        border-color: #779442 !important;
        background: #d8e8c8 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanQuickFill:disabled {
        opacity: .38 !important;
        filter: grayscale(.55) !important;
        cursor: default !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanResourceField:nth-of-type(odd) {
        background: #f2f6ef !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanField label {
        display: flex !important;
        align-items: center !important;
        min-height: 18px !important;
        margin: 0 0 3px !important;
        gap: 3px !important;
        color: #4c5847 !important;
        font: 700 9.5px/18px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanResourceField > label,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanIntervalField > label {
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanResourceLabel > i {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanResourceLabel > span {
        display: inline-block !important;
        min-width: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanField input,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanField select {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 33px !important;
        min-height: 33px !important;
        margin: 0 !important;
        padding: 4px 6px !important;
        border: 1px solid #b9c4b3 !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #354032 !important;
        font: 700 10px/23px Tahoma, Arial, sans-serif !important;
        direction: rtl !important;
        text-align: center !important;
        box-shadow: inset 0 1px 2px rgba(61, 72, 53, .09) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanField input[type="number"] {
        direction: ltr !important;
        font-variant-numeric: tabular-nums !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanActions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        gap: 5px !important;
        direction: rtl !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanIntervalInline {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 4px !important;
        color: #4c5847 !important;
        font: 700 9px/18px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanIntervalControl {
        display: grid !important;
        grid-template-columns: 36px !important;
        justify-items: center !important;
        flex: 0 0 72px !important;
        width: 72px !important;
        margin: 0 !important;
        gap: 1px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanIntervalInline input {
        display: block !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 29px !important;
        min-height: 29px !important;
        margin: 0 !important;
        padding: 2px !important;
        border: 1px solid #b9c4b3 !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #354032 !important;
        font: 700 10px/23px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
        box-shadow: inset 0 1px 2px rgba(61, 72, 53, .09) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanIntervalInline input.is-invalid {
        border-color: #bd6252 !important;
        box-shadow: 0 0 0 1px rgba(189, 98, 82, .14) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanIntervalControl > small {
        display: block !important;
        width: 72px !important;
        color: #9a5947 !important;
        font: 400 7.5px/11px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanActionButtons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        gap: 5px !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanCancel {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 54px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 3px 10px !important;
        border: 1px solid #b7b7b0 !important;
        border-radius: 4px !important;
        background: linear-gradient(#fff, #e7e7e1) !important;
        background-image: linear-gradient(#fff, #e7e7e1) !important;
        color: #585851 !important;
        font: 700 10px/20px Tahoma, Arial, sans-serif !important;
        box-shadow: inset 0 1px 0 #fff !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanListHeading {
        display: block !important;
        width: 100% !important;
        min-height: 31px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px 5px 0 0 !important;
        background: #e5efe1 !important;
        color: #3f4e39 !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanList {
        display: grid !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px !important;
        gap: 4px !important;
        border: 1px solid #bdc9b3 !important;
        border-top: 0 !important;
        border-radius: 0 0 5px 5px !important;
        background: #f7f9f5 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanItem {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border: 1px solid #c4cec0 !important;
        border-radius: 4px !important;
        background: #fff !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 button.trav47MarketPlanSummary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto 40px 14px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 37px !important;
        min-height: 37px !important;
        max-height: 37px !important;
        margin: 0 !important;
        padding: 5px 6px !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(#fff, #eef4ea) !important;
        background-image: linear-gradient(#fff, #eef4ea) !important;
        color: #3e4b39 !important;
        font: 700 9.5px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        appearance: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanSummaryTarget {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #5f861d !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanSummaryInterval {
        display: block !important;
        color: #596553 !important;
        font: 700 8.5px/18px Tahoma, Arial, sans-serif !important;
        direction: rtl !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanSummaryState {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 21px !important;
        min-height: 21px !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        border: 0 !important;
        border-radius: 10px !important;
        font: 700 8.5px/17px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanSummaryState.is-active {
        background: #e4f1d7 !important;
        color: #4c771c !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanSummaryState.is-paused {
        background: #eeeae5 !important;
        color: #776c61 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanSummaryArrow {
        display: block !important;
        color: #6d7a65 !important;
        font: 700 14px/16px Arial, sans-serif !important;
        text-align: center !important;
        transition: transform .16s ease !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanItem.is-open .trav47MarketPlanSummaryArrow {
        transform: rotate(180deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetails {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px !important;
        border: 0 !important;
        border-top: 1px solid #cfd8ca !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetails[hidden] {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailGrid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetail {
        display: block !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 5px !important;
        border: 1px solid #e0e6dc !important;
        border-radius: 4px !important;
        background: #f8faf7 !important;
        color: #4b5547 !important;
        font: 400 9px/15px Tahoma, Arial, sans-serif !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetail > strong {
        display: block !important;
        margin: -5px -5px 4px !important;
        padding: 3px 5px !important;
        border: 0 !important;
        border-bottom: 1px solid #dce4d8 !important;
        background: #edf4e9 !important;
        color: #485a41 !important;
        font: 700 8.5px/15px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailTarget,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailResourcesBlock {
        grid-column: 1 / -1 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetails > .trav47MarketPlanButtons {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 31px !important;
        margin: 5px 0 0 !important;
        padding: 5px 0 0 !important;
        gap: 7px !important;
        border-top: 1px solid #e1e6de !important;
        flex-wrap: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanList > .trav47MarketPlanEmpty {
        display: block !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 14px 7px !important;
        border: 0 !important;
        background: transparent !important;
        color: #777f73 !important;
        font: 400 10px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanResources {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 3px 7px !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanResources > span {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        gap: 3px !important;
        direction: ltr !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailResourcesBlock .trav47MarketPlanResources {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailResourcesBlock .trav47MarketPlanResources > span {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailResourcesBlock .trav47MarketPlanResources > span > i {
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 auto !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailLastLoad {
        grid-column: 1 / -1 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailLastLoad .trav47MarketPlanResources {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailLastLoad .trav47MarketPlanResources > span {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailLastLoad .trav47MarketPlanResources > span > i {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailNextRun,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailNextRun > strong,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailNextRun .trav47MarketPlanStatus,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailNextRun .timer {
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailNextRun .trav47MarketPlanStatus,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanDetailNextRun .timer {
        display: block !important;
        width: 100% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanTargetMeta,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanStatus {
        margin-top: 3px !important;
        color: #74806e !important;
        font-size: 9px !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanButtons {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 24px !important;
        gap: 7px !important;
        flex-wrap: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPlanButtons form {
        display: block !important;
        margin: 0 !important;
    }

}

/* Market: buy offers — unified phone layout for mobile, web-right and web-left. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyPage {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 22px !important;
        direction: rtl !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyTraderCount {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        float: none !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 0 6px !important;
        padding: 6px 9px !important;
        gap: 8px !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px !important;
        background: #f1f6ed !important;
        color: #465640 !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyTraderCount > strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        direction: rtl !important;
        gap: 4px !important;
        color: #60891d !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyTraderCount > strong > span {
        display: inline-block !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyPage > .clear,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyTraderCount + .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr) !important;
        align-items: stretch !important;
        float: none !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        gap: 5px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters > .boxes {
        position: relative !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters > .boxes > :not(.boxes-contents) {
        display: none !important;
        background: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .boxes-contents {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters table.buy_select {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        table-layout: fixed !important;
        background: transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters table.buy_select thead td {
        height: 28px !important;
        padding: 4px 3px !important;
        border: 0 !important;
        border-bottom: 1px solid #ccd6c7 !important;
        background: #e5efe1 !important;
        color: #3f4e39 !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters table.buy_select tbody td {
        height: 40px !important;
        padding: 4px 1px !important;
        border: 0 !important;
        background: #fff !important;
        text-align: center !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters button.iconFilter {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        width: 27px !important;
        min-width: 27px !important;
        height: 29px !important;
        min-height: 29px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #c5cec0 !important;
        border-radius: 4px !important;
        background: linear-gradient(#fff, #edf2e9) !important;
        box-shadow: 0 1px 1px rgba(67, 77, 55, .12), inset 0 1px 0 #fff !important;
        appearance: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters button.iconFilter:hover,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters button.iconFilterActive {
        border-color: #789941 !important;
        background: linear-gradient(#dff0c7, #bfd990) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters button.iconFilter::before,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters button.iconFilter::after {
        display: none !important;
        content: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters button.iconFilter i {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .ratio_select {
        min-width: 50px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .ratio_select table.buy_select tbody td {
        height: 35px !important;
        padding: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .ratio_select button.iconFilter {
        width: 42px !important;
        min-width: 42px !important;
        height: 28px !important;
        min-height: 28px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .ratio_select img.marketPercentage {
        display: none !important;
        float: none !important;
        margin: 0 auto !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .ratio_select button.iconFilter::after {
        display: block !important;
        width: 100% !important;
        color: #465640 !important;
        font: 700 11px/26px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        text-align: center !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .9) !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .ratio_select button.iconFilter[value*="1_1"]::after {
        content: "1:1" !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .ratio_select button.iconFilter[value*="1_x"]::after {
        content: "1:x" !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyFilters .ratio_select button.iconFilterActive::after {
        color: #345612 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketBuyPage[aria-busy="true"] {
        transition: opacity .12s ease !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketOffersHeading {
        display: block !important;
        width: 100% !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 6px 9px !important;
        border: 1px solid #bdc9b3 !important;
        border-radius: 5px 5px 0 0 !important;
        background: #e5efe1 !important;
        color: #34422f !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #bdc9b3 !important;
        border-top: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 0 0 5px 5px !important;
        table-layout: fixed !important;
        background: #fff !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable thead td {
        height: 29px !important;
        padding: 4px 2px !important;
        border: 0 !important;
        border-bottom: 1px solid #c9d1c5 !important;
        border-left: 1px solid #d9ded6 !important;
        background: #f3f6f1 !important;
        color: #485443 !important;
        font: 700 9px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable thead td:last-child,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable tbody td:last-child {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable thead td:nth-child(1),
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable thead td:nth-child(2) {
        width: 22% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable thead td:nth-child(3) {
        width: 24% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable thead td:nth-child(4) {
        width: 17% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable thead td:nth-child(5) {
        width: 15% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable tbody td {
        height: 35px !important;
        padding: 4px 2px !important;
        border: 0 !important;
        border-bottom: 1px solid #e4e8e1 !important;
        border-left: 1px solid #edf0eb !important;
        background: #fff !important;
        color: #423f39 !important;
        font: 400 9.5px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable td.val,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable td.dur {
        direction: ltr !important;
        unicode-bidi: isolate !important;
        font-variant-numeric: tabular-nums !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable td.pla a {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable td.act button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 42px !important;
        height: 26px !important;
        min-height: 26px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 table.trav47MarketOffersTable td.none[colspan] {
        height: auto !important;
        padding: 13px 6px !important;
        color: #777f72 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPaginator {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        direction: rtl !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 7px 0 0 !important;
        padding: 3px 0 !important;
        gap: 18px !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPaginator .travianPagerArrow {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #789640 !important;
        border-radius: 5px !important;
        background: linear-gradient(#f4fae9, #d7e8b9) !important;
        background-image: linear-gradient(#f4fae9, #d7e8b9) !important;
        color: #43651c !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-indent: 0 !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(56, 69, 39, .14) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPaginator .travianPagerArrow::before {
        display: block !important;
        color: inherit !important;
        font: 700 25px/28px Arial, sans-serif !important;
        text-indent: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPaginator .travianPagerPrevious::before {
        content: "‹" !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPaginator .travianPagerNext::before {
        content: "›" !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPaginator .travianPagerArrow:not(.disabled):hover,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPaginator .travianPagerArrow:not(.disabled):active {
        border-color: #658128 !important;
        background: linear-gradient(#e7f4ce, #c6dd9a) !important;
        color: #31520f !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid17 .trav47MarketPaginator .travianPagerArrow.disabled {
        opacity: .3 !important;
        filter: grayscale(.65) !important;
        pointer-events: none !important;
        box-shadow: none !important;
    }
}

/* -------------------------------------------------------------------------
   Available buildings — shared card layout.
   The same structured building cards now serve the main desktop layout and
   the three phone presentations across all three building categories.
   ------------------------------------------------------------------------- */
@media screen {
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #center #contentOuterContainer.trav47-available-buildings-window {
        --trav47-building-accent: #78923f !important;
    }

    /* Keep the original desktop page title, spacing, and tab strip. */
    @media screen and (max-width: 1024px) {
        html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #center #contentOuterContainer.trav47-available-buildings-window #content.build {
            padding: 0 6px calc(34px + env(safe-area-inset-bottom, 0px)) !important;
            overflow: visible !important;
        }

        html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #content.build > .trav47AvailableBuildingTitle {
            display: none !important;
        }

        html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #center #contentOuterContainer.trav47-available-buildings-window #content.build > .trav47AvailableBuildingTabs {
        display: block !important;
        width: calc(100% + 14px) !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: -7px -7px 6px !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #332318 !important;
        border-radius: 0 !important;
        background:
            linear-gradient(180deg, rgba(255, 241, 210, .11), transparent 40%, rgba(18, 10, 6, .18)),
            #513a2b !important;
        box-shadow: inset 0 1px 0 rgba(255, 231, 189, .25), inset 0 -1px 0 rgba(25, 14, 8, .48) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #content.build > .trav47AvailableBuildingTabs > button,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #content.build > .trav47AvailableBuildingTabs > .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingTabs > .scrollingContainer {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: initial !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingTabs .content {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingTabs a.tabItem {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 3px !important;
        border: 0 !important;
        border-left: 1px solid rgba(239, 210, 162, .24) !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .06)) !important;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .06)) !important;
        color: #f2e4c9 !important;
        font: 700 10.5px/34px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: 0 1px 1px #2a190f !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingTabs .content:last-child a.tabItem {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingTabs a.tabItem::before,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingTabs a.tabItem::after {
        content: none !important;
        display: none !important;
    }

        html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingTabs a.tabItem.active {
            background: linear-gradient(180deg, #91b653 0, #6f9736 53%, #527523 100%) !important;
            background-image: linear-gradient(180deg, #91b653 0, #6f9736 53%, #527523 100%) !important;
            color: #fff !important;
            text-shadow: 0 1px 1px #2f4c14 !important;
            box-shadow: inset 0 1px 0 rgba(240, 255, 212, .6), inset 0 -1px 0 rgba(41, 65, 18, .48) !important;
        }
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #content.build > #build.gid0.trav47AvailableBuildings {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #build.trav47AvailableBuildings > hr,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #build.trav47AvailableBuildings > .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #build.trav47AvailableBuildings > .trav47AvailableBuildingCard {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        border: 1px solid #aebaa7 !important;
        border-radius: 6px !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(45, 57, 38, .13), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #build.trav47AvailableBuildings > .trav47AvailableBuildingCard.is-soon {
        border-color: #c2bba9 !important;
        background: #fcfbf7 !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard > h2 {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 29px !important;
        margin: 0 !important;
        padding: 5px 9px !important;
        border: 0 !important;
        border-bottom: 1px solid #c2cfba !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #eff6eb, #dce9d6) !important;
        color: #3e5038 !important;
        font: 700 12px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-shadow: 0 1px 0 #fff !important;
        box-shadow: inset 0 1px 0 #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard.is-soon > h2 {
        border-bottom-color: #d4cbb8 !important;
        background: linear-gradient(180deg, #f6f1e7, #e9dfcd) !important;
        color: #67573f !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard > .build_desc {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 88px !important;
        margin: 0 !important;
        padding: 6px !important;
        gap: 7px !important;
        border: 0 !important;
        background: #fff !important;
        direction: ltr !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard.is-soon > .build_desc {
        background: #fcfbf7 !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard .build_desc > a.build_logo {
        position: relative !important;
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        width: 88px !important;
        min-width: 88px !important;
        height: 76px !important;
        min-height: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #c9c1ad !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #f5f0e5, #e7dfcf) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard .build_desc > a.build_logo::before,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard .build_desc > a.build_logo::after {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard .build_desc img.build_logo.building.big {
        position: absolute !important;
        top: -15px !important;
        left: -4px !important;
        right: auto !important;
        float: none !important;
        width: 184px !important;
        height: 179px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background-color: transparent !important;
        transform: scale(.5) !important;
        transform-origin: top left !important;
        filter: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard .build_desc > .buildDescriptionText {
        display: flex !important;
        align-items: center !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 76px !important;
        margin: 0 !important;
        padding: 6px 7px !important;
        border: 1px solid #dce3d8 !important;
        border-radius: 5px !important;
        background: #f8faf7 !important;
        color: #465043 !important;
        direction: rtl !important;
        font: 400 10px/16px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-shadow: none !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard.is-soon .build_desc > .buildDescriptionText {
        border-color: #e3ddcf !important;
        background: #faf8f2 !important;
        color: #615d54 !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard > .trav47AvailableContract {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        width: calc(100% - 12px) !important;
        min-width: 0 !important;
        margin: 0 6px 6px !important;
        padding: 6px !important;
        gap: 5px 7px !important;
        border: 1px solid #ccd7c6 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #f5f9f2, #edf4e9) !important;
        color: #465340 !important;
        box-shadow: inset 0 1px 0 #fff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard > .trav47AvailableContract.is-locked {
        border-color: #ddd3bf !important;
        background: linear-gradient(180deg, #faf7f0, #f2ece0) !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .trav47AvailableCostLabel {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #52604c !important;
        font: 700 9.5px/18px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .trav47AvailableResources {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-items: start !important;
        justify-content: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 1px !important;
        color: #3f493b !important;
        font: 700 8.5px/13px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource > i {
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 auto !important;
        transform: scale(.86) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource > .value {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: 13px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .trav47AvailableConstruction {
        display: flex !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 31px !important;
        margin: 0 !important;
        padding: 5px 0 0 !important;
        gap: 6px !important;
        border-top: 1px solid #dbe3d6 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract .trav47AvailableActionMeta {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 27px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract .trav47AvailableDuration {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 67px !important;
        height: 25px !important;
        margin: 0 !important;
        padding: 3px 6px !important;
        gap: 3px !important;
        border: 1px solid #d4ddd0 !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #505a4c !important;
        font: 700 9px/17px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableDuration > i {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract .trav47AvailableActions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
        direction: rtl !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableActions > br {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract button:is(.green, .gold) {
        min-width: 92px !important;
        height: 29px !important;
        min-height: 29px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border-radius: 5px !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract button.exchange {
        min-width: 82px !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableActions > .none,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableActionMeta > .none {
        display: inline-block !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        border-radius: 4px !important;
        background: #ebece8 !important;
        color: #777b72 !important;
        font: 400 8.5px/15px Tahoma, Arial, sans-serif !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .trav47AvailableActionMeta {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .trav47AvailableRequirements {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 7px !important;
        border: 1px solid #dfd2b7 !important;
        border-radius: 4px !important;
        background: #fff9eb !important;
        color: #665a45 !important;
        font: 400 9px/16px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableRequirements > .clear,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .clear,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard > .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #build.trav47AvailableBuildings > .trav47AvailableSoonHeading {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 31px !important;
        margin: 9px 0 6px !important;
        padding: 5px 9px !important;
        border: 1px solid #bcae8e !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #f2ead9, #dfd1b8) !important;
        color: #5f513b !important;
        font: 700 10.5px/19px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(63, 49, 29, .1) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage #build.trav47AvailableBuildings > .trav47AvailableEmpty {
        display: block !important;
        width: 100% !important;
        min-height: 52px !important;
        margin: 0 0 7px !important;
        padding: 13px 10px !important;
        border: 1px solid #ccd5c7 !important;
        border-radius: 5px !important;
        background: #f6f9f4 !important;
        color: #687064 !important;
        font: 400 10px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* Available-building cards: desktop-only sizing and action alignment.
   Phone card dimensions remain exactly as defined above. */
@media screen and (min-width: 1025px) {
    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard > h2 {
        font-size: 13px !important;
        line-height: 19px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .trav47AvailableCostLabel {
        font-size: 10.5px !important;
        line-height: 19px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource {
        font-size: 9.5px !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource > .value {
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard > .build_desc {
        grid-template-columns: 121px minmax(0, 1fr) !important;
        min-height: 116px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard .build_desc > a.build_logo {
        width: 121px !important;
        min-width: 121px !important;
        height: 104px !important;
        min-height: 104px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard .build_desc img.build_logo.building.big {
        transform: scale(.69) !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableBuildingCard .build_desc > .buildDescriptionText {
        min-height: 104px !important;
        font-size: 14px !important;
        line-height: 21px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .trav47AvailableConstruction {
        justify-content: center !important;
        gap: 8px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableContract .trav47AvailableDuration {
        height: 30px !important;
        min-height: 30px !important;
        padding: 5px 6px !important;
    }

    /* Match the established desktop upgrade/demolition button treatment.
       This overrides the compact 9.5px phone sizing inherited by the cards. */
    html#mainLayout[data-trav47-layout="desktop"] body.build.trav47AvailableBuildingsPage .trav47AvailableContract button:is(.green, .gold) {
        width: auto !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 6px 20px !important;
        border-radius: 5px !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

}

/* Available-building actions on phones: keep the duration immediately to the
   right of the construction button, with the pair anchored to the left. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableContract > .trav47AvailableConstruction {
        justify-content: flex-end !important;
    }
}

/* Treasury tabs: use the same edge-to-edge phone navigation as the
   available-buildings window in all three phone layouts. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #content.build #build.gid27 > .trav47TreasuryTabs {
        display: block !important;
        width: calc(100% + 14px) !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: -7px -7px 6px !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #332318 !important;
        border-radius: 0 !important;
        background:
            linear-gradient(180deg, rgba(255, 241, 210, .11), transparent 40%, rgba(18, 10, 6, .18)),
            #513a2b !important;
        box-shadow: inset 0 1px 0 rgba(255, 231, 189, .25), inset 0 -1px 0 rgba(25, 14, 8, .48) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs > button,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs > .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs > .scrollingContainer {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: initial !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs .content {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs a.tabItem {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-left: 1px solid rgba(239, 210, 162, .24) !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .06)) !important;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .06)) !important;
        color: #f2e4c9 !important;
        font: 700 10px/34px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: 0 1px 1px #2a190f !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs .content:last-child a.tabItem {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs a.tabItem::before,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs a.tabItem::after {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47TreasuryTabs a.tabItem.active {
        background: linear-gradient(180deg, #91b653 0, #6f9736 53%, #527523 100%) !important;
        background-image: linear-gradient(180deg, #91b653 0, #6f9736 53%, #527523 100%) !important;
        color: #fff !important;
        text-shadow: 0 1px 1px #2f4c14 !important;
        box-shadow: inset 0 1px 0 rgba(240, 255, 212, .6), inset 0 -1px 0 rgba(41, 65, 18, .48) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table.trav47ArtefactTable {
        width: calc(100% + 14px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: -7px !important;
        margin-left: -7px !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table.trav47ArtefactTable td.nam {
        width: auto !important;
        min-width: 0 !important;
        padding-right: 2px !important;
        padding-left: 2px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table.trav47ArtefactTable td.nam > a,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table.trav47ArtefactTable td.nam > span.bon {
        white-space: nowrap !important;
    }

    /* Owned artefacts: fill the phone content width and reserve a real icon
       column instead of inheriting the desktop percentage widths. */
    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable {
        width: calc(100% + 10px) !important;
        margin-right: -5px !important;
        margin-left: -5px !important;
        border-spacing: 1px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 > h4.trav47OwnedArtefactsTitle {
        width: calc(100% + 10px) !important;
        margin-right: -5px !important;
        margin-left: -5px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable col.icon-col {
        width: 31px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable col.name-col {
        width: auto !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable col.village-col {
        width: 76px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable col.time-col {
        width: 72px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable th,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable td {
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable td.nam {
        font-size: 10px !important;
        line-height: 15px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable .trav47OwnedArtefactNameLine {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable .trav47OwnedArtefactNameLine > a {
        display: block !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        font-size: 10px !important;
        line-height: 15px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable .trav47OwnedArtefactNameLine > span.bon {
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 9px !important;
        line-height: 15px !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable td.nam > .info {
        display: block !important;
        overflow: hidden !important;
        font-size: 9px !important;
        line-height: 14px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable td.dist {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        padding: 0 !important;
        font-size: 9px !important;
        line-height: 12px !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable .trav47OwnedArtefactDate,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable .trav47OwnedArtefactTime {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: ltr !important;
        unicode-bidi: isolate !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table#own.trav47OwnedArtefactTable .trav47OwnedArtefactTime {
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table.trav47ArtefactTable td.pla {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        padding-right: 2px !important;
        padding-left: 2px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table.trav47ArtefactTable td.al {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        padding-right: 2px !important;
        padding-left: 2px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table.trav47ArtefactTable td.trav47ArtefactDistance {
        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;
        padding-right: 2px !important;
        padding-left: 2px !important;
        font-size: 9px !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        padding: 2px 3px !important;
        text-align: center !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img {
        display: inline-block !important;
        float: none !important;
        width: 23px !important;
        height: 23px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background-color: transparent !important;
        background-image: url('../../images/artefacts/icons/artefact-icons-medium.png') !important;
        background-repeat: no-repeat !important;
        background-size: 23px 230px !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_2 {
        background-position: 0 -23px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_4 {
        background-position: 0 -46px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_5 {
        background-position: 0 -69px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_6 {
        background-position: 0 -92px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_8 {
        background-position: 0 -115px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_9 {
        background-position: 0 -138px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_10 {
        background-position: 0 -207px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_7 {
        background-position: 0 -161px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_fool {
        background-position: 0 -184px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table td.icon img.artefact_icon_1 {
        background-position: 0 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactDetails {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px)) !important;
        color: #394537 !important;
        direction: rtl !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactVisual {
        display: block !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #9eaa96 !important;
        border-radius: 6px !important;
        background: #dfe8d8 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 1px 3px rgba(54, 70, 48, .16) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactHeroImage {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: cover !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactIntro {
        display: block !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b6c3af !important;
        border-radius: 6px !important;
        background: #f8faf6 !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(55, 69, 48, .1) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactIntro h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 6px 9px !important;
        gap: 7px !important;
        border: 0 !important;
        border-bottom: 1px solid #c6d0c0 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #edf4e8, #dce8d7) !important;
        color: #31462d !important;
        font: 700 12px/20px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactBonus {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-height: 22px !important;
        padding: 2px 7px !important;
        border: 1px solid #9caf72 !important;
        border-radius: 11px !important;
        background: #eef5dc !important;
        color: #536e29 !important;
        font: 700 10px/16px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactIntro p {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 10px 9px !important;
        color: #465344 !important;
        font: 400 10.5px/19px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 table.trav47ArtefactDetailsTable {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b8c3b3 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 6px !important;
        background: #fff !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(55, 69, 48, .1) !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactDetailsTable th,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactDetailsTable td {
        height: 31px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        border: 0 !important;
        border-bottom: 1px solid #d9dfd5 !important;
        color: #3f4a3d !important;
        font: 400 10px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        vertical-align: middle !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactDetailsTable th {
        width: 38% !important;
        border-left: 1px solid #d3dbcf !important;
        background: #eef3eb !important;
        color: #354732 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactDetailsTable td {
        width: 62% !important;
        background: #fff !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactDetailsTable tr:last-child > th,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactDetailsTable tr:last-child > td {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid27 .trav47ArtefactDetailsTable a {
        color: #638c24 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }
}

/* Residence-family navigation and the few special-building headers use the
   same compact phone geometry as the rest of the unified building windows. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window:is(
        [data-building-gid="14"],
        [data-building-gid="23"],
        [data-building-gid="25"],
        [data-building-gid="26"],
        [data-building-gid="28"],
        [data-building-gid="35"],
        [data-building-gid="41"],
        [data-building-gid="44"],
        [data-building-gid="45"]
    ) > .contentTitle {
        position: relative !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 2px solid #b68a43 !important;
        border-radius: 4px 4px 0 0 !important;
        background-color: #4f392b !important;
        background-image:
            linear-gradient(180deg, rgba(255, 239, 205, .16), transparent 32%, rgba(26, 16, 11, .22)),
            url('../../images/ui/hud/content/header.jpg') !important;
        background-position: center, center bottom !important;
        background-repeat: no-repeat, repeat-x !important;
        box-shadow: inset 0 1px 0 rgba(255, 238, 201, .42), inset 0 -1px 0 rgba(54, 35, 23, .68) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window:is(
        [data-building-gid="14"],
        [data-building-gid="23"],
        [data-building-gid="25"],
        [data-building-gid="26"],
        [data-building-gid="28"],
        [data-building-gid="35"],
        [data-building-gid="41"],
        [data-building-gid="44"],
        [data-building-gid="45"]
    ) > .contentTitle .travian-mobile-build-title {
        top: 9px !important;
        right: 43px !important;
        left: 43px !important;
        display: block !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff4df !important;
        font: 700 16px/24px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 1px #2e1b10 !important;
        white-space: nowrap !important;
        -webkit-text-fill-color: #fff4df !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window:is(
        [data-building-gid="14"],
        [data-building-gid="23"],
        [data-building-gid="25"],
        [data-building-gid="26"],
        [data-building-gid="28"],
        [data-building-gid="35"],
        [data-building-gid="41"],
        [data-building-gid="44"],
        [data-building-gid="45"]
    ) > .contentTitle > :is(#closeContentButton, #tabFavorButton) {
        top: 9px !important;
        right: auto !important;
        left: 9px !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;
        transform: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window:is(
        [data-building-gid="14"],
        [data-building-gid="23"],
        [data-building-gid="25"],
        [data-building-gid="26"],
        [data-building-gid="28"],
        [data-building-gid="35"],
        [data-building-gid="41"],
        [data-building-gid="44"],
        [data-building-gid="45"]
    ) > .contentTitle > #tabFavorButton {
        left: 40px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #content.build #build:is(.gid25, .gid26, .gid44) > .trav47ResidenceTabs {
        display: block !important;
        width: calc(100% + 14px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: -7px -7px 7px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47ResidenceTabs > :is(.scrollFrom, .scrollTo) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47ResidenceTabs > .scrollingContainer {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47ResidenceTabs > .scrollingContainer > .content,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47ResidenceTabs a.tabItem {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window .trav47ResidenceTabs a.tabItem {
        padding: 0 2px !important;
        font-size: 10.5px !important;
        line-height: 34px !important;
        white-space: nowrap !important;
    }
}

/* Residence, palace and command-centre secondary tabs. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > .trav47ResidenceCultureIntro,
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > .trav47ResidenceCultureSummary {
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 8px 9px !important;
        border: 1px solid #c5d0bf !important;
        border-radius: 4px !important;
        background: #f3f7f0 !important;
        color: #465343 !important;
        font: 400 10.5px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > .trav47ResidenceCultureSummary {
        margin-bottom: 0 !important;
        background: #edf3e9 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > .trav47ResidenceCultureSummary b {
        display: inline-block !important;
        margin: 0 2px !important;
        color: #5f861f !important;
        direction: ltr !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceCultureTable {
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b9c6b3 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceCultureTable th,
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceCultureTable td {
        width: 50% !important;
        height: 31px !important;
        padding: 6px 8px !important;
        border: 0 !important;
        border-bottom: 1px solid #d9e0d5 !important;
        color: #42503f !important;
        font: 400 10px/18px Tahoma, Arial, sans-serif !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceCultureTable th {
        border-left: 1px solid #d0d9cc !important;
        background: #e8efe4 !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceCultureTable td {
        direction: rtl !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceCultureTable tr:last-child > * {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b9c6b3 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 4px !important;
        background: #fff !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable col.trav47ExpansionRank { width: 7% !important; }
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable col.trav47ExpansionVillage { width: 24% !important; }
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable col.trav47ExpansionPlayer { width: 19% !important; }
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable col.trav47ExpansionPopulation { width: 11% !important; }
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable col.trav47ExpansionCoordinates { width: 18% !important; }
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable col.trav47ExpansionDate { width: 21% !important; }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable th,
    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td {
        height: 29px !important;
        padding: 4px 2px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid #d5ddd1 !important;
        border-bottom: 1px solid #d5ddd1 !important;
        color: #435140 !important;
        font: 400 9px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable thead tr:first-child th {
        height: 32px !important;
        padding: 6px 8px !important;
        border-left: 0 !important;
        background: linear-gradient(180deg, #edf4e9, #dfe9da) !important;
        color: #344b30 !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable thead tr:nth-child(2) td {
        background: #e8efe4 !important;
        color: #3c4e38 !important;
        font-size: 8.5px !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td.ra {
        width: 7% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td.vil {
        width: 24% !important;
        direction: rtl !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td.pla {
        width: 19% !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td.ha {
        width: 11% !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td.aligned_coords {
        width: 18% !important;
        direction: ltr !important;
        font-size: 8.5px !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td.aligned_coords > :is(.cox, .pi, .coy) {
        display: inline !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td.dat {
        width: 21% !important;
        direction: ltr !important;
        font-size: 8px !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable tr > :last-child {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable tbody tr:last-child > td {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build:is(.gid25, .gid26, .gid44) > table.trav47ResidenceExpansionTable td.none {
        width: 100% !important;
        height: 42px !important;
        padding: 9px !important;
        color: #6b7367 !important;
        font-size: 10px !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid41 > #descriptionAndInfo > table.trav47HorseTroughTable th {
        width: 48% !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid41 > #descriptionAndInfo > table.trav47HorseTroughTable td {
        width: 52% !important;
        direction: rtl !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }
}

/* Phone village rail: final compact production spacing, isolated troop
   scrolling, and RTL hero-meter direction.  This block intentionally stays
   last so old rail rules cannot restore the shared scrollbar. */
@media screen and (max-width: 1024px) {
    /* Stop the rail at the footer's real upper edge.  Troops keep their
       natural height when short and shrink into a scroller only when needed. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100dvh - var(--travian-mobile-scene-top, 152px) - var(--trav47-troops-footer-clearance, 78px)) !important;
        max-height: none !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: auto !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production {
        flex: 0 0 auto !important;
        margin: 0 0 3px !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .boxes-contents {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        overscroll-behavior: none !important;
        touch-action: auto !important;
    }

    /* Remove the legacy 8px card padding at both the outer card and content
       levels; only the single horizontal pixel used by the rows remains. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .boxes-contents {
        padding: 0 1px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionHeading {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        padding: 0 3px 0 2px !important;
    }

    /* Keep the troops heading outside the scrolling region.  Only tbody owns
       vertical scrolling, so production and the word "القوات" never move. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details .villageList.units .trav47RailCardTitle {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 16px !important;
        width: 100% !important;
        height: 16px !important;
        min-height: 16px !important;
        margin: 0 !important;
        padding: 0 3px 0 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        line-height: 16px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops {
        display: flex !important;
        flex: 0 1 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops tbody {
        display: block !important;
        flex: 0 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
        scroll-padding-bottom: 10px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops tbody::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops tbody tr {
        width: 100% !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        overflow: hidden !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.ico {
        flex: 0 0 18px !important;
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num {
        display: block !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 18px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        direction: ltr !important;
        font-size: 14px !important;
        font-variant-numeric: tabular-nums !important;
        letter-spacing: 0 !important;
        text-align: right !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num.trav47TroopNumberTight {
        font-size: 12px !important;
        letter-spacing: -.15px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#troops td.num.trav47TroopNumberVeryTight {
        font-size: 10px !important;
        letter-spacing: -.25px !important;
    }

    /* Show the complete native plus artwork instead of clipping its top edge. */
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico,
    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico > div {
        overflow: visible !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico > div {
        width: 17px !important;
        height: 18px !important;
    }

    html[data-trav47-layout="desktop"] body.village1 div.village1 div#map_details table#production td.ico div img.productionBoost {
        top: 0 !important;
        right: 0 !important;
        width: 16px !important;
        height: 16px !important;
        background-size: 16px 16px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        image-rendering: auto !important;
    }

    /* Both meters progress from the right edge toward the left in RTL. */
    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero > svg.health {
        background: linear-gradient(to left, #73a936 0 var(--trav47-hero-health), #352e25 var(--trav47-hero-health) 100%) !important;
    }

    body:is(.village1, .village2) #topBarHeroWrapper #topBarHero > svg.experience {
        background: linear-gradient(to left, #d6a839 0 var(--trav47-hero-experience), #352e25 var(--trav47-hero-experience) 100%) !important;
    }
}

/* Event-driven incoming player attack warning. It deliberately lives in the
   same phone HUD rail as the Gold offer and wins that slot while active. */
@media screen and (max-width: 1024px) {
    body #header .currency .trav47IncomingAttackHud[hidden] {
        display: none !important;
    }

    body.trav47IncomingAttackActive #header .currency .trav47GoldOfferHud {
        display: none !important;
    }

    body #header .currency .trav47IncomingAttackHud {
        position: absolute !important;
        top: 24px !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 17px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        border: 1px solid #75100f !important;
        border-top: 0 !important;
        border-radius: 0 0 5px 5px !important;
        color: #fff !important;
        background: linear-gradient(180deg, #df3d34 0%, #a41413 55%, #750b0b 100%) !important;
        box-shadow: 0 2px 7px rgba(104, 4, 4, .48), inset 0 1px 0 rgba(255, 224, 218, .38) !important;
        direction: rtl !important;
        font: 800 9px/16px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: 0 1px 1px rgba(61, 0, 0, .9) !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        animation: trav47IncomingHudPulse 1.15s ease-in-out infinite alternate !important;
    }

    body #header .currency .trav47IncomingAttackHud__icon {
        flex: 0 0 16px !important;
        display: inline-block !important;
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    body #header .currency .trav47IncomingAttackHud__icon > img {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        object-fit: contain !important;
        transform: none !important;
        filter: none !important;
    }

    body #header .currency .trav47IncomingAttackHud__label {
        display: inline !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    body #header .currency .trav47IncomingAttackHud__count {
        display: inline-grid !important;
        place-items: center !important;
        min-width: 13px !important;
        height: 12px !important;
        padding: 0 3px !important;
        border: 1px solid rgba(255, 238, 228, .72) !important;
        border-radius: 6px !important;
        color: #7b0808 !important;
        background: #fff2dd !important;
        font: 900 8px/10px Arial, sans-serif !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    body #header .currency .trav47IncomingAttackHud__count[hidden] {
        display: none !important;
    }

    @keyframes trav47IncomingHudPulse {
        from { filter: brightness(.94); }
        to { filter: brightness(1.2); }
    }

    @media (prefers-reduced-motion: reduce) {
        body #header .currency .trav47IncomingAttackHud {
            animation: none !important;
        }
    }
}

/* Both web-phone side layouts: the white troops card matches production and
   owns vertical scrolling. Each troop row remains independently content-sized,
   so a large count never widens the shared number column. */
@media screen and (max-width: 760px) {
    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units {
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: var(--trav47-webphone-troops-viewport-height, calc(100dvh - var(--travian-mobile-scene-top, 152px) - var(--trav47-troops-footer-clearance, 78px) - 112px)) !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units .boxes-contents {
        display: grid !important;
        grid-template-rows: 16px minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: var(--trav47-webphone-troops-viewport-height, calc(100dvh - var(--travian-mobile-scene-top, 152px) - var(--trav47-troops-footer-clearance, 78px) - 112px)) !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units .trav47RailCardTitle {
        position: relative !important;
        top: auto !important;
        z-index: 2 !important;
        width: 100% !important;
        padding: 0 5px 0 0 !important;
        background-color: transparent !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units table#troops {
        display: block !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(var(--trav47-webphone-troops-viewport-height, 220px) - 16px) !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units table#troops::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units table#troops tbody {
        display: flex !important;
        flex-direction: column !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
        padding-bottom: 5px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units table#troops tbody tr {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        direction: rtl !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-right: 5px !important;
        padding-left: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units table#troops td.ico {
        display: block !important;
        flex: 0 0 18px !important;
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units table#troops td.num {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 5px !important;
        overflow: visible !important;
        direction: ltr !important;
        font-size: 14px !important;
        font-variant-numeric: tabular-nums !important;
        letter-spacing: 0 !important;
        text-align: right !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.units table#troops td.un {
        display: none !important;
    }
}

/* Production boost interaction: the page behind the window never scrolls,
   and every gold action acknowledges the tap while its Ajax request runs. */
@media screen and (max-width: 1024px) {
    html.trav47ProductionBoostOpen,
    html.trav47ProductionBoostOpen body,
    body.trav47ProductionBoostOpen {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog,
    body.trav47ProductionBoostOpen .dialog.trav47ProductionBoostDialog #dialogContent > .content {
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    .villageList.production .trav47ProductionBoostBadge {
        transition: none !important;
        animation: none !important;
        transform-origin: center !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .villageList.production .trav47ProductionBoostBadge:active,
    .villageList.production .trav47ProductionBoostBadge.trav47BoostLauncherBusy {
        transform: translateY(1px) scale(.94) !important;
        filter: brightness(.9) saturate(.82) !important;
        box-shadow: inset 0 2px 3px rgba(69, 46, 4, .42) !important;
    }

    .villageList.production .trav47ProductionBoostBadge.trav47BoostLauncherBusy {
        cursor: wait !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }

    .dialog.trav47ProductionBoostDialog .trav47BoostButton {
        position: relative !important;
        transition: transform 90ms ease, filter 120ms ease, box-shadow 90ms ease !important;
        transform-origin: center !important;
    }

    .dialog.trav47ProductionBoostDialog .trav47BoostButton:active:not(.trav47BoostBusy) {
        transform: translateY(1px) scale(.96) !important;
        filter: brightness(.92) !important;
        box-shadow: inset 0 2px 4px rgba(53, 41, 7, .4) !important;
    }

    .dialog.trav47ProductionBoostDialog .trav47BoostButton.trav47BoostBusy {
        transform: none !important;
        filter: none !important;
        cursor: default !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }

    .dialog.trav47ProductionBoostDialog .trav47BoostButton.trav47BoostBusy::after {
        content: none !important;
        display: none !important;
    }

    .dialog.trav47ProductionBoostDialog .trav47BoostButton.trav47BoostBusy .trav47BoostButtonCost {
        display: inline-flex !important;
    }

    .dialog.trav47ProductionBoostDialog .trav47BoostButton.trav47BoostError {
        animation: trav47BoostActionError .32s ease 2 !important;
        filter: hue-rotate(125deg) saturate(1.25) !important;
    }

    .dialog.trav47ProductionBoostDialog .trav47BoostCard.trav47BoostJustUpdated {
        animation: trav47BoostCardConfirmed .72s ease-out 1 !important;
    }

    @keyframes trav47BoostActionSpin {
        to { transform: rotate(360deg); }
    }

    @keyframes trav47BoostActionError {
        50% { transform: translateX(2px); }
    }

    @keyframes trav47BoostCardConfirmed {
        0% {
            border-color: #80aa43;
            box-shadow: inset 0 0 0 2px rgba(134, 184, 71, .28), 0 0 7px rgba(111, 159, 53, .3);
        }
        100% {
            border-color: #b6c6bb;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
        }
    }
}

/* Crisp troop numerals for all three phone layouts.  Keep glyphs on whole
   pixel line boxes and avoid the fractional tracking used by old overflow
   rules; large values still step down through the existing tight classes. */
@media screen and (max-width: 1024px) {
    html[data-trav47-layout] body.village1 div.village1 div#map_details table#troops td.num {
        color: #292720 !important;
        font-family: Arial, Tahoma, sans-serif !important;
        font-weight: 400 !important;
        font-style: normal !important;
        font-variant-numeric: tabular-nums lining-nums !important;
        font-feature-settings: "tnum" 1, "lnum" 1 !important;
        letter-spacing: 0 !important;
        text-shadow: none !important;
        text-rendering: auto !important;
        -webkit-font-smoothing: auto !important;
        -webkit-text-stroke: 0 transparent !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#troops td.num {
        line-height: 16px !important;
    }

    html[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details table#troops td.num {
        line-height: 18px !important;
    }

    html[data-trav47-layout] body.village1 div.village1 div#map_details table#troops td.num.trav47TroopNumberTight {
        letter-spacing: 0 !important;
        line-height: 16px !important;
    }

    html[data-trav47-layout] body.village1 div.village1 div#map_details table#troops td.num.trav47TroopNumberVeryTight {
        letter-spacing: 0 !important;
        line-height: 14px !important;
    }

    html[data-trav47-layout] body.village1 div.village1 div#map_details table#troops tbody tr.trav47TroopsEmpty {
        display: block !important;
        width: 100% !important;
        min-width: 58px !important;
        height: auto !important;
        min-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html[data-trav47-layout] body.village1 div.village1 div#map_details table#troops tbody tr.trav47TroopsEmpty > td.trav47TroopsEmptyText {
        display: block !important;
        width: 100% !important;
        min-width: 58px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        color: #655b4d !important;
        font: 400 11px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }
}
/* Support reply indicator shared by the footer options circle and its menu row. */
.trav47SupportNotificationBadge[hidden] {
    display: none !important;
}

.trav47SupportMenuBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    margin-right: 5px;
    padding: 0 4px;
    border: 1px solid #8a2018;
    border-radius: 9px;
    color: #fff;
    background: #c83227;
    box-shadow: 0 1px 2px rgba(45, 20, 12, .32);
    font: 700 9px/15px Tahoma, Arial, sans-serif;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body #header #navigation > .mobileMenuButton {
        position: relative !important;
    }

    html#mainLayout[data-trav47-layout] body #header #navigation > .mobileMenuButton > .trav47SupportFooterBadge {
        position: absolute !important;
        top: -7px !important;
        left: -4px !important;
        z-index: 12 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 19px !important;
        height: 19px !important;
        padding: 0 4px !important;
        border: 1px solid #831c15 !important;
        border-radius: 10px !important;
        color: #fff !important;
        background: linear-gradient(180deg, #df4938, #a91f18) !important;
        box-shadow: 0 1px 3px rgba(34, 15, 10, .55), inset 0 1px rgba(255, 255, 255, .28) !important;
        font: 700 9px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body #header #navigation > .mobileMenuButton > .trav47SupportFooterBadge[hidden] {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body nav#mobileMenu a.help .inlineIcon {
        grid-template-columns: 16px minmax(0, 1fr) auto !important;
        width: 100% !important;
    }
}

/* Send-troops confirmation: compact phone layout shared by all three phone skins. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation {
        display: flow-root !important;
        width: calc(100% + 14px) !important;
        max-width: none !important;
        margin: 0 -7px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetCard {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 3px 0 8px !important;
        padding: 0 !important;
        border: 1px solid #b6c3aa !important;
        border-radius: 4px !important;
        background: #eaf1e3 !important;
        box-shadow: 0 1px 2px rgba(57, 69, 47, .1) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetRow {
        display: grid !important;
        grid-template-columns: 55px minmax(0, 1fr) !important;
        align-items: stretch !important;
        min-width: 0 !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #d1dac9 !important;
        background: #eaf1e3 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetRow:last-child {
        border-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetLabel,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetValue {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        min-height: 27px !important;
        margin: 0 !important;
        border: 0 !important;
        font-size: 12px !important;
        line-height: 16px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetLabel {
        justify-content: center !important;
        padding: 4px 3px !important;
        border-left: 1px solid #c7d2bf !important;
        color: #46543d !important;
        background: #dfe9d7 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetValue {
        justify-content: flex-start !important;
        gap: 5px !important;
        width: 100% !important;
        padding: 4px 7px !important;
        color: #4f8312 !important;
        background: #eef4e8 !important;
        font-weight: 700 !important;
        text-align: right !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetValue .coordinates,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmTargetValue .coordinatesWrapper {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops {
        float: none !important;
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 8px 0 9px !important;
        padding: 0 !important;
        border: 1px solid #b6c3aa !important;
        border-spacing: 0 !important;
        border-collapse: separate !important;
        border-radius: 4px !important;
        color: #30382a !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(57, 69, 47, .1) !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops thead td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 26px !important;
        padding: 4px 3px !important;
        border: 0 !important;
        border-left: 1px solid #d5ddcf !important;
        color: #282a24 !important;
        background: #edf2e7 !important;
        direction: rtl !important;
        font-size: 11px !important;
        line-height: 15px !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops thead td:first-child {
        padding: 0 !important;
        font-weight: 700 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmHeadline {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 27px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmSourceVillage,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmMission {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 27px !important;
        padding: 4px 5px !important;
        color: #282a24 !important;
        font-size: 11px !important;
        line-height: 15px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmSourceVillage {
        flex: 0 1 auto !important;
        width: max-content !important;
        max-width: 45% !important;
        border-left: 1px solid #d5ddcf !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .trav47AttackConfirmMission {
        flex: 1 1 0 !important;
        width: auto !important;
        gap: 1px !important;
        font-weight: 600 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.units > tr > th,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.units > tr > td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 23px !important;
        padding: 2px 0 !important;
        border: 0 !important;
        border-left: 1px solid #e0e5db !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.units > tr > th {
        color: #5b6853 !important;
        background: #f0f4eb !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 13px !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.units > tr:first-child > td {
        background: #f8faf5 !important;
        overflow: visible !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.units > tr:first-child > td:first-child {
        background: #f0f4eb !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.units > tr > td:last-child {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.units img.unit {
        float: none !important;
        display: inline-block !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        margin: 0 auto !important;
        vertical-align: middle !important;
        transform: scale(.9375) !important;
        transform-origin: center center !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops td.trav47AttackConfirmUnitActive,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops td.trav47AttackConfirmUnitEmpty {
        direction: ltr !important;
        unicode-bidi: isolate !important;
        font-family: Arial, Tahoma, sans-serif !important;
        font-variant-numeric: tabular-nums !important;
        line-height: 14px !important;
        text-overflow: clip !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops td.trav47AttackConfirmUnitActive {
        padding-right: 0 !important;
        padding-left: 0 !important;
        color: #263020 !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        font-weight: 700 !important;
        letter-spacing: -.2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops td.trav47AttackConfirmUnitEmpty {
        padding-right: 0 !important;
        padding-left: 0 !important;
        color: #adb5a9 !important;
        font-size: 8.5px !important;
        font-weight: 400 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops td:is(.trav47AttackConfirmDigits6, .trav47AttackConfirmDigits7, .trav47AttackConfirmDigits8, .trav47AttackConfirmDigits9) {
        font-size: clamp(9.5px, 2.55vw, 11px) !important;
        letter-spacing: -.35px !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.options td,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.cata td,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.infos td,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation table.trav47AttackConfirmTroops tbody.infos th {
        min-width: 0 !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .attackTrainConfirmationActions {
        float: none !important;
        clear: both !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 11px auto 4px !important;
        padding: 0 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .attackTrainConfirmationActions #btn_ok,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .attackTrainConfirmationActions .trav47AttackEdit,
    html#mainLayout[data-trav47-layout] body.build form.trav47AttackConfirmation .attackTrainConfirmationActions .attackTrainAdd {
        position: static !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
    }
}

/* Keep the former compact target-summary arrangement on the desktop skin. */
@media screen and (min-width: 1025px) {
    form.trav47AttackConfirmation .trav47AttackConfirmTargetCard {
        display: table;
        width: 100%;
        margin: 0 0 10px;
        border-collapse: separate;
        border-spacing: 1px;
        background: #fff;
    }

    form.trav47AttackConfirmation .trav47AttackConfirmTargetRow {
        display: table-row;
    }

    form.trav47AttackConfirmation .trav47AttackConfirmTargetLabel,
    form.trav47AttackConfirmation .trav47AttackConfirmTargetValue {
        display: table-cell;
        padding: 3px 7px;
        vertical-align: middle;
    }

    form.trav47AttackConfirmation .trav47AttackConfirmTargetLabel {
        width: 15%;
        font-weight: 700;
        white-space: nowrap;
    }
}

/* Attack-train confirmation: every wave uses the same compact dynamic grid. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm {
        float: none !important;
        display: flow-root !important;
        width: calc(100% + 14px) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 -7px 14px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainConfirmHeader {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 31px !important;
        margin: 3px 0 8px !important;
        padding: 5px 7px !important;
        border: 1px solid #b6c3aa !important;
        border-radius: 4px !important;
        color: #394732 !important;
        background: linear-gradient(180deg, #f1f6eb, #e2ebda) !important;
        box-shadow: 0 1px 2px rgba(57, 69, 47, .1) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainConfirmTarget {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 3px 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        color: #394732 !important;
        font-size: 12px !important;
        line-height: 16px !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainConfirmTarget > span {
        flex: 0 0 auto !important;
        color: #394732 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainConfirmTarget > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        color: #4f8312 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainSummary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveTable {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #b6c3aa !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(57, 69, 47, .1) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops {
        float: none !important;
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-spacing: 0 !important;
        border-collapse: separate !important;
        color: #30382a !important;
        background: #fff !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops thead td.attackTrainWaveTarget {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 28px !important;
        padding: 5px 72px !important;
        border: 0 !important;
        color: #2d3428 !important;
        background: #e7efdf !important;
        direction: rtl !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 16px !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveTarget > span,
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveTarget > a {
        display: inline !important;
        margin: 0 !important;
        vertical-align: baseline !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveTarget > a {
        color: #4f8312 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveHeaderActions {
        position: absolute !important;
        z-index: 5 !important;
        top: 3px !important;
        left: 4px !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: ltr !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveCopyButton,
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveEditButton {
        position: static !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 21px !important;
        max-height: 21px !important;
        margin: 0 !important;
        border: 1px solid #9fb58a !important;
        border-radius: 4px !important;
        color: #416b1b !important;
        background: linear-gradient(#f8fff1, #dcebcf) !important;
        box-shadow: 0 1px 2px rgba(41, 59, 68, .14) !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveCopyButton {
        width: auto !important;
        height: 21px !important;
        padding: 0 5px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 19px !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveEditButton {
        width: 21px !important;
        min-width: 21px !important;
        height: 21px !important;
        padding: 3px !important;
        line-height: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainWaveEditButton svg {
        display: block !important;
        width: 9px !important;
        height: 13px !important;
        margin: 0 !important;
        fill: #526d79 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.units > tr > th,
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.units > tr > td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 23px !important;
        padding: 2px 0 !important;
        border: 0 !important;
        border-left: 1px solid #e0e5db !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.units > tr > th {
        color: #586650 !important;
        background: #f0f4eb !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 13px !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.units > tr:first-child > th,
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.units > tr:first-child > td {
        border-bottom: 1px solid #dfe5da !important;
        background: #f8faf5 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.units > tr > td:last-child {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.units img.unit {
        float: none !important;
        display: inline-block !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        margin: 0 auto !important;
        vertical-align: middle !important;
        transform: scale(.9375) !important;
        transform-origin: center center !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm td.attackTrainUnitActive,
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm td.attackTrainUnitEmpty {
        direction: ltr !important;
        unicode-bidi: isolate !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        font-family: Arial, Tahoma, sans-serif !important;
        font-variant-numeric: tabular-nums !important;
        line-height: 14px !important;
        text-overflow: clip !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm td.attackTrainUnitActive {
        color: #263020 !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        font-weight: 700 !important;
        letter-spacing: -.2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm td.attackTrainUnitEmpty {
        color: #adb5a9 !important;
        font-size: 8.5px !important;
        font-weight: 400 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm td:is(.attackTrainDigits6, .attackTrainDigits7, .attackTrainDigits8, .attackTrainDigits9) {
        font-size: clamp(9.5px, 2.55vw, 11px) !important;
        letter-spacing: -.35px !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.infos > tr > th,
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.infos > tr > td {
        min-width: 0 !important;
        padding: 4px 3px !important;
        border: 0 !important;
        border-top: 1px solid #d9dfd4 !important;
        color: #3f493a !important;
        background: #e7e7e7 !important;
        font-size: 10px !important;
        line-height: 15px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.infos > tr > th {
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.infos td > .in,
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm table.attackTrainWaveTroops tbody.infos td > .at {
        width: auto !important;
        margin: 0 !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainTargetField {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        border: 0 !important;
        border-top: 1px solid #d7dfd1 !important;
        color: #405039 !important;
        background: #f1f5ed !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainTargetField > span:first-child {
        font-size: 10px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainTargetSelects {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainTargetSelects select.dropdown {
        flex: 1 1 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 27px !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        font-size: 10px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainConfirmActions {
        float: none !important;
        clear: both !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 11px auto 4px !important;
        padding: 0 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainConfirmActions .attackTrainSend,
    html#mainLayout[data-trav47-layout] body.build form.attackTrainConfirm .attackTrainConfirmActions .attackTrainAdd {
        position: static !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
    }
}

/* Trapper (gid 36): use the same structured building card on all phone skins. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo {
        grid-template-columns: minmax(0, 1fr) 102px !important;
        grid-template-rows: minmax(48px, auto) auto !important;
        column-gap: 8px !important;
        row-gap: 5px !important;
        min-height: 124px !important;
        padding: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > .build_desc {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        padding: 0 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > .trav47-structured-building-visual {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: stretch !important;
        height: 100% !important;
        min-height: 104px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > table#build_value {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b6c3a8 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 3px !important;
        background: rgba(218, 228, 207, .72) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
        table-layout: fixed !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > table#build_value th,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > table#build_value td {
        height: 23px !important;
        padding: 2px 6px !important;
        border: 0 !important;
        background: transparent !important;
        color: #4a5142 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        white-space: nowrap !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #4a5142 !important;
        -webkit-text-stroke: 0 transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > table#build_value th {
        width: 64% !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > table#build_value td {
        width: 36% !important;
        direction: rtl !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > table#build_value td > b,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > #descriptionAndInfo > table#build_value td > .number {
        color: #35432e !important;
        font-weight: 700 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #35432e !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > .trav47TrapperStatus {
        direction: rtl !important;
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 5px 0 !important;
        border: 1px solid #b8aa88 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #f7f8f1 0%, #e5ebdc 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(66, 45, 26, .1) !important;
        color: #453f34 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusHeading {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        min-width: 0 !important;
        padding: 4px 5px !important;
        border-right: 3px solid var(--trav47-building-accent, #769d38) !important;
        border-radius: 3px !important;
        background: rgba(231, 237, 223, .95) !important;
        color: #3d542f !important;
        font-size: 10.5px !important;
        line-height: 18px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusHeading img.unit {
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: scale(.82) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusStats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusItem {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        min-width: 0 !important;
        padding: 3px 2px !important;
        border: 1px solid rgba(121, 101, 66, .2) !important;
        border-radius: 3px !important;
        background: rgba(255, 255, 255, .72) !important;
        color: #5a5142 !important;
        font-size: 9.5px !important;
        line-height: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusItem strong {
        color: #5f8f13 !important;
        font-size: 12px !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #build.gid36 > form[name="snd"] {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

}

/* Phone building headers: share the same grassy presentation as desktop. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo {
        width: calc(100% + 16px) !important;
        max-width: none !important;
        margin: -8px -8px 7px !important;
        border-color: #78833d !important;
        border-radius: 0 0 4px 4px !important;
        background: #9aae51 url("../../images/background2.jpg") center / cover no-repeat !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .32), 0 1px 2px rgba(39, 57, 26, .2) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo::before {
        content: none !important;
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > .build_desc,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > .build_desc * {
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(20, 44, 13, .9) !important;
        -webkit-text-fill-color: #fff !important;
        -webkit-text-stroke: 0 transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo > .trav47-structured-building-visual {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo table#build_value,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo table.capacityValues {
        border-color: rgba(255, 255, 255, .26) !important;
        background: rgba(30, 66, 25, .27) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .12) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo table#build_value th,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo table#build_value td,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo table.capacityValues th,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo table.capacityValues td,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo table#build_value th *,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window #descriptionAndInfo table#build_value td * {
        border-bottom-color: rgba(255, 255, 255, .14) !important;
        background: transparent !important;
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(20, 44, 13, .9) !important;
        -webkit-text-fill-color: #fff !important;
        -webkit-text-stroke: 0 transparent !important;
    }
}

/* Keep support at the bottom of the desktop link list without changing phones. */
@media screen and (min-width: 1025px) {
    #sidebarBoxLinklist .content > ul.trav47SidebarLinks {
        display: flex;
        flex-direction: column;
    }

    #sidebarBoxLinklist .content > ul.trav47SidebarLinks > .trav47SidebarSupportLink {
        order: 999;
    }
}

/* Mobile layouts: keep the finish-training title and gold action on one row. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer #content #build .buildActionOverview.trainUnits .cta {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer #content #build .buildActionOverview.trainUnits .cta > button.exchange {
        --trav47-text-button-height: 25px;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;
        padding-right: 1px !important;
        padding-left: 1px !important;
        margin-right: 15px !important;
        margin-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer #content #build .trav47FinishTrainingRow {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 8px 0 2px !important;
        padding: 3px 5px !important;
        box-sizing: border-box !important;
        background: #e0ebdf !important;
        border-radius: 4px !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer #content #build .trav47FinishTrainingRow > h4.round {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        height: 31px !important;
        margin: 0 !important;
        padding: 4px 5px !important;
        right: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 11px !important;
        line-height: 23px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.build #center #contentOuterContainer #content #build .trav47FinishTrainingRow > button.gold.exchange.finishTrainingGold {
        display: block !important;
        flex: 0 0 136px !important;
        float: none !important;
        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content #build table.under_progress[data-travian-training-server-time] tbody td {
        height: 28px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        line-height: 18px !important;
        vertical-align: middle !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content #build table.under_progress[data-travian-training-server-time] tbody td.desc img.unit {
        position: relative !important;
        top: 2px !important;
        display: inline-block !important;
        margin: 0 2px !important;
        vertical-align: middle !important;
        transform: scale(.86) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content #build table.under_progress[data-travian-training-server-time] tbody td.dur > *,
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer #content #build table.under_progress[data-travian-training-server-time] tbody td.fin > * {
        display: inline-block !important;
        line-height: 18px !important;
        vertical-align: middle !important;
    }
}

/* Production rail on the three phone presentations (mobile, right and left).
   The per-hour qualifier belongs to the wide desktop rail, and the left-aligned
   values need a little breathing room from the card edge. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.village1 div.village1 div#map_details .villageList.production .trav47ProductionDesktopSuffix {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.village1 div.village1 div#map_details .villageList.production table#production td.num {
        padding-left: 3px !important;
        box-sizing: border-box !important;
    }
}

/* Phone right/left presentations: extend the actual movement-card content
   five pixels upward, then lift only its heading into that new background. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details > .movements > .villageList.movements {
        margin-top: -5px !important;
        padding-top: 0 !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents {
        padding-top: 5px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"][data-trav47-village-side] body.village1 div.village1 div#map_details .villageList.movements .trav47RailCardTitle {
        position: relative !important;
        top: -5px !important;
    }
}

/* Desktop production bonus action: keep the label and gold cost as one
   genuinely centred group, free from legacy button child offsets. */
@media screen and (min-width: 1025px) {
    html#mainLayout[data-trav47-layout="desktop"] body .dialog.trav47ProductionBoostDialog .trav47BoostButton {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
        text-align: center !important;
        text-indent: 0 !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body .dialog.trav47ProductionBoostDialog .trav47BoostButton > .trav47BoostButtonLabel,
    html#mainLayout[data-trav47-layout="desktop"] body .dialog.trav47ProductionBoostDialog .trav47BoostButton > .trav47BoostButtonCost {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: content-box !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        line-height: 1 !important;
        text-align: center !important;
        transform: none !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body .dialog.trav47ProductionBoostDialog .trav47BoostButton > .trav47BoostButtonCost {
        gap: 1px !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body .dialog.trav47ProductionBoostDialog .trav47BoostButton .trav47BoostGoldIcon {
        position: static !important;
        display: inline-block !important;
        flex: 0 0 12px !important;
        box-sizing: content-box !important;
        width: 12px !important;
        min-width: 12px !important;
        max-width: 12px !important;
        height: 12px !important;
        min-height: 12px !important;
        max-height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent url("../../images/ui/buttons/button/content/goldInner-rtl.png") center/12px 12px no-repeat !important;
        vertical-align: middle !important;
    }
}

/* Keep the viewport width stable when page content or a modal toggles the
 * vertical scrollbar. This file is loaded globally, so the fix covers every
 * game page and both desktop and phone layouts. */
html#mainLayout[data-trav47-layout] {
    scrollbar-gutter: stable !important;
}

/* Phone building costs: resource sprites have unequal intrinsic heights
   (18-19px versus 24px). Give every tile the same icon and value rows so
   crop/free-crop values cannot drop below the other resource values. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer:is(.trav47-structured-building-window, .trav47-resource-field-window) #contract .resourceWrapper > .inlineIcon.resource,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource {
        display: grid !important;
        grid-template-rows: 24px 12px !important;
        align-content: center !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 1px !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        padding: 2px 1px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer:is(.trav47-structured-building-window, .trav47-resource-field-window) #contract .resourceWrapper > .inlineIcon.resource > i,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource > i {
        position: static !important;
        inset: auto !important;
        display: block !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: center !important;
        float: none !important;
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        margin: 0 !important;
        transform: none !important;
        transform-origin: center !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer:is(.trav47-structured-building-window, .trav47-resource-field-window) #contract .resourceWrapper > .inlineIcon.resource > .value,
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource > .value {
        position: static !important;
        grid-row: 2 !important;
        grid-column: 1 !important;
        align-self: center !important;
        display: block !important;
        width: 100% !important;
        height: 12px !important;
        min-height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        font-size: 10px !important;
        line-height: 12px !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* The available-buildings page has denser cards than a normal upgrade
       page. Use an exact 80% icon box here while keeping the bitmap centred. */
    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html#mainLayout[data-trav47-layout] body.build.trav47AvailableBuildingsPage .trav47AvailableResources > .inlineIcon.resource > i {
        grid-column: 1 !important;
        width: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        background-position: center !important;
        background-size: 21px auto !important;
        image-rendering: auto !important;
    }
}
/* Cafe celebration: use the same two-column visual language as troop cards. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrations {
        width: 100% !important;
        border-width: 1px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard {
        direction: rtl !important;
        display: grid !important;
        grid-template-columns: 78px minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 6px !important;
        min-height: 92px !important;
        padding: 6px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationVisual {
        grid-column: 1 !important;
        align-self: stretch !important;
        float: none !important;
        width: 78px !important;
        height: auto !important;
        min-height: 78px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #d2c8b0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationImage {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 78px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard > .details {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard .tit {
        width: 100% !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 18px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard .resourceWrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard .resourceWrapper .resource {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard .resourceWrapper .resource i {
        flex: 0 0 auto !important;
        margin: 0 1px !important;
        transform: scale(.72) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard .resourceWrapper .value {
        min-width: 0 !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard .duration {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        font-size: 10.5px !important;
        line-height: 16px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationCard .duration i {
        margin: 0 2px !important;
        transform: scale(.72) !important;
        transform-origin: center !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationActions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px 5px !important;
        width: 100% !important;
        margin: 3px 0 0 !important;
        white-space: normal !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationActions > button.exchange {
        --trav47-text-button-height: 24px;
        float: none !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 78px !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 7px !important;
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 24px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationStart {
        min-height: 24px !important;
        padding: 0 9px !important;
        font-size: 10.5px !important;
        line-height: 24px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationNotice,
    html#mainLayout[data-trav47-layout] body.build #content #build.gid35 .breweryCelebrationUnavailable {
        max-width: 100% !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        white-space: normal !important;
    }
}