@import "./fixes/paymentWizard-rtl.css";

/* Persistent hero piggy bank. Phone placement will be chosen separately. */
.trav47PiggyLauncher,
.trav47PiggyModal {
    display: none;
}

@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] #topBarHero {
        overflow: visible !important;
    }

    html[data-trav47-layout="desktop"] #topBarHero .trav47PiggyLauncher {
        position: absolute;
        z-index: 20;
        /* #topBarHero is 119px tall: keep a real 10px gap below its frame. */
        top: 129px;
        left: 32px;
        display: block;
        width: 45px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        background-color: transparent;
        background-image: url('../../../images/Piggy.png');
        background-repeat: no-repeat;
        background-size: 100% 300%;
        background-position: center top;
        box-shadow: none;
        cursor: pointer;
        filter: drop-shadow(0 2px 2px rgba(24, 19, 10, 0.45));
        transition: transform 120ms ease, filter 120ms ease;
    }

    html[data-trav47-layout="desktop"] #topBarHero .trav47PiggyLauncher.is-full {
        background-position: center center;
    }

    html[data-trav47-layout="desktop"] #topBarHero .trav47PiggyLauncher.is-empty {
        background-position: center bottom;
        opacity: 1;
        cursor: default;
        filter: drop-shadow(0 1px 1px rgba(24, 19, 10, 0.25));
    }

    html[data-trav47-layout="desktop"] #topBarHero .trav47PiggyLauncher.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[data-trav47-layout="desktop"] #topBarHero .trav47PiggyLauncher:not(.is-empty):hover,
    html[data-trav47-layout="desktop"] #topBarHero .trav47PiggyLauncher:not(.is-empty):focus-visible {
        transform: translateY(-2px) scale(1.06);
        filter: drop-shadow(0 3px 3px rgba(24, 19, 10, 0.55));
    }

    html[data-trav47-layout="desktop"] #topBarHero .trav47PiggyLauncher:not(.is-empty):active {
        transform: translateY(0) scale(0.97);
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModal:not([hidden]) {
        position: fixed;
        z-index: 120000;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        box-sizing: border-box;
        direction: rtl;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalBackdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(19, 23, 18, 0.28);
        cursor: default;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalPanel {
        position: relative;
        z-index: 1;
        width: 640px;
        max-width: calc(100vw - 36px);
        overflow: hidden;
        border: 1px solid #8f795d;
        border-radius: 9px;
        background: linear-gradient(180deg, #fbf6e9 0%, #f2e8d2 58%, #e7d8bb 100%);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
        color: #3a352d;
        font-family: Tahoma, Arial, sans-serif;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalPanel > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 46px;
        padding: 7px 12px;
        border-bottom: 1px solid #bbaa89;
        background: linear-gradient(180deg, #f8f1df 0%, #e9dcc0 52%, #d9c6a2 100%);
        box-sizing: border-box;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalPanel > header > div {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalPanel > header strong {
        font-size: 15px;
        color: #4b6923;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalPanel > header span {
        font-size: 12px;
        color: #746d60;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalClose {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin: 0;
        padding: 0 0 2px;
        border: 1px solid #8d8778;
        border-radius: 5px;
        background: linear-gradient(#fff, #ded8ca);
        color: #655e50;
        font: bold 21px/1 Arial, sans-serif;
        cursor: pointer;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferForm {
        padding: 14px;
        background: linear-gradient(180deg, rgba(255, 251, 240, 0.74), rgba(231, 216, 187, 0.76));
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferFields {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferFields label {
        display: block;
        padding: 8px;
        border: 1px solid #c5b38f;
        border-radius: 6px;
        background: linear-gradient(180deg, #fffaf0 0%, #eee2ca 100%);
        box-sizing: border-box;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferLabel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
        font-size: 12px;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferLabel > span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferLabel i {
        display: inline-block;
        vertical-align: middle;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferLabel b {
        flex: 0 0 auto;
        direction: ltr;
        unicode-bidi: isolate;
        color: #617d2d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        line-height: 16px;
        white-space: nowrap;
    }

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

    html[data-trav47-layout="desktop"] .trav47PiggyTransferFields input[type="number"]::-webkit-inner-spin-button,
    html[data-trav47-layout="desktop"] .trav47PiggyTransferFields input[type="number"]::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalStatus {
        min-height: 18px;
        padding-top: 7px;
        color: #537321;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyModalStatus.is-error {
        color: #b1271b;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferForm footer {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferForm footer button {
        box-sizing: border-box;
        min-width: 78px;
        height: 30px;
        margin: 0;
        padding: 5px 12px;
        border: 1px solid #506d24;
        border-radius: 5px;
        background: linear-gradient(#98c452, #668f2e);
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.45);
        color: #fff;
        font: bold 12px/18px Tahoma, Arial, sans-serif;
        text-shadow: 0 1px #3e5d1e;
        cursor: pointer;
    }

    html[data-trav47-layout="desktop"] .trav47PiggyTransferForm footer button:disabled,
    html[data-trav47-layout="desktop"] .trav47PiggyModal.is-loading .trav47PiggyTransferForm footer button {
        border-color: #999;
        background: #b8b8b8;
        box-shadow: none;
        color: #eee;
        text-shadow: none;
        cursor: default;
    }

    body.trav47PiggyModalOpen {
        overflow-y: scroll !important;
        scrollbar-gutter: stable;
    }

    html[data-trav47-layout="desktop"] .dialog.trav47ProductionBoostDialog .trav47BoostButton.trav47BoostBusy {
        pointer-events: none !important;
        cursor: default !important;
        opacity: .72 !important;
        filter: saturate(.72) brightness(.94) !important;
        box-shadow: inset 0 2px 3px rgba(55, 43, 14, .28) !important;
    }

    html[data-trav47-layout="desktop"] .dialog.trav47ProductionBoostDialog .trav47BoostCard.trav47BoostJustUpdated {
        animation: trav47DesktopBoostConfirmed .7s ease-out 1 !important;
    }

    @keyframes trav47DesktopBoostConfirmed {
        0% {
            border-color: #6f9d32;
            box-shadow: inset 0 0 0 2px rgba(126, 171, 63, .28), 0 0 8px rgba(82, 126, 34, .32);
        }
        100% {
            border-color: #b6c6bb;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
        }
    }
}

body.rtl div#build.gid19 img.unitSection,
body.rtl div#build.gid29 img.unitSection {
    transform: scaleX(-1);
}

/* Shared notice shown while a training building is still under construction. */
body.rtl div#build .trav47BuildingPendingNotice {
    display: inline-block;
    box-sizing: border-box;
    padding-right: 10px;
}

/* Captured animals report: compact header and ten equal animal columns. */
div.reports #reportWrapper .body img.reportImage.usedCages {
    background-image: url('../../../images/reports/reports_captured-animals.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Keep the complete three-column desktop layout visible when the browser's
   side panel reduces the viewport slightly below the legacy 1280px minimum. */
@media screen and (min-width: 1220px) and (max-width: 1279px) {
    html[data-trav47-layout="desktop"] body.buildingsV3 {
        min-width: 0 !important;
    }

    html[data-trav47-layout="desktop"] body div#background div#bodyWrapper,
    html[data-trav47-layout="desktop"] body #bodyWrapper,
    html[data-trav47-layout="desktop"] #topBar,
    html[data-trav47-layout="desktop"] #topBarHeroWrapper {
        width: 100% !important;
        min-width: 0 !important;
    }

    html[data-trav47-layout="desktop"] #center .sidebar.beforeContent {
        margin-left: 5px !important;
    }

    html[data-trav47-layout="desktop"] #center .sidebar.afterContent {
        margin-right: 5px !important;
    }
}

/* Desktop main-building demolition and NPC exchange actions use the same
   compact, modern button proportions as the building upgrade actions. */
@media screen and (min-width: 1025px) {
    html#mainLayout body.build #center #contentOuterContainer #content #build.gid15 form.demolishForm #btn_demolish,
    html#mainLayout body.build #center #contentOuterContainer #content #build .upgradeButtonsContainer button.gold.exchange:not(.finishTrainingGold) {
        position: relative !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        padding: 5px 10px !important;
        border-radius: 5px !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
        text-align: center !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        overflow: visible !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid15 form.demolishForm #btn_demolish > .button-container,
    html#mainLayout body.build #center #contentOuterContainer #content #build.gid15 form.demolishForm #btn_demolish .button-content,
    html#mainLayout body.build #center #contentOuterContainer #content #build .upgradeButtonsContainer button.gold.exchange:not(.finishTrainingGold) > .button-container,
    html#mainLayout body.build #center #contentOuterContainer #content #build .upgradeButtonsContainer button.gold.exchange:not(.finishTrainingGold) .button-content {
        position: static !important;
        display: contents !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        font: inherit !important;
        line-height: inherit !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid15 form.demolishForm #btn_demolish :is(.button-background, .buttonStart, .buttonEnd, .buttonMiddle),
    html#mainLayout body.build #center #contentOuterContainer #content #build .upgradeButtonsContainer button.gold.exchange:not(.finishTrainingGold) :is(.button-background, .buttonStart, .buttonEnd, .buttonMiddle) {
        display: none !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid15 form.demolishForm #btn_demolish {
        color: #f2f2f2 !important;
        border: 1px solid #283308 !important;
        background-color: #7cb029 !important;
        background-image: linear-gradient(to bottom, #7cb029, #587c1e) !important;
        box-shadow: inset 2px 0 1px -1px #4b6f19,
                    inset -2px 0 1px -1px #4b6f19,
                    inset 0 3px 1px -1px #b5e251,
                    inset 0 -3px 1px -1px rgba(44, 75, 12, .6) !important;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid15 form.demolishForm #btn_demolish:is(:hover, :focus-visible) {
        color: #283308 !important;
        border-color: #506030 !important;
        background-color: #7cb029 !important;
        background-image: none !important;
        box-shadow: inset 0 20px 25px -10px rgba(255, 255, 255, .7) !important;
        text-shadow: none !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build .upgradeButtonsContainer button.gold.exchange:not(.finishTrainingGold) {
        color: #392706 !important;
        border: 1px solid #704c0e !important;
        background-color: #b87e1c !important;
        background-image: linear-gradient(180deg, #f7dc83 0%, #dfb547 50%, #b87e1c 100%) !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 body.build #center #contentOuterContainer #content #build .upgradeButtonsContainer button.gold.exchange:not(.finishTrainingGold):is(:hover, :focus-visible) {
        border-color: #68470e !important;
        background-image: linear-gradient(180deg, #fff0aa 0%, #f4d56a 48%, #ca9429 100%) !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;
    }
}

/* Desktop active-village card: mirror the original sidebar typography and
   spacing while retaining Travlast's tribe badge and rename control. */
@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .header .buttonsWrapper {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .header .buttonsWrapper > .layoutButton {
        flex: 0 0 40px !important;
        float: none !important;
        right: auto !important;
        width: 40px !important;
        height: 40px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .playerNameRow {
        display: block !important;
        width: 100% !important;
        height: 16px !important;
        min-height: 16px !important;
        margin: 0 0 15px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .playerName {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        width: 100% !important;
        height: 16px !important;
        min-height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #333333 !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        direction: rtl !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .playerName .tribeBadgeIcon {
        display: block !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        max-width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .playerName .playerNameText {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        letter-spacing: normal !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .villageNameRow {
        display: block !important;
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageNameEditor,
    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageNameDisplay {
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageNameEditor {
        position: relative !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageNameDisplay {
        position: relative !important;
        display: block !important;
        padding: 0 0 0 30px !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content #villageNameField {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        overflow: hidden !important;
        color: #5e463a !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        font-variant-numeric: normal !important;
        letter-spacing: normal !important;
        line-height: 16px !important;
        direction: rtl !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageRenameButton {
        position: absolute !important;
        top: 50% !important;
        right: auto !important;
        left: 0 !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageNameEditor.is-editing .trav47VillageRenameForm {
        position: absolute !important;
        z-index: 3 !important;
        inset: 0 !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageNameEditor.is-editing #trav47VillageNameInput {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 26px !important;
        margin: 0 !important;
        padding: 1px 6px !important;
        font-family: "Noto Serif", Georgia, serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageNameEditor.is-editing :is(.trav47VillageRenameSave, .trav47VillageRenameCancel) {
        flex: 0 0 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageRenameStatus {
        position: absolute !important;
        z-index: 4 !important;
        top: 27px !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
        background: rgba(247, 243, 232, .96) !important;
        pointer-events: none !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .trav47VillageRenameStatus:empty {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .villageStatsRow {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        height: 16px !important;
        min-height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #666666 !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 16px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .villageStatsRow :is(.villagePopulation, .loyalty) {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 3px !important;
        height: 16px !important;
        min-height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: 16px !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .villageStatLabel,
    html[data-trav47-layout="desktop"] body #sidebarAfterContent #sidebarBoxActiveVillage > .content .villageStatValue {
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: 16px !important;
    }
}

/* Reports overview on desktop: show the coloured event icon and keep every
   inline icon vertically centred with the report subject. */
body.trav47ReportsPage #trav47ReportsOverview .trav47ReportReadState {
    display: none;
}

@media screen and (min-width: 1025px) {
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportRowMain {
        display: flex;
        align-items: center;
        gap: 4px;
        width: 100%;
        min-width: 0;
        min-height: 20px;
        margin: 0;
        padding: 0;
        line-height: 20px;
    }

    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType {
        display: block;
        order: 0;
        flex: 0 0 19px;
        width: 19px;
        height: 17px;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0;
        box-sizing: border-box;
        background-color: transparent;
        background-image: url('../../../images/icons/report_icons.gif');
        background-repeat: no-repeat;
        box-shadow: none;
    }

    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportReadState {
        display: block;
        order: -1;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0;
        box-sizing: border-box;
        background-color: transparent;
        background-repeat: no-repeat;
        box-shadow: none;
    }

    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType0 { background-position: 0 -3px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType1 { background-position: 0 -53px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType2 { background-position: 0 -103px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType3 { background-position: 0 -153px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType4 { background-position: 0 -203px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType5 { background-position: 0 -253px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType6 { background-position: 0 -303px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType7 { background-position: 0 -353px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType8 { background-position: 0 -403px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType9 { background-position: 0 -453px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType10 { background-position: 0 -503px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType11 { background-position: 0 -553px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType12 { background-position: 0 -603px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType13 { background-position: 0 -653px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType14 { background-position: 0 -703px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType15 { background-position: 0 -753px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType16 { background-position: 0 -803px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType17 { background-position: 0 -853px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType18 { background-position: 0 -903px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType19 { background-position: 0 -953px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType20 { background-position: 0 -1003px; }
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType21 { background-position: 0 -1053px; }

    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType22,
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType33 {
        background-image: url('../../../images/reports/mini_house-rtl.png');
        background-position: center;
    }

    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportType23 {
        background-image: url('../../../images/reports/mini_houseFailed-rtl.gif');
        background-position: center;
    }

    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportReward {
        display: inline-flex;
        order: 2;
        align-items: center;
        justify-content: center;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin: 0;
        padding: 0;
        line-height: 18px;
        vertical-align: middle;
    }

    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportReward > img,
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportReward > span,
    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportReward > i {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle;
        box-sizing: border-box;
    }

    body.trav47ReportsPage #trav47ReportsOverview .trav47ReportRowTitle {
        display: inline-flex;
        order: 1;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 20px;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 20px;
        vertical-align: middle;
    }
}

div.reports #reportWrapper table.trav47ReportInformationTable {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    box-sizing: border-box;
}

div.reports #reportWrapper table.trav47ReportInformationTable .trav47ReportInformationLabel {
    width: 72px;
    padding: 0 6px;
    border-left: 1px solid #d4ddd0;
    color: #526148;
    background: #edf3e9;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
}

div.reports #reportWrapper table.trav47ReportInformationTable .trav47ReportInformationCell {
    padding: 0;
    overflow: hidden;
    background: #fff;
    direction: rtl;
    box-sizing: border-box;
}

div.reports #reportWrapper .trav47ReportInformationList {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

div.reports #reportWrapper .trav47ReportInformationItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 24px;
    margin: 0;
    padding: 1px 10px 1px 4px;
    overflow: hidden;
    border-bottom: 1px solid #e5e8e1;
    direction: rtl;
    white-space: nowrap;
    box-sizing: border-box;
}

div.reports #reportWrapper .trav47ReportInformationItem:last-child {
    border-bottom: 0;
}

div.reports #reportWrapper .trav47ReportInformationItem > img {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    transform: none;
    image-rendering: auto;
}

/* Keep report-event icons beside their text; legacy report rules center every unit icon. */
div.reports #reportWrapper table.trav47ReportInformationTable .trav47ReportInformationItem > img.unit,
div.reports #reportWrapper table.trav47ReportInformationTable .trav47ReportInformationItem > img.trav47ReportInformationIcon {
    position: static;
    float: none;
    margin: 0;
    inset: auto;
}

div.reports #reportWrapper .trav47ReportInformationItem > img.trav47ReportInformationIcon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

div.reports #reportWrapper .trav47ReportInformationText {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #4d5548;
    font: 400 12px/20px Tahoma, Arial, sans-serif;
    text-align: right;
    text-overflow: clip;
    white-space: nowrap;
}

div.reports #reportWrapper .animalReport {
    overflow: hidden;
    border: 1px solid #b8c7b2;
    border-radius: 0 0 4px 4px;
    background: #fff;
    box-sizing: border-box;
}

div.reports #reportWrapper .animalReport .trav47AnimalCaptureHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 4px 8px;
    border: 0;
    border-bottom: 1px solid #b8c7b2;
    background: linear-gradient(180deg, #f5f8f2 0%, #e5eee1 100%);
    direction: rtl;
    box-sizing: border-box;
}

div.reports #reportWrapper .animalReport .trav47AnimalCaptureOrigin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}

div.reports #reportWrapper .animalReport .trav47AnimalCaptureOrigin {
    flex: 1 1 auto;
    gap: 3px;
    max-width: none;
    color: #61705a;
    font: 700 12px/24px Tahoma, Arial, sans-serif;
}

div.reports #reportWrapper .animalReport .trav47AnimalCaptureOrigin a {
    min-width: 0;
    overflow: hidden;
    color: #5f812c;
    font-weight: 700;
    text-decoration: none;
    text-overflow: clip;
    white-space: nowrap;
}

div.reports #reportWrapper .animalReport table.trav47AnimalCaptureTroops {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    background: #fff;
}

div.reports #reportWrapper .animalReport table.trav47AnimalCaptureTroops td {
    width: 10%;
    min-width: 0;
    padding: 2px 1px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid #e0ddd5;
    border-bottom: 1px solid #e0ddd5;
    color: #40392f;
    background: #fff;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
}

div.reports #reportWrapper .animalReport table.trav47AnimalCaptureTroops td:last-child {
    border-left: 0;
}

div.reports #reportWrapper .animalReport table.trav47AnimalCaptureTroops tbody:first-child td {
    height: 30px;
    background: #f3f7f0;
}

div.reports #reportWrapper .animalReport table.trav47AnimalCaptureTroops tbody.last td {
    height: 25px;
    font: 600 clamp(8px, 1.65vw, 11px)/19px Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

div.reports #reportWrapper .animalReport table.trav47AnimalCaptureTroops tbody.last td.none {
    color: #9ba295;
    font-weight: 400;
}

div.reports #reportWrapper .animalReport table.trav47AnimalCaptureTroops img.unit {
    display: block;
    margin: 0 auto;
    transform: none;
    image-rendering: auto;
}

/* Remove the browser's blue press/tap flash consistently across the game.
   Pointer focus loses only the native outline; keyboard focus-visible remains. */
html,
body,
body * {
    -webkit-tap-highlight-color: transparent !important;
}

:where(a, button, input, select, textarea, summary, label, [role="button"], [tabindex]):focus:not(:focus-visible) {
    outline: none !important;
}

/* Battle report statistics use only troop counts preserved in the report. */
body.reports #reportWrapper .trav47ReportBattleStatistics {
    clear: both;
    box-sizing: border-box;
    width: 100%;
    margin: 14px 0 0;
    overflow: hidden;
    border: 1px solid #c6a96a;
    border-radius: 4px;
    background: #f7eed7;
    color: #4a3722;
}

body.reports #reportWrapper .trav47ReportBattleStatistics h3 {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 7px 12px;
    background: #7b883f;
    color: #fff9e9;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: right;
}

body.reports #reportWrapper .trav47ReportBattleStatistics table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: transparent;
}

body.reports #reportWrapper .trav47ReportBattleStatistics th,
body.reports #reportWrapper .trav47ReportBattleStatistics td {
    box-sizing: border-box;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid rgba(120, 95, 47, 0.16);
    color: #4a3722;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

body.reports #reportWrapper .trav47ReportBattleStatistics thead th {
    background: rgba(210, 190, 138, 0.42);
    font-weight: 700;
}

body.reports #reportWrapper .trav47ReportBattleStatistics tbody th {
    width: 42%;
    text-align: right;
    font-weight: 700;
}

body.reports #reportWrapper .trav47ReportBattleStatistics tr:last-child th,
body.reports #reportWrapper .trav47ReportBattleStatistics tr:last-child td {
    border-bottom: 0;
}

body.reports #reportWrapper .trav47AnimalResourceReward {
    clear: both;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    border: 1px solid #c7d2c2;
    border-radius: 4px;
    background: #fff;
    color: #40392f;
}

body.reports #reportWrapper .trav47AnimalResourceRewardTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    padding: 0 7px;
    background: linear-gradient(180deg, #f1f5ee, #e7eee3);
    color: #526247;
    box-sizing: border-box;
}

body.reports #reportWrapper .trav47AnimalResourceReward strong {
    font-size: 11px;
    line-height: 24px;
    white-space: nowrap;
}

body.reports #reportWrapper .trav47AnimalResourceReward small {
    color: #718069;
    font-size: 9px;
    line-height: 24px;
    white-space: nowrap;
}

body.reports #reportWrapper .trav47AnimalResourceRewardValues {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-width: 0;
    direction: rtl;
    box-sizing: border-box;
}

body.reports #reportWrapper .trav47AnimalResourceRewardValues .trav47AnimalRewardResource:last-child {
    border-left: 0;
}

@media screen and (max-width: 760px) {
    body.reports #reportWrapper .trav47ReportBattleStatistics {
        margin-top: 10px;
    }

    body.reports #reportWrapper .trav47ReportBattleStatistics h3 {
        padding: 6px 8px;
        font-size: 14px;
        line-height: 18px;
    }

    body.reports #reportWrapper .trav47ReportBattleStatistics th,
    body.reports #reportWrapper .trav47ReportBattleStatistics td {
        padding: 5px 4px;
        font-size: 11px;
        line-height: 16px;
    }

    body.reports #reportWrapper .trav47ReportBattleStatistics tbody th {
        width: 40%;
    }

    body.reports #reportWrapper .trav47AnimalResourceReward {
        margin-top: 6px;
        padding: 0;
    }

    body.reports #reportWrapper .trav47AnimalResourceRewardTitle {
        min-height: 21px;
        padding: 0 6px;
    }

    body.reports #reportWrapper .trav47AnimalResourceReward strong,
    body.reports #reportWrapper .trav47AnimalResourceReward small {
        line-height: 21px;
    }

    body.reports #reportWrapper .trav47AnimalResourceRewardValues {
        gap: 0;
    }
}

.trav47-map-oasis-animals-title {
    display: inline-block !important;
    margin-top: 2px !important;
    font-weight: 700 !important;
}

.trav47-map-oasis-animals {
    display: inline-flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    align-items: flex-start !important;
    direction: rtl !important;
}

.trav47-map-oasis-animal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    min-height: 16px !important;
    white-space: nowrap !important;
}

.trav47-map-oasis-animal .unit {
    vertical-align: middle !important;
}

/* رسالة حالة حماية المبتدئين داخل نافذة الذهب فقط. */
.dialog.trav47PaymentShop #paymentWizard.paymentFeatures #moreProtection > h5.round {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0 0 8px !important;
    padding: 9px 14px !important;
    box-sizing: border-box;
    border: 1px solid #b8cad3;
    border-radius: 5px;
    background: linear-gradient(to bottom, #f8fbfc 0%, #e4eef2 100%);
    color: #4c6270;
    direction: rtl;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
}

@media screen and (min-width: 761px) {
    .dialog.trav47PaymentShop #paymentWizard.paymentFeatures #moreProtection > h5.round {
        width: min(420px, calc(100% - 40px)) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* The simulator's generic result rule turns direct divs into a three-column grid. */
@media screen and (max-width: 760px) {
    div.build .gid16 #trav47SimulatorResult.trav47RallyResult > .trav47RallyBattleStatistics {
        display: block;
        grid-column: 1 / -1;
        justify-self: stretch;
        align-self: stretch;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 8px 0 0;
        padding: 0;
    }

    div.build .gid16 #trav47SimulatorResult.trav47RallyResult > .trav47RallyBattleStatistics > table {
        display: table;
        box-sizing: border-box;
        width: 100%;
        min-width: 100%;
        max-width: none;
        margin: 0;
    }
}

/* Compact hero controls for the battle simulator. */
div.build .gid16 .trav47RallyHeroControls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    margin: 4px 0 0;
    padding: 4px 6px;
    border-top: 1px solid #dbc69c;
    background: #fff8e8;
    box-sizing: border-box;
    direction: rtl;
}

div.build .gid16 .trav47RallyHeroControls.active { display: flex; }

div.build .gid16 .trav47HeroToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin: 0;
    cursor: pointer;
}

div.build .gid16 .trav47HeroToggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

div.build .gid16 .trav47HeroToggle img {
    display: block;
    width: 24px;
    height: 24px;
    opacity: 0.42;
    transform: scale(0.9);
}

div.build .gid16 .trav47HeroToggle input:checked + img {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 1px 1px rgba(77, 47, 18, 0.35));
}

div.build .gid16 .trav47HeroGearPicker {
    position: relative;
    flex: 0 0 auto;
}

div.build .gid16 .trav47HeroGearPicker summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    list-style: none;
}

div.build .gid16 .trav47HeroGearPicker summary::-webkit-details-marker { display: none; }

div.build .gid16 .trav47HeroGearPicker summary img,
div.build .gid16 .trav47HeroGearEmpty {
    display: block;
    width: 29px !important;
    height: 29px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    overflow: visible;
}

div.build .gid16 .trav47HeroGearEmpty {
    box-sizing: border-box;
    border: 1px dashed #a88f63;
    border-radius: 3px;
    background: #efe1be;
}

div.build .gid16 .trav47HeroGearEmpty.isLeftHand { background: #efe1be url("../../../images/hero/full/female/items/item76.png") center / 20px no-repeat; opacity: 0.42; }
div.build .gid16 .trav47HeroGearEmpty.isWeapon { background: #efe1be url("../../../img/hero/female/items/item16.png") center / 20px no-repeat; opacity: 0.42; }

div.build .gid16 .trav47HeroGearOptions {
    position: absolute;
    z-index: 20;
    top: 31px;
    right: 0;
    display: grid;
    grid-template-columns: repeat(4, 34px);
    gap: 4px;
    width: max-content;
    max-width: 188px;
    padding: 5px;
    border: 1px solid #9e8050;
    border-radius: 3px;
    background: #fff6df;
    box-shadow: 0 3px 8px rgba(58, 38, 14, 0.24);
}

div.build .gid16 .trav47HeroWeaponOptions { grid-template-columns: repeat(5, 34px); }

div.build .gid16 .trav47HeroGearOptions label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    cursor: pointer;
}

div.build .gid16 .trav47HeroGearOptions input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

div.build .gid16 .trav47HeroGearOptions img {
    display: block;
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    overflow: visible;
}

div.build .gid16 .trav47HeroGearOptions label:has(input:checked) img,
div.build .gid16 .trav47HeroGearOptions label:has(input:checked) span {
    outline: 1px solid #398063;
    background-color: #d7edcf;
}

div.build .gid16 .trav47HeroStat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
}

div.build .gid16 .trav47HeroStat > img {
    display: block;
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}

div.build .gid16 .trav47HeroValue {
    box-sizing: border-box;
    width: 38px;
    height: 27px;
    margin: 0 !important;
    padding: 2px 3px !important;
    border: 1px solid #bda16d !important;
    border-radius: 2px;
    background: #fffdf5 !important;
    color: #574224;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

div.build .gid16 .trav47CombatReportHero {
    width: 22px !important;
    height: 22px !important;
    margin: 0 1px;
}

div.build .gid16 .trav47CombatReportHero.isLost { opacity: 0.4; }

@media screen and (max-width: 760px) {
    div.build .gid16 .trav47RallyHeroControls { gap: 4px; min-height: 42px; padding: 4px 2px; }
    div.build .gid16 .trav47HeroValue { width: 36px; font-size: 10px; }
    div.build .gid16 .trav47HeroGearPicker summary { width: 36px; height: 36px; }
    div.build .gid16 .trav47HeroGearPicker summary img,
    div.build .gid16 .trav47HeroGearEmpty { width: 33px !important; height: 33px !important; }
    div.build .gid16 .trav47HeroGearOptions {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        grid-template-columns: repeat(4, 38px);
        gap: 3px;
        max-width: calc(100vw - 20px);
        padding: 5px;
        box-sizing: border-box;
        overflow: visible;
    }
    div.build .gid16 .trav47HeroWeaponOptions { grid-template-columns: repeat(5, 38px); }
    div.build .gid16 .trav47HeroGearOptions label { width: 38px; height: 38px; overflow: visible; }
    div.build .gid16 .trav47HeroGearOptions img {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        clip: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}


/* Rally point battle simulator: compact vertical formation and native troop-table rhythm. */
div.build .gid16 .warsim.trav47BattleSimulator {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #47351d;
    direction: rtl;
}

div.build .gid16 .trav47RallyHeader {
    margin: 0 0 7px;
    padding: 7px 10px;
    border-bottom: 1px solid #c9ae7a;
    background: #efe1c4;
}

div.build .gid16 .trav47RallyHeader h4 {
    margin: 0;
    color: #44321a;
    font-size: 16px;
    line-height: 20px;
}

div.build .gid16 .trav47RallyHeader p {
    margin: 1px 0 0;
    color: #766144;
    font-size: 11px;
    line-height: 16px;
}

div.build .gid16 .trav47RallyRole {
    min-width: 0;
    padding: 8px;
    border: 1px solid #c6aa78;
    background: #f9efd9;
    box-sizing: border-box;
}

div.build .gid16 .trav47RallyAttacker {
    border-top: 3px solid #a7513f;
}

div.build .gid16 .trav47RallyDefender {
    border-top: 3px solid #287467;
}

div.build .gid16 .trav47RallyRoleHead {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    margin: 0 0 4px;
}

div.build .gid16 .trav47RallyRoleHead strong {
    color: #49351e;
    font-size: 14px;
    line-height: 20px;
}

div.build .gid16 .trav47RallyRoleHead span {
    color: #786344;
    font-size: 11px;
    line-height: 16px;
}

div.build .gid16 .trav47RallyTribes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin: 0 0 6px;
}

div.build .gid16 .trav47RallyRoleHead .trav47RallyTribes {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    margin: 0;
}

div.build .gid16 .trav47RallyTribes > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

div.build .gid16 .trav47RallyTribe {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 30px;
    padding: 1px;
    border: 1px solid #cfba91;
    background: #f4e7cd;
    color: #645039;
    cursor: pointer;
    box-sizing: border-box;
}

div.build .gid16 .trav47RallyTribe img {
    flex: 0 0 23px;
    width: 23px;
    height: 28px;
    object-fit: contain;
}

div.build .gid16 .trav47RallyTribes:has(> input:checked) .trav47RallyTribe {
    border-color: #c9c4b7;
    background: #e5e2da;
    color: #8b877d;
}

div.build .gid16 .trav47RallyTribes:has(> input:checked) .trav47RallyTribe img {
    opacity: 0.3;
    filter: grayscale(1);
}

div.build .gid16 .trav47RallyTribes > input:checked + .trav47RallyTribe,
div.build .gid16 .trav47RallyTribes > input:checked + .trav47RallyTribe:hover {
    color: inherit;
}

div.build .gid16 .trav47RallyTribes > input:checked + .trav47RallyTribe img {
    opacity: 1;
    filter: none;
}

div.build .gid16 .trav47RallyTribes > input:focus + .trav47RallyTribe,
div.build .gid16 .trav47RallyTribe:hover {
    border-color: #9c7743;
    background: #fff6e3;
}

div.build .gid16 .trav47RallyAttacker .trav47RallyTribes > input:checked + .trav47RallyTribe {
    border-color: #9d4232;
    background: #f2d4c7;
    box-shadow: inset 0 0 0 1px rgba(157, 66, 50, 0.22);
    color: #7f3228;
}

div.build .gid16 .trav47RallyDefender .trav47RallyTribes > input:checked + .trav47RallyTribe {
    border-color: #287467;
    background: #d9eae4;
    box-shadow: inset 0 0 0 1px rgba(40, 116, 103, 0.2);
    color: #245f55;
}

div.build .gid16 .trav47RallyUnits {
    min-height: 44px;
    padding: 4px;
    border: 1px solid #d5c19a;
    background: #fdf5e4;
    box-sizing: border-box;
}

div.build .gid16 .trav47RallyEmpty {
    margin: 9px 5px;
    color: #866f50;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

div.build .gid16 .trav47RallyUnits.hasSelection .trav47RallyEmpty {
    display: none;
}

div.build .gid16 .trav47RallyTroopGroup {
    display: none;
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}

div.build .gid16 .trav47RallyTroopGroup.active {
    display: table;
}

div.build .gid16 .trav47RallyTroopGroup td {
    height: 52px;
    padding: 2px 3px;
    border: 1px solid #d1ba8a;
    background: #f7e9ca;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
}

div.build .gid16 .trav47RallyTroopGroup td.trav47RallyTroopBlank {
    background: #f7e9ca;
}

div.build .gid16 .trav47RallyTroopGroup img.unit {
    display: block;
}

div.build .gid16 .trav47RallyTroopMeta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 23px;
}

div.build .gid16 .trav47RallyTroopGroup input.trav47RallyUpgrade {
    width: 29px;
    height: 19px;
    padding: 1px;
    border: 1px solid #b89a69;
    background: #f3e2b8;
    box-sizing: border-box;
    color: #715429;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

div.build .gid16 .trav47RallyTroopGroup input.text {
    width: 72px;
    max-width: 100%;
    height: 22px;
    padding: 1px 3px;
    border: 1px solid #b89a69;
    border-radius: 0;
    background: #fffdfa;
    box-sizing: border-box;
    color: #3e5f59;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: top;
}

div.build .gid16 .trav47RallyTroopGroup input.text:focus {
    border-color: #27786b;
    box-shadow: 0 0 0 1px rgba(39, 120, 107, 0.22);
    outline: 0;
}

div.build .gid16 .trav47RallyDefenders {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 7px;
    margin-top: 7px;
}

div.build .gid16 .trav47RallyDefenders > .trav47RallyRole {
    min-width: 0;
}

div.build .gid16 .trav47RallyAddDefender {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #287467;
    border-radius: 3px;
    background: #e0eee9;
    color: #246257;
    cursor: pointer;
    font-size: 17px;
    line-height: 18px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
}

div.build .gid16 .trav47RallyAddDefender:hover,
div.build .gid16 .trav47RallyAddDefender:focus,
div.build .gid16 .trav47RallyAddDefender.isOpen {
    background: #287467;
    color: #fff;
    outline: 0;
}

div.build .gid16 .trav47RallyAdditionalDefender[hidden] {
    display: none;
}

div.build .gid16 .trav47RallyAdditionalDefender:not([hidden]) {
    grid-column: 1 / -1;
}

div.build .gid16 .trav47RallyOptions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 7px 0;
    padding: 6px 8px;
    border: 1px solid #cdb489;
    background: #f3e5c9;
    color: #634e31;
    font-size: 12px;
}

div.build .gid16 .trav47RallyOptions strong { color: #46331d; }
div.build .gid16 .trav47RallyOptions label { cursor: pointer; }
div.build .gid16 .trav47RallyOptions input { vertical-align: middle; }

div.build .gid16 .trav47RallyBattleSettings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 7px 0;
}

div.build .gid16 .trav47RallyBattleSettings section {
    padding: 7px;
    border: 1px solid #d0b88a;
    background: #f8edcf;
}

div.build .gid16 .trav47RallyBattleSettings h5 {
    margin: 0 0 5px;
    color: #49351e;
    font-size: 12px;
}

div.build .gid16 .trav47RallyBattleSettings label {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin: 2px 0 0 6px;
    color: #675136;
    font-size: 11px;
}

div.build .gid16 .trav47RallyBattleSettings input,
div.build .gid16 .trav47RallyBattleSettings select {
    width: 52px;
    height: 23px;
    border: 1px solid #b89c6b;
    background: #fffdf7;
    box-sizing: border-box;
    color: #3e5f59;
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-align: center;
}

div.build .gid16 .trav47RallyBattleSettings select { width: 82px; text-align: right; }

div.build .gid16 .trav47RallyCatapultTargets {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 29px;
}

div.build .gid16 .trav47RallyBattleSettings .trav47RallyCatapultTargets label {
    margin: 0;
    padding: 3px 6px;
    border: 1px solid #c8ad7b;
    background: #fff8e8;
    cursor: pointer;
}

div.build .gid16 .trav47RallyBattleSettings .trav47RallyCatapultTargets input {
    width: auto;
    height: auto;
    margin: 0 0 0 3px;
}

div.build .gid16 table.troop_details tbody.units tr.trav47RallyOutgoingCatapultTargets {
    display: table-row;
    height: 24px;
}

div.build .gid16 table.troop_details tbody.units tr.trav47RallyOutgoingCatapultTargets th,
div.build .gid16 table.troop_details tbody.units tr.trav47RallyOutgoingCatapultTargets td {
    background: #fff;
    vertical-align: middle;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 24px;
    box-sizing: border-box;
}

div.build .gid16 table.troop_details tbody.units tr.trav47RallyOutgoingCatapultTargets th {
    white-space: nowrap;
}

div.build .gid16 table.troop_details tbody.units tr.trav47RallyOutgoingCatapultTargets td {
    padding-right: 6px;
    text-align: center;
}

div.build .gid16 .trav47RallyOutgoingCatapultTargetList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    height: 22px;
    overflow: hidden;
    line-height: normal;
}

div.build .gid16 .trav47RallyOutgoingCatapultTarget {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: calc(50% - 3px);
    height: 18px;
    padding: 0 7px;
    overflow: hidden;
    border: 1px solid #c4b18e;
    border-radius: 2px;
    background: #f7f2e7;
    color: #4a3b27;
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.build .gid16 .trav47RallyOutgoingCatapultTarget:only-child {
    max-width: 100%;
}

/* Desktop inbox and sent-message rows: selection, state icon and subject
   remain on one baseline. Phone layouts keep their dedicated stylesheet. */
@media screen and (min-width: 1025px) {
    body.trav47MessagesPage #content.messages table#overview td.subject {
        vertical-align: middle;
    }

    body.trav47MessagesPage #content.messages table#overview .subjectWrapper {
        position: static !important;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 5px;
        width: 100%;
        min-width: 0;
        height: 22px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        line-height: 22px;
        box-sizing: border-box;
    }

    body.trav47MessagesPage #content.messages table#overview .trav47MessageSelectionCell {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        flex: 0 0 18px;
        min-width: 18px;
        height: 22px;
        margin: 0;
        padding: 0;
        line-height: 0;
        vertical-align: middle;
    }

    body.trav47MessagesPage #content.messages table#overview .trav47MessageRowCheck {
        position: static !important;
        display: block;
        flex: 0 0 13px;
        width: 13px;
        height: 13px;
        margin: 0;
        padding: 0;
        inset: auto !important;
        transform: none !important;
        align-self: center;
        vertical-align: middle;
    }

    body.trav47MessagesPage #content.messages table#overview .trav47MessageSubjectLink {
        display: flex;
        align-items: center;
        gap: 5px;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 22px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        line-height: 22px;
        text-align: right;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
    }

    body.trav47MessagesPage #content.messages table#overview .trav47MessageSubjectLink > img.messageStatus {
        position: static;
        display: block;
        flex: 0 0 16px;
        float: none;
        width: 16px;
        height: 16px;
        align-self: center;
        margin: 0;
        padding: 0;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        vertical-align: middle;
    }

    body.trav47MessagesPage #content.messages table#overview .trav47MessageSubjectText {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        line-height: 22px;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

div.build .gid16 .trav47RallySimulationError {
    margin: 7px 0;
    padding: 8px;
    border: 1px solid #bd7569;
    background: #f6dfd8;
    color: #873f34;
    font-size: 12px;
    text-align: center;
}

div.build .gid16 .trav47RallySubmit {
    margin: 0 0 10px;
    text-align: center;
}

div.build .gid16 .trav47RallySubmit button.green {
    min-width: 170px;
    height: 34px;
    padding: 0 18px;
    border: 1px solid #2d6135 !important;
    border-radius: 3px;
    background: linear-gradient(180deg, #93c64e 0%, #4c7d29 100%) !important;
    color: #fff8e9 !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px rgba(0, 0, 0, 0.25);
}

div.build .gid16 .trav47RallyResult {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    min-width: 0;
    margin: 0 0 10px;
    padding: 7px;
    border: 1px solid #b89d70;
    background: #f5e6c8;
    scroll-margin-top: 14px;
    box-sizing: border-box;
}

div.build .gid16 .trav47RallyResult h4 {
    margin: 0;
    color: #45331d;
    font-size: 14px;
}

div.build .gid16 .trav47RallyResult b { color: #257264; font-family: Arial, sans-serif; }

div.build .gid16 .trav47RallySiegeReport {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #665035;
    font-size: 11px;
}

div.build .gid16 .trav47RallySiegeSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid #cdb184;
    background: #fff6e3;
}

div.build .gid16 .trav47RallySiegeSection strong {
    color: #654128;
    font-size: 11px;
    white-space: nowrap;
}

div.build .gid16 .trav47RallySiegeSection span {
    color: #2d6558;
    direction: rtl;
    white-space: nowrap;
}

div.build .gid16 .trav47RallySiegeSection.isCatapult {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    min-height: 0;
    padding: 2px 0;
    border: 0;
    background: transparent;
}

div.build .gid16 .trav47RallySiegeSection.isCatapult strong {
    width: 100%;
    text-align: right;
}

div.build .gid16 .trav47RallySiegeSection.isCatapult .trav47RallyCatapultResult {
    display: block;
    width: 100%;
    margin: 0;
    color: #2d6558;
    background: transparent;
    text-align: center;
    white-space: normal;
}

div.build .gid16 .trav47RallyReportParties {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

div.build .gid16 .trav47RallyReportParties section {
    padding: 6px;
    border: 1px solid #d4bd91;
    background: #fff8e8;
}

div.build .gid16 .trav47RallyReportParties h5 {
    margin: 0 0 4px;
    color: #4c3821;
    font-size: 12px;
}

div.build .gid16 .trav47RallyReportLegend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-bottom: 2px;
    color: #8a7252;
    font-size: 9px;
    text-align: center;
}

div.build .gid16 .trav47RallyReportUnits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
}

div.build .gid16 .trav47RallyReportUnit {
    display: grid;
    grid-template-columns: 20px repeat(3, minmax(0, 1fr));
    align-items: center;
    min-width: 0;
    padding: 2px;
    border: 1px solid #dfcfad;
    background: #fbf1dd;
    color: #355e58;
    font-family: Arial, sans-serif;
    font-size: 10px;
    text-align: center;
}

div.build .gid16 .trav47RallyReportUnit img.unit { justify-self: center; }
div.build .gid16 .trav47RallyReportUnit em { color: #a34d41; font-style: normal; }
div.build .gid16 .trav47RallyReportUnit b { color: #2d7769; }
div.build .gid16 .trav47RallyAdditionalReport { margin-top: 7px !important; }

div.build .gid16 .trav47CombatReportParties {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
}

div.build .gid16 .trav47CombatReportParty {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #c6b184;
    background: #fff5dc;
    box-sizing: border-box;
}

div.build .gid16 .trav47CombatReportAttacker { border-color: #c37a70; }
div.build .gid16 .trav47CombatReportAttacker .trav47CombatReportTable { background: #fff4ed; }
div.build .gid16 .trav47CombatReportDefender { border-color: #78a8c0; }
div.build .gid16 .trav47CombatReportDefender .trav47CombatReportTable { background: #eef7fb; }

div.build .gid16 .trav47CombatReportHeading {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 3px 8px;
    box-sizing: border-box;
    color: #4b3821;
    font-size: 14px;
}

div.build .gid16 .trav47CombatReportHeading img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

div.build .gid16 .trav47CombatReportDefender .trav47CombatReportHeading {
    background: #8eb4ca;
    color: #fff;
}

div.build .gid16 .trav47CombatReportAttacker {
    border-bottom: 2px solid #c69478;
}

div.build .gid16 .trav47CombatReportAttacker .trav47CombatReportHeading {
    background: #a8473e;
    color: #fff8e8;
}

div.build .gid16 .trav47CombatReportHeading span {
    margin-inline-start: auto;
    font-size: 11px;
    font-weight: 700;
}

div.build .gid16 .trav47CombatReportIdentity {
    padding: 3px 8px 4px;
    color: #718624;
    font-size: 12px;
    font-weight: 700;
}

div.build .gid16 .trav47CombatReportTable {
    width: 100%;
    border-top: 1px solid #d9c7a0;
    border-collapse: collapse;
    table-layout: fixed;
}

div.build .gid16 .trav47CombatReportTable td {
    height: 22px;
    padding: 1px 0;
    color: #5b6f7a;
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-align: center;
}

div.build .gid16 .trav47CombatReportIcons td { height: 27px; }
div.build .gid16 .trav47CombatReportIcons img.unit { display: inline-block; }
div.build .gid16 .trav47CombatReportSent td { border-top: 1px solid #eadabd; }
div.build .gid16 .trav47CombatReportLost td { border-top: 1px solid #eadabd; color: #8c4b43; }

div.build .gid16 .trav47RallyBattleStatistics {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 8px;
}

div.build .gid16 .trav47RallyBattleStatistics table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    box-sizing: border-box;
    border-collapse: collapse;
    color: #4e3c25;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

div.build .gid16 .trav47RallyBattleStatistics th,
div.build .gid16 .trav47RallyBattleStatistics td {
    padding: 4px 7px;
    text-align: center;
}

div.build .gid16 .trav47RallyBattleStatistics thead tr:first-child th {
    background: #7d8948;
    color: #fff7df;
    font-size: 15px;
    text-align: right;
}

div.build .gid16 .trav47RallyBattleStatistics thead tr:last-child th {
    background: #f8eed4;
    color: #6e5b39;
    font-weight: 700;
}

div.build .gid16 .trav47RallyBattleStatistics tbody th {
    color: #765e37;
    font-weight: 400;
    text-align: right;
}

div.build .gid16 .trav47RallyBattleStatistics tbody tr:nth-child(2n) { background: #fbefd3; }

div.build .gid16 .trav47RallyStatisticIcon {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-inline-start: 3px;
    vertical-align: -3px;
}

div.build .gid16 .trav47RallyStatisticIcon.isCombat {
    color: #8a4036;
    font-size: 18px;
    font-weight: 700;
    line-height: 12px;
}

div.build .gid16 .trav47RallyStatisticIcon.isCrop {
    background: url("../../../images/icons/resources/crop_small.png") center / contain no-repeat;
}

div.build .gid16 .trav47RallyStatisticIcon.isResources {
    background: url("../../../images/icons/resources/resources_small.png") center / contain no-repeat;
}

@media screen and (max-width: 620px) {
    div.build .gid16 .trav47RallyHeader { margin-bottom: 5px; padding: 6px 7px; }
    div.build .gid16 .trav47RallyHeader h4 { font-size: 15px; }
    div.build .gid16 .trav47RallyHeader p { font-size: 10px; }
    div.build .gid16 .trav47RallyRole { padding: 6px; }
    div.build .gid16 .trav47RallyRoleHead { gap: 4px; min-height: 29px; margin-bottom: 3px; }
    div.build .gid16 .trav47RallyRoleHead strong { font-size: 13px; }
    div.build .gid16 .trav47RallyRoleHead span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    div.build .gid16 .trav47RallyRoleHead .trav47RallyTribes { gap: 1px; }
    div.build .gid16 .trav47RallyTribe { height: 27px; padding: 1px; }
    div.build .gid16 .trav47RallyTribe img { flex-basis: 20px; width: 20px; height: 25px; }
    div.build .gid16 .trav47RallyUnits { min-height: 39px; padding: 2px; }
    div.build .gid16 .trav47RallyEmpty { margin: 8px 3px; font-size: 10px; }
    div.build .gid16 .trav47RallyTroopGroup { border-spacing: 1px; }
    div.build .gid16 .trav47RallyTroopGroup td { height: 47px; padding: 2px 1px; }
    div.build .gid16 .trav47RallyTroopMeta { gap: 1px; height: 21px; }
    div.build .gid16 .trav47RallyTroopGroup img.unit { transform: scale(0.86); transform-origin: center; }
    div.build .gid16 .trav47RallyTroopGroup input.trav47RallyUpgrade { width: 25px; height: 18px; font-size: 9px; }
    div.build .gid16 .trav47RallyTroopGroup input.text { width: 58px; max-width: 100%; height: 21px; font-size: 11px; }
    div.build .gid16 .trav47RallyDefenders { grid-template-columns: minmax(0, 1fr); gap: 5px; margin-top: 5px; }
    div.build .gid16 .trav47RallyAddDefender { flex-basis: 20px; width: 20px; height: 20px; font-size: 16px; line-height: 16px; }
    div.build .gid16 .trav47RallyOptions { gap: 8px; margin: 5px 0; padding: 5px; font-size: 11px; }
    div.build .gid16 .trav47RallyBattleSettings { gap: 4px; margin: 5px 0; }
    div.build .gid16 .trav47RallyBattleSettings section { padding: 5px; }
    div.build .gid16 .trav47RallyBattleSettings label { display: flex; margin-left: 0; font-size: 10px; }
    div.build .gid16 .trav47RallyBattleSettings input { width: 40px; }
    div.build .gid16 .trav47RallyBattleSettings select { width: 67px; font-size: 10px; }
    div.build .gid16 .trav47RallySiegeReport { grid-template-columns: 1fr; gap: 4px; padding: 0; }
    div.build .gid16 .trav47RallySiegeSection { min-height: 25px; padding: 3px 5px; }
    div.build .gid16 .trav47RallyReportParties { grid-template-columns: 1fr; }
    div.build .gid16 .trav47RallyReportUnits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    div.build .gid16 .trav47CombatReportParties { gap: 5px; }
    div.build .gid16 .trav47CombatReportHeading { min-height: 31px; padding: 2px 6px; font-size: 13px; }
    div.build .gid16 .trav47CombatReportHeading img { width: 30px; height: 30px; }
    div.build .gid16 .trav47CombatReportTable td { height: 20px; font-size: 9px; }
    div.build .gid16 .trav47CombatReportIcons td { height: 24px; }
    div.build .gid16 .trav47CombatReportIcons img.unit { transform: scale(0.86); transform-origin: center; }
    div.build .gid16 .trav47RallyBattleStatistics th,
    div.build .gid16 .trav47RallyBattleStatistics td { padding: 3px 4px; font-size: 10px; }
    div.build .gid16 .trav47RallySubmit { margin-bottom: 7px; }
    div.build .gid16 .trav47RallySubmit button.green { min-width: 160px; height: 33px; }
    div.build .gid16 .trav47RallyResult { grid-template-columns: 1fr; padding: 6px; }
}

/* Gold Club activation button on the rally point settings page. */
body.build #content .build_desc > button.gold.builder.textButtonV3 {
    display: block;
    min-width: 92px;
    min-height: 27px;
    margin: 10px auto 0;
    padding: 4px 14px;
    border: 1px solid #82631d;
    border-radius: 5px;
    box-sizing: border-box;
    color: #333;
    font-weight: bold;
    line-height: 17px;
    text-align: center;
    text-shadow: none;
    background-color: #e6ce64;
    background-image: linear-gradient(to bottom, #fdf5cb, #f8eeb0 40%, #f0dc7c 45%, #e6ce64 85%, #caac50);
    box-shadow: inset 0 0 1px 1px rgba(82, 67, 32, 0.5), inset 0 2px 2px 1px #faf8ec, inset 0 -2px 2px 0 #a08939;
    cursor: pointer;
}

body.build #content .build_desc > button.gold.builder.textButtonV3:hover,
body.build #content .build_desc > button.gold.builder.textButtonV3:focus {
    border-color: #665722;
    background-color: #f8eeb0;
    background-image: none;
    box-shadow: inset 0 20px 10px -10px rgba(255, 255, 255, 0.7);
}

body.build #content .build_desc > button.gold.builder.textButtonV3:active {
    background-image: linear-gradient(to top, #f0dc7c, #caac50);
    box-shadow: inset 0 2px 2px 1px #77652c, inset 0 -2px 2px 0 #faf8ec;
}

/* Keep the locked Gold Club message distinct from the evasion settings panel. */
body.build #content .goldClubCard {
    margin: 14px 0 20px;
    padding: 16px 20px 18px;
    border: 1px solid #8da9b7;
    border-radius: 8px;
    background: linear-gradient(to bottom, #f2f7f9, #dce9ee);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(45, 74, 87, 0.18);
    color: #274452;
}

body.build #content .goldClubCard h3 {
    margin: 0 0 8px;
    color: #1f4f63;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
}

body.build #content .goldClubCard .build_desc {
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: center;
}

body.build #content .goldClubCard .build_desc p {
    margin: 0;
    color: inherit;
    line-height: 20px;
}

/* Rally point evasion settings are a standalone card, not a farm-list panel. */
body.build #content #build.gid16 #raidList.evasionSettingsPanel {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 16px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    direction: rtl;
}

body.build #content #build.gid16 .trav47EvasionCard {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    border: 1px solid #8fa77c;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(48, 70, 31, 0.16);
}

body.build #content #build.gid16 .trav47EvasionHeader {
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    min-height: 48px;
    padding: 6px 10px;
    border-bottom: 1px solid #a9bc97;
    background: linear-gradient(to bottom, #f7fbf2, #dfead5);
}

body.build #content #build.gid16 .trav47EvasionIcon {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 1px solid #9db387;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.76);
}

body.build #content #build.gid16 .trav47EvasionIcon img {
    display: block;
    width: 22px;
    height: 24px;
    margin: 0;
}

body.build #content #build.gid16 .trav47EvasionHeading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

body.build #content #build.gid16 .trav47EvasionHeading strong {
    color: #365221;
    font-size: 15px;
    line-height: 19px;
}

body.build #content #build.gid16 .trav47EvasionHeading small {
    color: #68765d;
    font-size: 11px;
    line-height: 16px;
}

body.build #content #build.gid16 #raidList .trav47EvasionForm.options {
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 10px;
    background: #fbfcfa;
}

body.build #content #build.gid16 .trav47EvasionToggle {
    position: relative !important;
    top: auto !important;
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid #c5d1bb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

body.build #content #build.gid16 .trav47EvasionToggle > input.check {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.build #content #build.gid16 .trav47EvasionTrack {
    position: relative;
    display: inline-block;
    flex: 0 0 42px;
    box-sizing: border-box;
    width: 42px;
    height: 23px;
    border: 1px solid #a8afa2;
    border-radius: 13px;
    background: #c7ccc3;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
    transition: background 0.18s ease, border-color 0.18s ease;
}

body.build #content #build.gid16 .trav47EvasionTrack i {
    position: absolute;
    top: 2px;
    right: 2px;
    display: block;
    box-sizing: border-box;
    width: 17px;
    height: 17px;
    border: 1px solid #979f90;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: right 0.18s ease;
}

body.build #content #build.gid16 .trav47EvasionToggle > input.check:checked + .trav47EvasionTrack {
    border-color: #56842d;
    background: #72a83f;
}

body.build #content #build.gid16 .trav47EvasionToggle > input.check:checked + .trav47EvasionTrack i {
    right: 21px;
    border-color: #4e7a2b;
}

body.build #content #build.gid16 .trav47EvasionToggle > input.check:focus + .trav47EvasionTrack {
    box-shadow: 0 0 0 2px rgba(92, 137, 50, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

body.build #content #build.gid16 .trav47EvasionCopy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
}

body.build #content #build.gid16 .trav47EvasionCopy strong {
    color: #394b2e;
    font-size: 13px;
    line-height: 18px;
}

body.build #content #build.gid16 .trav47EvasionCopy small {
    color: #707a69;
    font-size: 10px;
    line-height: 15px;
}

body.build #content #build.gid16 .trav47EvasionStatus {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 23px;
    padding: 2px 7px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
}

body.build #content #build.gid16 .trav47EvasionStatus.isEnabled {
    border-color: #80a75d;
    background: #e7f4dc;
    color: #3d741b;
}

body.build #content #build.gid16 .trav47EvasionStatus.isDisabled {
    border-color: #b8b5ad;
    background: #f0efec;
    color: #736e64;
}

body.build #content #build.gid16 .trav47EvasionForm.isSaving {
    opacity: 0.65;
    pointer-events: none;
}

body.build #content #build.gid16 .trav47EvasionLocked.goldClubCard {
    margin: 0;
    padding: 12px 14px 14px;
    border: 0;
    border-radius: 0;
    background: #fbfcfa;
    box-shadow: none;
}

body.build #contentOuterContainer.trav47RallyTabLoading #content > #build.gid16 {
    position: relative;
    opacity: 1;
    filter: none;
    transform: none;
    pointer-events: none;
    transition: none;
}

body.build #contentOuterContainer.trav47RallyTabLoading .contentTitle,
body.build #contentOuterContainer.trav47RallyTabLoading #content > h1.titleInHeader {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
}

body.build #contentOuterContainer.trav47RallyTabLoading #content > #build.gid16::after {
    content: '';
    position: absolute;
    z-index: 30;
    top: 48%;
    right: 50%;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin: -12px -12px 0 0;
    border: 3px solid rgba(96, 130, 61, 0.24);
    border-top-color: #609039;
    border-radius: 50%;
    animation: trav47RallyTabSpin 0.65s linear infinite;
}

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


body.hero_auction .contentNavi.tabNavi {
    margin-bottom: 5px;
}

body.hero_auction .auctionSellSummary {
    box-sizing: border-box;
    margin: 0;
    padding: 7px 5px;
    color: #555;
    line-height: 16px;
}

body.hero_auction div#auction div#filter {
    margin-top: 1px;
    margin-bottom: 5px;
}

body.hero_auction div#filter .wrapper {
    padding: 3px 5px;
    box-sizing: border-box;
}

body.hero_auction div#filter .filterContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 3px;
    width: 100%;
    overflow: hidden;
    direction: rtl;
}

body.hero_auction div#filter .filterContainer button.iconFilter {
    flex: 0 0 21px;
    width: 21px;
    min-width: 21px;
    height: 21px;
    padding: 2px;
    box-sizing: border-box;
}

body.hero_auction div#auction table.sellings {
    margin-bottom: 6px;
}

.trav47LootMobile {
    display: none;
}

body.rtl div#build img.unitSection.u5Section {
    background-image: url('../../../images/army/romans/u5.png?v=7ff5352e09');
}

body.rtl div#build img.unitSection.u7Section {
    background-image: url('../../../images/army/romans/u7.png?v=1dfda22a78');
}

body.rtl div#build img.unitSection.u9Section {
    background-image: url('../../../images/army/romans/u9.png?v=cc19e13f05');
}

body.rtl div#build img.unitSection.u13Section {
    background-image: url('../../../images/army/teutons/u13.png?v=a2b283e37a');
}

body.rtl div#build img.unitSection.u17Section {
    background-image: url('../../../images/army/teutons/u17.png?v=9505628e44');
}

body.rtl div#build img.unitSection.u18Section {
    background-image: url('../../../images/army/teutons/u18.png?v=b435029b08');
}

body.rtl div#build img.unitSection.u21Section {
    /* Modern RTL artwork imported from gpack/img/u/big. */
    background-image: url('../../../images/army/greeks/u21.png?v=0a027e7e18');
    transform: none !important;
}

body.rtl div#build img.unitSection.u22Section {
    background-image: url('../../../images/army/greeks/u22.png?v=4327d21fd8');
    transform: none !important;
}

body.rtl div#build img.unitSection.u23Section {
    background-image: url('../../../images/army/greeks/u23.png?v=86961eb9b1');
    transform: none !important;
}

body.rtl div#build img.unitSection.u24Section {
    background-image: url('../../../images/army/greeks/u24.png?v=1f1c637992');
    transform: none !important;
}

body.rtl div#build img.unitSection.u25Section {
    background-image: url('../../../images/army/greeks/u25.png?v=03f2fbe23e');
    transform: none !important;
}

body.rtl div#build img.unitSection.u26Section {
    background-image: url('../../../images/army/greeks/u26.png?v=e5439cd987');
    transform: none !important;
}

body.rtl div#build img.unitSection.u27Section {
    background-image: url('../../../images/army/greeks/u27.png?v=2d1ee51038');
}

body.rtl div#build img.unitSection.u28Section {
    background-image: url('../../../images/army/greeks/u28.png?v=b6db30d54e');
}

body.rtl div#build img.unitSection.u29Section {
    background-image: url('../../../images/army/greeks/u29.png?v=0420c9df13');
}

body.rtl div#build img.unitSection.u30Section {
    background-image: url('../../../images/army/greeks/u30.png?v=ed31adc5cc');
}

body.rtl div#build img.unitSection {
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    transform: none !important;
}

body.rtl div#build img.unitSection.u99Section {
    background-image: url('../../../images/u99.png?v=3f9aad2595');
}

body.rtl img.unitBig[class$="Big"] {
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

body.rtl div#build img.unitSection.u51Section {
    background-image: url('../../../images/army/egyptians/u51.png?v=73059a515f');
}

body.rtl div#build img.unitSection.u53Section {
    background-image: url('../../../images/army/egyptians/u53.png?v=59f249764b');
}

body.rtl div#build img.unitSection.u54Section {
    background-image: url('../../../images/army/egyptians/u54.png?v=daf2aa51da');
}

body.rtl div#build img.unitSection.u56Section {
    background-image: url('../../../images/army/egyptians/u56.png?v=7a038b017b');
}

body.rtl div#build img.unitSection.u57Section {
    background-image: url('../../../images/army/egyptians/u57.png?v=db82f17dd0');
}

body.rtl div#build img.unitSection.u58Section {
    background-image: url('../../../images/army/egyptians/u58.png?v=cb2d5ecd0f');
}

body.rtl div#build img.unitSection.u61Section {
    background-image: url('../../../images/army/mongols/u61.png?v=428f53b7a9');
}

body.rtl div#build img.unitSection.u63Section {
    background-image: url('../../../images/army/mongols/u63.png?v=d7a5fbe910');
}

body.rtl div#build img.unitSection.u65Section {
    background-image: url('../../../images/army/mongols/u65.png?v=011263d9e0');
}

#topBar > #servertime {
    top: 0;
    z-index: 100;
    height: 18px;
    line-height: 18px;
}

.contentNavi .content .tabItem {
    max-width: 100%;
}

#content.village3 table#troops tbody.noPadding td {
    padding-left: 0;
    padding-right: 0;
}

#content.village3 table.vil_troops tbody.noPadding td {
    padding-left: 0;
    padding-right: 0;
}

/* Legacy market controls are retained for the phone layouts only. */
@media screen and (max-width: 1024px) {
body.rtl div#build.gid17 .marketSendDestination {
    width: 320px;
    max-width: 100%;
}

body.rtl div#build.gid17 .marketSendDestination .boxes-contents {
    white-space: normal;
}

body.rtl div#build.gid17,
body.rtl div#build.gid17 input,
body.rtl div#build.gid17 select,
body.rtl div#build.gid17 button,
body.rtl div#build.gid17 table,
body.rtl div#build.gid17 label {
    font-family: inherit;
}

body.rtl div#build.gid17 table.send_res td.val {
    text-align: left;
    padding-left: 1px;
}

body.rtl div#build.gid17 table.send_res td.max {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
    padding-right: 1px;
    letter-spacing: 0;
}

body.rtl div#build.gid17 table.send_res td.max a {
    display: inline-block;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

body.rtl div#build.gid17 .marketSendToRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    direction: rtl;
    margin: 0 0 8px;
}

body.rtl div#build.gid17 .marketSubmitRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    direction: rtl;
    width: 100%;
    margin: 9px auto 0;
    text-align: center;
}

body.rtl div#build.gid17 .marketSubmitRow .marketRepeatControl {
    order: 1;
}

body.rtl div#build.gid17 .marketSubmitRow button#btn_ok,
body.rtl div#build.gid17 .marketSubmitRow button#enabledButton {
    order: 2;
    float: none;
    margin: 0;
}

body.rtl div#build.gid17 .marketVillageTargetControl {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: normal;
    white-space: nowrap;
}

body.rtl div#build.gid17 .marketVillageTargetControl span,
body.rtl div#build.gid17 .marketRepeatControl {
    color: #23652a;
}

body.rtl div#build.gid17 select.myVillageTargetSelect,
body.rtl div#build.gid17 .marketRepeatControl select {
    height: 28px;
    border: 1px solid #bfa98a;
    border-radius: 6px;
    background: linear-gradient(#fffdf8, #eee2cf);
    color: #3b2818;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(70, 45, 20, 0.14);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

body.rtl div#build.gid17 select.myVillageTargetSelect {
    width: 178px;
    max-width: 100%;
    padding: 2px 8px 2px 24px;
}

body.rtl div#build.gid17 select.myVillageTargetSelect option {
    font-family: inherit;
    color: #3b2818;
    background: #fffaf0;
}

body.rtl div#build.gid17 .marketVillageTargetControl:after,
body.rtl div#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.rtl div#build.gid17 .marketVillageTargetControl:hover select.myVillageTargetSelect,
body.rtl div#build.gid17 .marketVillageTargetControl:focus-within select.myVillageTargetSelect,
body.rtl div#build.gid17 .marketRepeatControl:hover select,
body.rtl div#build.gid17 .marketRepeatControl:focus-within select {
    border-color: #8d743f;
    background: linear-gradient(#fffefb, #ead8b9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 4px rgba(70, 45, 20, 0.2);
}

body.rtl div#build.gid17 .marketDestinationLine {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    direction: rtl;
    line-height: 24px;
    justify-content: center;
    padding: 5px 7px;
    border: 1px solid rgba(128, 99, 61, 0.35);
    border-radius: 6px;
    background: rgba(255, 250, 239, 0.72);
}

body.rtl div#build.gid17 .marketDestinationLine span.or,
body.rtl div#build.gid17 .marketDestinationLine div.coordinatesInput {
    float: none;
}

body.rtl div#build.gid17 .marketDestinationLine span.or {
    margin-left: 0;
    line-height: 24px;
}

body.rtl div#build.gid17 .marketDestinationLine div.coordinatesInput {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.rtl div#build.gid17 .marketDestinationLine div.coordinatesInput div.xCoord,
body.rtl div#build.gid17 .marketDestinationLine div.coordinatesInput div.yCoord {
    display: inline-flex;
    float: none;
    align-items: center;
    gap: 2px;
    margin: 0;
}

body.rtl div#build.gid17 .marketRepeatControl {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-weight: normal;
    line-height: 24px;
    white-space: nowrap;
}

body.rtl div#build.gid17 .marketRepeatControl select {
    margin: 0;
    padding-left: 18px;
    padding-right: 6px;
}
}

body.rtl div#build.gid17 table#target_validate th,
body.rtl div#build.gid17 table#target_validate td {
    text-align: center;
    vertical-align: middle;
}

body.rtl div#build.gid17 table#target_validate th {
    width: 45%;
}

body.rtl div#build.gid17 table#target_validate td.vil a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

body.rtl div#build.gid17 .marketResourceTotal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    direction: rtl;
    white-space: nowrap;
}

body.rtl div#build.gid17 .marketResourceTotalIcons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

body.rtl div#build.gid17 .marketResourceTotalIcons i {
    vertical-align: middle;
}

body.rtl div#build.gid17 .marketResourceTotalValue {
    font-weight: bold;
    font-size: calc(1em + 0.5px);
    color: #2c1f13;
}

body.rtl div#build.gid17 button#btn_ok,
body.rtl div#build.gid17 button#enabledButton {
    min-width: 86px;
    text-align: center;
}

@font-face {
    font-family: 'IRYekan';
    src: url(../fonts/iranyekanweblight.eot?#) format("eot"), url(../fonts/iranyekanweblight.woff2) format("woff2"), url(../fonts/iranyekanweblight.woff) format("woff");
    font-weight: 300;
}

@font-face {
    font-family: 'IRYekan';
    src: url(../fonts/iranyekanwebregular.eot?#) format("eot"), url(../fonts/iranyekanwebregular.woff2) format("woff2"), url(../fonts/iranyekanwebregular.woff) format("woff");
    font-weight: 600;
}

@font-face {
    font-family: 'IRYekan';
    src: url(../fonts/iranyekanwebbold.eot?#) format("eot"), url(../fonts/iranyekanwebbold.woff2) format("woff2"), url(../fonts/iranyekanwebbold.woff) format("woff");
    font-weight: 900;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/robotolight.eot?#) format("eot"), url(../fonts/robotolight.woff2) format("woff2"), url(../fonts/robotolight.woff) format("woff");
    font-weight: 300;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/robotoregular.eot?#) format("eot"), url(../fonts/robotoregular.woff2) format("woff2"), url(../fonts/robotoregular.woff) format("woff");
    font-weight: 600;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/robotobold.eot?#) format("eot"), url(../fonts/robotobold.woff2) format("woff2"), url(../fonts/robotobold.woff) format("woff");
    font-weight: 900;
}

body.fa-IR {
    font-family: Roboto, IRYekan, IRANSans, Arial, Helvetica, Verdana, sans-serif;
}

body.fa-IR div.messages #bbEditor .messageEditor {
    font-family: IRYekan, IRANSans, Roboto, Arial, Helvetica, Verdana, sans-serif;
}

button, select, input {
    font-family: Roboto, IRYekan, IRANSans, Arial, Helvetica, Verdana, sans-serif;
}

body.login.rtl div.outerLoginBox table.loginTable {
    height: auto;
    top: 0;
    margin-top: 4px;
    border-collapse: collapse;
}

body.login.rtl div.outerLoginBox table.loginTable td.accountNameOrEmailAddress {
    width: 94px;
    white-space: nowrap;
}

body.login.rtl div.outerLoginBox table.loginTable tr.account td,
body.login.rtl div.outerLoginBox table.loginTable tr.pass td {
    padding-bottom: 8px;
}

body.login.rtl div.outerLoginBox table.loginTable tr.loginSubmitRow td {
    padding-top: 8px;
    text-align: center;
}

.arabicFieldError {
    display: none;
    clear: both;
    margin-top: 4px;
    max-width: 230px;
    color: #a33516;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.45;
    text-align: right;
    direction: rtl;
}

.arabicFieldError.isVisible {
    display: block;
}

input.text.arEmailInvalid {
    border-color: #b03918 !important;
    background-color: #fff7f1 !important;
}

.subNavi .normal .content .tabItem {
    padding: 8px 3px 0;
}

body.fa-IR div.sidebar div#sidebarBoxAllianceNoNews div.header div.boxTitle {
    height: 21px;
}

.rtl h1 {
    font-size: 18px;
}

#content.a2b form > button#btn_ok,
#build.gid16 form > button#btn_ok,
#build.gid16 .troopstipo form > button#btn_ok,
#build.gid16 .troopstipo p.btn button#btn_ok {
    float: none !important;
    display: block;
    margin: 10px auto 0 !important;
}

#build.gid16 .troopstipo p.btn,
#content.a2b p.btn,
div.a2b p.btn {
    text-align: center;
}

#build.gid16 .troopstipo .settle .settleResources {
    text-align: center;
}

#build.gid16 .troopstipo .settle .settleResources .resources {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 8px;
    white-space: nowrap;
    vertical-align: middle;
}

#content.a2b {
    box-sizing: border-box;
    width: 100% !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

#content.a2b table.troop_details tbody.cata td.targetOptions {
    text-align: center;
}

#content.a2b table.troop_details tbody.cata td.targetOptions select.dropdown {
    margin: 1px 4px;
}

#build.gid16 .troopstipo .settle .settleResources .resources i {
    flex: 0 0 auto;
}

.travian-map-action-dock .travian-map-action-buttons {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.travian-map-action-dock .travian-map-action-footer .travian-map-action-buttons {
    justify-content: center;
    width: 100%;
}

.rtl h2 {
    font-size: 15px;
}

.rtl h4 {
    font-size: 14px;
}

.rtl h5 {
    font-size: 13px;
}

.rtl table td,
.rtl table th {
    font-size: 13px;
}

.rtl div.fatal_error p.errorText {
    font-size: 16px;
}

.rtl .paymentPopupDialogWrapper .featureBooking h3 {
    font-size: 12px;
}

.rtl div#paymentWizard h4 {
    font-size: 13px;
}

.rtl .paymentPopupDialogWrapper .featureBooking h3 {
    font-size: 13px;
}

.rtl div#paymentWizard .header .tabButton .text {
    font-size: 13px;
}

.rtl div#paymentWizard .accountBalance {
    font-size: 13px;
}

.rtl .paymentPopupDialogWrapper .feature {
    font-size: 12px;
}

.rtl div#paymentWizard.plusSupport,
.rtl div#paymentWizard.earnGold {
    font-size: 13px;
}

.rtl div#paymentWizard .buyGoldInfoStep .buyGoldInfoStepContent {
    font-size: 13px;
}

.rtl div.player table#villages td.name span.mainVillage {
    font-size: 12px;
}

.rtl div#build .statusMessage,
.rtl div#build .errorMessage {
    font-size: 12px;
}

.rtl #sidebarBoxDailyquests .travianBirthdayRibbon div.headline {
    font-size: 15px;
}

body.rtl #reportWrapper>.header .headline.withQuickNavigation .subject {
    direction: rtl;
}

body.rtl #sidebarBoxActiveVillage .sidebarBoxInnerBox .header #villageNameField {
    direction: rtl;
}

.sidebar #sidebarBoxActiveVillage .content .playerName {
    direction: ltr;
    text-align: left;
}

/* Keep the desktop tribe badge and player name on one visual baseline. */
@media screen and (min-width: 1025px) {
    .sidebar #sidebarBoxActiveVillage .content .playerName {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 22px;
    }

    .sidebar #sidebarBoxActiveVillage .content .playerName .tribeBadgeIcon {
        display: block;
        flex: 0 0 auto;
        width: auto;
        height: 22px;
        max-width: 20px;
        padding: 0;
        object-fit: contain;
    }

    .sidebar #sidebarBoxActiveVillage .content .playerName .playerNameText {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 18px;
    }
}

.sidebar #sidebarBoxActiveVillage .content .villageNameRow {
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin: 0 0 4px auto;
    max-width: 100%;
}

.sidebar #sidebarBoxActiveVillage .content .villageNameRow #villageNameField {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 34px);
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    direction: rtl;
    unicode-bidi: plaintext;
}

.sidebar #sidebarBoxActiveVillage .content .villageNameRow #villageNameField:after {
    display: none;
}

.sidebar #sidebarBoxActiveVillage .content .villageNameRow .layoutButton {
    order: 1;
    flex: 0 0 auto;
    float: none;
    width: 24px;
    height: 24px;
    margin: 0;
}

.sidebar #sidebarBoxActiveVillage .content .villageNameRow .layoutButton svg.edit {
    width: 12px;
    height: 15px;
}

.villageNameDialogWrapper .dialog .dialog-contents .title {
    padding: 2px 24px 7px;
    color: #3f522f;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.villageNameDialogWrapper .dialog .dialog-contents .content {
    min-width: 300px;
}

.villageNameDialog {
    box-sizing: border-box;
    width: calc(100% - 20px);
    max-width: 310px;
    margin: 4px auto 0;
    padding: 15px 16px 13px;
    border: 1px solid rgba(154, 124, 72, .42);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(255, 253, 247, .98), rgba(244, 235, 214, .96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 5px 16px rgba(83, 61, 28, .12);
    direction: rtl;
    text-align: right;
}

.villageNameDialog label {
    display: block;
    margin: 0 2px 8px;
    color: #4c442f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: right;
}

.villageNameInputShell {
    position: relative;
    width: 100%;
}

.villageNameDialog #villageNameInput {
    appearance: none;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    height: 43px;
    margin: 0;
    padding: 8px 13px 8px 56px;
    border: 1px solid #b9a477;
    border-radius: 8px;
    outline: 0;
    background: rgba(255,255,255,.94);
    box-shadow: inset 0 1px 3px rgba(74, 56, 29, .11), 0 1px 0 rgba(255,255,255,.8);
    color: #332f25;
    font: 700 14px/1.4 Tahoma, Arial, sans-serif;
    text-align: right;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.villageNameDialog #villageNameInput::placeholder {
    color: #9a8f78;
    font-weight: 400;
}

.villageNameDialog #villageNameInput:focus {
    border-color: #6f963f;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(74, 56, 29, .08), 0 0 0 3px rgba(111, 150, 63, .18);
}

.villageNameCounter {
    position: absolute;
    top: 50%;
    left: 10px;
    min-width: 34px;
    padding: 3px 5px;
    border-radius: 5px;
    background: #edf3e6;
    color: #668047;
    font: 700 10px/1.2 Tahoma, Arial, sans-serif;
    text-align: center;
    transform: translateY(-50%);
    pointer-events: none;
}

.villageNameHint {
    display: block;
    margin: 7px 2px 0;
    color: #81745c;
    font-size: 10px;
    line-height: 1.5;
    text-align: right;
}

.sidebar #sidebarBoxVillagelist .header .layoutButton svg.villageOrder {
    margin-top: 2px;
    width: 19px;
    height: 19px;
    pointer-events: none;
    transition: filter 140ms ease;
}

.sidebar #sidebarBoxVillagelist .header .layoutButton.villageOrder.active:before {
    background-image: linear-gradient(to bottom, rgba(120, 76, 26, 0.98), rgba(79, 48, 14, 0.98));
    box-shadow: 0 0 0 2px rgba(255, 238, 159, 0.85), 0 2px 6px rgba(66, 38, 10, 0.55);
}

.sidebar #sidebarBoxVillagelist .header .layoutButton.villageOrder.active:after {
    background-color: #d59a32;
    background-image: linear-gradient(to bottom, #ffe19a, #d39a32 52%, #8b5e18);
    box-shadow: inset 0 0 1px 1px rgba(93, 58, 13, 0.65), inset 0 2px 2px 1px #fff2bd, inset 0 -2px 2px 0 #6d4612;
}

.sidebar #sidebarBoxVillagelist .header .layoutButton.villageOrder.active svg {
    filter: drop-shadow(0 1px 1px rgba(75, 42, 8, 0.65));
}

.sidebar #sidebarBoxVillagelist .header .layoutButton.villageOrder:active svg,
.sidebar #sidebarBoxVillagelist .header .layoutButton.villageOrder.active svg {
    opacity: 1;
}

.sidebar #sidebarBoxVillagelist .header .layoutButton.villageOrder.active svg .icon {
    fill: #fff7d2;
}

.sidebar #sidebarBoxVillagelist .header .layoutButton.villageOrder.active svg .outline {
    fill: #5c3511;
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul {
    position: relative;
}

.sidebar #sidebarBoxVillagelist .trav47VillageOrderControls {
    display: none;
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li,
.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li a {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li {
    position: relative;
    margin: 1px 0;
    overflow: hidden;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    transition: background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 2;
    width: 12px;
    height: 18px;
    background-image: radial-gradient(circle, rgba(86, 61, 25, 0.88) 1.7px, transparent 1.9px);
    background-position: 0 0;
    background-size: 6px 6px;
    opacity: 0.9;
    pointer-events: none;
    transform: translateY(-50%);
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li a {
    box-sizing: border-box;
    padding-right: 22px;
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li:hover {
    box-shadow: inset 0 0 0 1px rgba(116, 74, 18, 0.55), 0 1px 4px rgba(71, 43, 14, 0.24);
    transform: translateX(-1px);
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li:active,
.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li.villageOrderTouching {
    cursor: grabbing;
    box-shadow: inset 0 0 0 1px rgba(103, 64, 12, 0.78), 0 3px 8px rgba(62, 37, 10, 0.32);
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li:active:before,
.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li.villageOrderTouching:before {
    opacity: 1;
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li.villageOrderDragging {
    z-index: 5;
    opacity: 0.72;
    transform: scale(0.985);
}

.sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li.active {
    box-shadow: inset 0 0 0 1px rgba(68, 104, 33, 0.62), 0 1px 5px rgba(47, 83, 24, 0.22);
}

.sidebar #sidebarBoxVillagelist.villageOrderSaved .content ul li {
    animation: villageOrderSavedFlash 700ms ease;
}

.sidebar #sidebarBoxVillagelist.villageOrderSaving .header .layoutButton.villageOrder svg {
    opacity: 0.55;
}

@media screen and (min-width: 1025px) {
    .sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li,
    .sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li a {
        cursor: default;
        touch-action: auto;
    }

    .sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li::before {
        content: none;
        display: none;
    }

    .sidebar #sidebarBoxVillagelist.villageOrderMode .content ul li > a {
        box-sizing: border-box;
        padding-right: 47px;
    }

    .sidebar #sidebarBoxVillagelist.villageOrderMode .villageActionsToggle {
        display: none;
    }

    .sidebar #sidebarBoxVillagelist .trav47VillageOrderControls {
        position: absolute;
        top: 50%;
        right: 2px;
        z-index: 5;
        display: none;
        align-items: center;
        gap: 2px;
        width: 42px;
        height: 21px;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
    }

    .sidebar #sidebarBoxVillagelist.villageOrderMode .trav47VillageOrderControls {
        display: flex;
    }

    .sidebar #sidebarBoxVillagelist .trav47VillageOrderMoveButton {
        display: grid;
        flex: 0 0 20px;
        place-items: center;
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        margin: 0;
        padding: 0 0 1px;
        border: 1px solid #587834;
        border-radius: 4px;
        color: #fff;
        background: linear-gradient(#8db84f, #5c8b2d);
        box-shadow: inset 0 1px rgba(255, 255, 255, .42), 0 1px 1px rgba(47, 61, 29, .18);
        font: 700 9px/1 Arial, sans-serif;
        text-align: center;
        box-sizing: border-box;
    }

    .sidebar #sidebarBoxVillagelist .trav47VillageOrderMoveButton:hover:not(:disabled) {
        background: linear-gradient(#9bc75b, #679a35);
    }

    .sidebar #sidebarBoxVillagelist .trav47VillageOrderMoveButton:disabled {
        border-color: #b3ad9c;
        color: #eee9dc;
        background: #c8c0aa;
        box-shadow: none;
        opacity: .72;
    }
}

@keyframes villageOrderSavedFlash {
    0% {
        box-shadow: inset 0 0 0 1px rgba(71, 128, 43, 0.25);
    }
    45% {
        box-shadow: inset 0 0 0 2px rgba(92, 155, 53, 0.95), 0 0 8px rgba(92, 155, 53, 0.45);
    }
    100% {
        box-shadow: none;
    }
}

.villageNameDialogWrapper .dialog .dialog-contents .buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    text-align: center;
}

.villageNameDialogWrapper .dialog .dialog-contents .buttons button.ok {
    float: none;
    margin: 0 auto;
}

button.textButtonV1 > .button-container {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: inherit;
}

button.textButtonV1 .button-background {
    display: none !important;
}

button.textButtonV1 .button-content {
    height: auto;
    line-height: inherit;
    padding: 0;
    position: relative;
    z-index: 1;
    color: inherit;
    background: transparent !important;
    box-shadow: none !important;
}

body.rtl div#build table#build_value.productionValues {
    width: auto;
    min-width: 230px;
    margin-right: 0;
    margin-left: auto;
}

body.rtl div#build table#build_value.productionValues th {
    padding-left: 8px;
    text-align: right;
    white-space: nowrap;
}

body.rtl div#build table#build_value.productionValues td {
    text-align: right;
    white-space: nowrap;
}

body.rtl div#build table#build_value.capacityValues {
    width: auto;
    margin-right: auto;
    margin-left: auto;
}

body.rtl div#build table#build_value.capacityValues th {
    padding-left: 8px;
    text-align: right;
    white-space: nowrap;
}

body.rtl div#build table#build_value.capacityValues td {
    text-align: right;
    white-space: nowrap;
}

body.rtl div#build table#build_value.culture-points-production {
    direction: rtl;
    width: auto;
    margin: 10px 0 18px auto;
    border-collapse: collapse;
}

body.rtl div#build table#build_value.culture-points-production th,
body.rtl div#build table#build_value.culture-points-production td {
    padding: 0;
    line-height: 22px;
    white-space: nowrap;
}

body.rtl div#build table#build_value.culture-points-production th {
    padding-left: 12px;
    text-align: right;
    font-weight: normal;
}

body.rtl div#build table#build_value.culture-points-production td {
    text-align: right;
}

div#build button.startTraining.green {
    display: block;
    float: none;
    height: 25px;
    min-height: 25px;
    margin: 10px auto 0;
    padding: 4px 20px;
    border: 1px solid #283308;
    border-radius: 5px;
    background-color: #7cb029;
    background-image: linear-gradient(to bottom, #7cb029, #587c1e);
    box-shadow: inset 2px 0 1px -1px #4b6f19, inset -2px 0 1px -1px #4b6f19, inset 0 3px 1px -1px #b5e251, inset 0 -3px 1px -1px rgba(44, 75, 12, 0.6);
    color: #f2f2f2;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

div#build button.startTraining.green:hover,
div#build button.startTraining.green:focus {
    border-color: #506030;
    background-color: #7cb029;
    background-image: none;
    box-shadow: inset 0 20px 25px -10px rgba(255, 255, 255, 0.7);
    color: #283308;
    text-shadow: none;
}

div#build button.startTraining.green:active {
    background-image: linear-gradient(to top, #7cb029, #587c1e);
    box-shadow: inset 2px 0 1px -1px #4b6f19, inset -2px 0 1px -1px #4b6f19;
    color: #506030;
    text-shadow: none;
}

div#build button.startTraining.green > .button-container {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: inherit;
}

div#build button.startTraining.green .button-background {
    display: none !important;
}

div#build button.startTraining.green .button-content {
    height: auto;
    line-height: inherit;
    padding: 0;
    position: relative;
    z-index: 1;
    color: inherit;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
}

div#build button.finishTrainingGold {
    display: block;
    float: none;
    margin: 10px auto 0;
    text-align: center;
}

div#build button.finishTrainingGold .button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    direction: rtl;
    text-align: center;
}

div#build button.finishTrainingGold .goldIcon {
    flex: 0 0 14px;
}

div#build button.finishTrainingGold .goldValue {
    direction: ltr;
}

form.trav47TrainingForm.is-loading button[type="submit"] {
    cursor: wait !important;
    opacity: .72;
}

/* Rally Point movement cancellation: reuse the clean infobox close-button
   appearance and keep it vertically centred with both arrival texts. */
body.build #content #build.gid16 table.troop_details tbody.infos .trav47-movement-cancel {
    position: static !important;
    display: inline-flex !important;
    float: left !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 5px !important;
    padding: 0 !important;
    overflow: visible !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

body.build #content #build.gid16 table.troop_details tbody.infos td > .in,
body.build #content #build.gid16 table.troop_details tbody.infos td > .at {
    min-height: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 24px !important;
}

body.build #content #build.gid16 table.troop_details tbody.infos button.trav47MovementCancelButton {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    float: none !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #c8b9ac !important;
    border-radius: 5px !important;
    background: linear-gradient(#fff, #eee9e3) !important;
    box-shadow: inset 0 1px #fff !important;
    text-align: center !important;
    text-shadow: none !important;
    cursor: pointer !important;
    appearance: none !important;
    box-sizing: border-box !important;
}

body.build #content #build.gid16 table.troop_details tbody.infos button.trav47MovementCancelButton > img.del {
    position: static !important;
    display: block !important;
    float: none !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url('../../../images/icons/delete.gif') !important;
    background-position: right top !important;
}

body.build #content #build.gid16 table.troop_details tbody.infos button.trav47MovementCancelButton:hover,
body.build #content #build.gid16 table.troop_details tbody.infos button.trav47MovementCancelButton:focus-visible {
    border-color: #a84a3f !important;
    background: linear-gradient(#fff8f7, #eadbd8) !important;
    outline: none !important;
}

body.build #content #build.gid16 table.troop_details tbody.infos button.trav47MovementCancelButton:active {
    box-shadow: inset 0 1px 3px rgba(82, 24, 18, .28) !important;
    transform: none !important;
}

@media screen and (min-width: 1025px) {
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid29, .gid30, .gid36, .gid44) table.under_progress tbody td {
        font-size: calc(1em + 1px) !important;
    }

    body.build #content #build .trav47FinishTrainingRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin: 9px 0 2px;
        padding: 3px 5px;
        box-sizing: border-box;
        background: #e0ebdf;
        border-radius: 4px;
        direction: rtl;
    }

    body.build #content #build .trav47FinishTrainingRow > h4.round {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        width: auto !important;
        min-width: 0;
        height: 31px !important;
        margin: 0 !important;
        padding: 4px 12px !important;
        right: 0 !important;
        line-height: 23px !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-sizing: border-box;
    }

    body.build #content #build .trav47FinishTrainingRow > button.finishTrainingGold {
        flex: 0 0 auto;
        float: none !important;
        margin: 0 !important;
    }

    body.build #content #build .trav47FinishTrainingRow > button.finishTrainingGold .button-content {
        padding-right: 9px !important;
        padding-left: 9px !important;
        box-sizing: border-box;
    }
}

div#build .upgradeButtonsContainer button.textButtonV1 {
    text-align: center;
}

div#build .upgradeButtonsContainer button.textButtonV1 .button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
}

body.rtl div#build .upgradeButtonsContainer button.textButtonV1 .button-content {
    direction: rtl;
}

@media screen and (max-width: 620px) {
    .mobileOptimized div.village1 div.buildingList,
    .mobileOptimized div.village2 div.buildingList {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        float: none;
        clear: both;
        width: 405px;
        max-width: calc(100vw - 24px);
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 18px !important;
    }
}



body.rtl #sidebarBoxVillagelist .content ul li a .name {
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: right;
}

#reportWrapper .body .role.attacker .header,
#reportWrapper .body .role.defender .header,
#reportWrapper .body .role.reinforcement .header {
    grid-template-columns: 100px minmax(0, 1fr) 72px !important;
    -ms-grid-columns: 100px 1fr 72px !important;
}

#reportWrapper .body .role .header .outcome {
    position: relative;
    width: 74px;
    min-width: 74px;
    height: 36px;
    overflow: visible;
    margin-right: 0 !important;
}

#reportWrapper .body .role .header .outcome .arrowWrapper {
    display: none !important;
}

#reportWrapper .body .role .header .outcome > img.losses,
#reportWrapper .body .role .header .outcome > svg.losses {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    bottom: -3px !important;
    width: 42px !important;
    height: 52px !important;
    max-width: 42px !important;
    max-height: 52px !important;
    display: block;
}

#reportWrapper .body .role .troopHeadline {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

#reportWrapper .body .role .troopHeadline.withToolList {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
}

#reportWrapper .body .role .troopHeadline.withToolList div:first-of-type {
    padding-right: 0;
}

#reportWrapper .body .role .troopHeadline .toolList {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto;
    margin-right: 10px;
    line-height: 0;
    z-index: 2;
    justify-self: end;
    align-self: center;
}

#reportWrapper .body .role .troopHeadline .toolList .iconButton {
    margin-right: 0;
    vertical-align: middle;
}

#reportWrapper .body .role .troopHeadline .oasisLabel {
    color: #5f7f1f;
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}

.rtl #reportWrapper .body .role .header .outcome > img.losses,
.rtl #reportWrapper .body .role .header .outcome > svg.losses {
    left: 12px !important;
    right: auto !important;
}

.rtl #reportWrapper .body .role .troopHeadline.withToolList div:first-of-type {
    padding-left: 0;
    padding-right: 0;
}

.rtl #reportWrapper .body .role .troopHeadline .toolList {
    left: auto !important;
    right: auto !important;
    margin-left: 10px;
    margin-right: 0;
}

body.rtl div.player table#villages td.name {
    direction: rtl;
}

body.rtl div.sidebar div#sidebarBoxHero .header .playerName {
    direction: rtl;
}

body.rtl table.allianceMembers tbody td.player {
    direction: rtl;
}

body.rtl div.statistics table#player td.pla {
    direction: rtl;
}

@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] body.trav47StatisticsPage #content.statistics table#player td.tribe i.statisticsTribeIcon {
        position: static !important;
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 auto !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        vertical-align: middle !important;
    }

    html[data-trav47-layout="desktop"] body.trav47StatisticsPage #content.statistics table#player td.pla a {
        font-size: 14px !important;
    }
}

body.rtl div#build.gid16 table.troop_details thead td:last-of-type {
    direction: rtl;
}

body.rtl div#build.gid16 table.troop_details thead a {
    direction: rtl;
}

div#build.gid16 table.troop_details.rally-troops-home thead td {
    background-color: #f5f5f5 !important;
}

div#build.gid16 table.troop_details.rally-return thead td,
div#build.gid16 table.troop_details.rally-incoming-support thead td {
    background-color: #dff0cf !important;
}

div#build.gid16 table.troop_details.rally-return-adventure thead td {
    background-color: #dceffc !important;
}

div#build.gid16 table.troop_details.rally-outgoing-attack thead td {
    background-color: #fff3bd !important;
}

div#build.gid16 table.troop_details.rally-incoming-attack thead td {
    background-color: #ffd6d1 !important;
}

div#build.gid16 table.troop_details.rally-troops-foreign thead td {
    background-color: #d7efcf !important;
}

div#build.gid16 table.troop_details .rallyLoot {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 9px;
    width: 100%;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 11.5px;
    line-height: 16px;
    direction: rtl;
}

div#build.gid16 table.troop_details .rallyResourceItem {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

div#build.gid16 table.troop_details .rallyResourceItem i {
    flex: 0 0 auto;
    margin: 0 !important;
}

div#build.gid16 table.troop_details .rallyResourceValue {
    line-height: 1;
}

div#build.gid16 table.troop_details .rallyCarry {
    float: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 4px auto 0 !important;
    padding: 2px 7px;
    border: 1px solid #c6a85f;
    border-radius: 9px;
    color: #4d3717;
    background: #fff4cd;
    font-size: 11.5px;
    font-weight: bold;
    line-height: 14px;
    text-align: center !important;
    direction: ltr;
    unicode-bidi: isolate;
    box-sizing: border-box;
}

div#build.gid16 table.troop_details .rallyCarry img.carry {
    float: none !important;
    margin: 0 !important;
}


.rtl .sidebar .sidebarBox .sidebarBoxInnerBox .header {
    font-size: 14px;
}

#statisticsV2 .recharts-layer {
    direction: ltr;
}

div.village1 table#movements div.mov {
    font-size: 12px;
}

html[data-trav47-layout="desktop"] body.village1 div.village1 table#movements tr.reinforcementMovement div.mov,
html[data-trav47-layout="desktop"] body.village2 div.village2 table#movements tr.reinforcementMovement div.mov {
    font-size: 13px;
}

.rtl div.village1 table#movements div.dur_r {
    font-size: 11px;
    padding-right: 2px;
}

html[data-trav47-layout="desktop"] body.village1 div.village1 table#movements tr.reinforcementMovement div.dur_r,
html[data-trav47-layout="desktop"] body.village2 div.village2 table#movements tr.reinforcementMovement div.dur_r {
    font-size: 12px;
}

div.player .description1,
div.player .description2 {
    font-size: 12px;
}

/* The legacy nine-slice statistics search belongs to the wide desktop only.
   Phone layouts are owned by travian-statistics-mobile.css. */
@media screen and (min-width: 1025px) {
div.statistics div#search_navi form .boxes {
    max-width: 100%;
}

div.statistics div#search_navi form .boxes .boxes-contents.statisticsSearchBox {
    float: none;
    box-sizing: border-box;
    min-width: 360px;
    width: auto;
    padding: 6px 12px;
}

div.statistics div#search_navi .statisticsSearchFields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    direction: rtl;
    white-space: normal;
}

div.statistics div#search_navi .statisticsSearchField {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    line-height: 24px;
    white-space: nowrap;
}

div.statistics div#search_navi .statisticsSearchLabel {
    display: inline-block;
    color: #333;
    font-weight: bold;
}

div.statistics div#search_navi input.text.ra,
div.statistics div#search_navi input.text.name {
    box-sizing: border-box;
    height: 23px;
    margin: 0;
    padding: 2px 5px;
    border: 1px solid #b8b8b8;
    background: #fff;
    vertical-align: middle;
}

div.statistics div#search_navi input.text.ra {
    width: 46px;
    text-align: center;
}

div.statistics div#search_navi input.text.name {
    width: 112px;
}

div.statistics div#search_navi #btn_ok.statisticsSearchButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 1px solid #31490f !important;
    border-radius: 3px;
    color: #fff !important;
    background-color: #6f9d22 !important;
    background-image: linear-gradient(to bottom, #86bb31, #52791b) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(44, 75, 12, 0.35);
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
}

div.statistics div#search_navi #btn_ok.statisticsSearchButton:hover,
div.statistics div#search_navi #btn_ok.statisticsSearchButton:focus {
    border-color: #506030 !important;
    color: #283308 !important;
    background-color: #8ac233 !important;
    background-image: linear-gradient(to bottom, #a6d957, #72a928) !important;
    text-shadow: none;
}

div.statistics div#search_navi #btn_ok.statisticsSearchButton .button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

div.statistics div#search_navi #btn_ok.statisticsSearchButton .button-background {
    display: none !important;
}

div.statistics div#search_navi #btn_ok.statisticsSearchButton .button-content {
    position: static;
    display: block;
    height: auto;
    min-height: 0;
    padding: 0 12px;
    color: inherit !important;
    background: transparent !important;
    font-weight: bold;
    line-height: 22px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

div.statistics div#search_navi #btn_ok.statisticsSearchButton:hover .button-content,
div.statistics div#search_navi #btn_ok.statisticsSearchButton:focus .button-content {
    text-shadow: none;
}
}

div.bbEditor div.bbToolbarWindow div {
    max-width: 275px;
}

div#build.gid13 .information .errorMessage,
div#build.gid22 .information .errorMessage {
    display: block;
}

.rtl div#build .statusMessage,
.rtl div#build .errorMessage {
    display: block;
}

div#build .trav47InsetStatusMessage {
    padding-right: 10px !important;
    box-sizing: border-box;
}

/* Shared explanatory dialogue used by residence, palace and command centre. */
div#build .trav47BuildingDialogue {
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 10px !important;
    border: 1px solid #b8aa88 !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(241, 235, 219, .86)), #f5efe1 !important;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(66, 45, 26, .1) !important;
    line-height: 1.55 !important;
    box-sizing: border-box !important;
}

/* Keep the active main-building demolition status centered as one row. */
div#build.gid15 > .trav47DemolitionProgress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    text-align: center !important;
}

div#build.gid15 .trav47DemolitionProgress > .trav47DemolitionLabel {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

div#build.gid15 .trav47DemolitionProgress > .trav47CancelDemolition {
    display: inline-flex !important;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 27px;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    vertical-align: middle;
}

div#build.gid15 .trav47DemolitionProgress > .trav47CancelDemolition > img.del {
    position: static !important;
    inset: auto !important;
    display: block;
    margin: 0 !important;
}

/* The active-demolition gold action uses the same compact modern geometry as
   upgrade/master-builder actions while retaining its gold colour. */
div#build.gid15 .trav47DemolitionProgress > button.trav47FinishDemolitionGold {
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 auto;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    overflow: visible !important;
    border: 1px solid #704c0e !important;
    border-radius: 5px !important;
    background-color: #b87e1c !important;
    background-image: linear-gradient(180deg, #f7dc83 0%, #dfb547 50%, #b87e1c 100%) !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;
    color: #392706 !important;
    font: 700 12px/15px Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 248, 206, .72) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    appearance: none !important;
}

div#build.gid15 .trav47DemolitionProgress > button.trav47FinishDemolitionGold > .button-container {
    position: static !important;
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

div#build.gid15 .trav47DemolitionProgress > button.trav47FinishDemolitionGold .button-content {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 15px !important;
    direction: rtl !important;
    white-space: nowrap !important;
}

div#build.gid15 .trav47DemolitionProgress > button.trav47FinishDemolitionGold :is(.button-background, .buttonStart, .buttonEnd, .buttonMiddle) {
    display: none !important;
}

div#build.gid15 .trav47DemolitionProgress > button.trav47FinishDemolitionGold .goldValue {
    display: inline-flex !important;
    align-items: center !important;
    order: 1 !important;
    height: 15px !important;
    margin: 0 3px 0 0 !important;
    padding: 0 !important;
    line-height: 15px !important;
    direction: ltr !important;
}

div#build.gid15 .trav47DemolitionProgress > button.trav47FinishDemolitionGold .goldIcon {
    display: inline-block !important;
    order: 2 !important;
    box-sizing: border-box !important;
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    margin: 0 3px 0 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

div#build.gid15 .trav47DemolitionProgress > button.trav47FinishDemolitionGold:is(:hover, :focus-visible) {
    border-color: #68470e !important;
    background-image: linear-gradient(180deg, #fff0aa 0%, #f4d56a 48%, #ca9429 100%) !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;
}

/* Center the active demolition notice and its countdown on every building page. */
body.build #content #build .demolitionBuildStatus {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

body.build #content #build .demolitionBuildStatus > p {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
}

body.build #content #build .demolitionBuildTime {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    direction: ltr !important;
    text-align: center !important;
}

body.build #content #build .demolitionBuildTime > i.clock_medium {
    display: inline-block !important;
    flex: 0 0 22px !important;
    margin: 0 !important;
}

.rtl div#build .a2b .statusMessage,
.rtl div#build .a2b .errorMessage {
    display: inline-block;
}

.rtl.mobileOptimized div.village1 div#map_details .villageList.movements.movements,
.rtl.mobileOptimized div.village1 div#map_details .villageList.units.movements {
    transform-origin: top left;
}

.sidebar #sidebarBoxLinklist .content ul li a {
    overflow: visible;
    word-wrap: break-word;
}



.sidebarBoxNews {
    margin-top: 60px;
}

.dialog.paymentShopV1 div#paymentWizard .buyGoldInfoStep .buyGoldInfoStepContent, .dialog.paymentShopV3 div#paymentWizard .buyGoldInfoStep .buyGoldInfoStepContent {
    overflow: visible;
}

.dialog.paymentShopV3 .paymentPopupDialogWrapper .feature {
    min-height: 60px;
}

.flag_fa-IR,
.flag_ir {
  background-position: -1712px 0;
}

.dialogV2.dialogWrapper.white.questInformation .questWrapper,
.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog,
.questWrapper {
    box-sizing: border-box;
    width: 566px;
    min-height: 375px;
    padding: 14px 12px 16px;
    background-color: #eadcbd !important;
    background-image: linear-gradient(180deg, #f7edd8 0%, #eadcbd 100%) !important;
    border: 1px solid #7f5f3d;
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(32, 17, 5, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: #332112 !important;
}

.questWrapper.achievements {
    padding-top: 14px;
}

.dialogV2.dialogWrapper.white.questInformation .questWrapper .questText,
.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog,
.questWrapper .questText {
    width: 398px;
    margin-bottom: 0;
    color: #3b2614 !important;
}

.dialogV2.dialogWrapper.white.questInformation .questWrapper .questTitle,
.dialogV2.dialogWrapper.white.questInformation .questWrapper h4,
.dialogV2.dialogWrapper.white.questInformation .questWrapper h2,
.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog h4.round,
.questWrapper .questTitle,
.questWrapper h4,
.questWrapper h2,
div.dialog div.content h1.questList {
    color: #6a4020 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.dialogV2.dialogWrapper.white.questInformation .questWrapper .questDescription,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questTasks,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questRewards,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questTextHighlight,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questAchievementPoints,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questDifficulty,
.questWrapper .questDescription,
.questWrapper .questTasks,
.questWrapper .questRewards,
.questWrapper .questTextHighlight,
.questWrapper .questAchievementPoints,
.questWrapper .questDifficulty {
    margin: 12px 0 18px;
    padding: 12px 14px;
    background-color: #fbf4e6 !important;
    background-image: linear-gradient(180deg, #fff9ee 0%, #f3e6cb 100%) !important;
    border: 1px solid #d5bc91;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: #362415 !important;
}

.dialogV2.dialogWrapper.white.questInformation .questWrapper .questDescription #questDescription,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questRewards #rewardDescription,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questText,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questText div,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questText span,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questText li,
.dialogV2.dialogWrapper.white.questInformation .questWrapper .questText a,
.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog,
.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog li,
.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog a,
.questWrapper .questDescription #questDescription,
.questWrapper .questRewards #rewardDescription,
.questWrapper .questText,
.questWrapper .questText div,
.questWrapper .questText span,
.questWrapper .questText li,
.questWrapper .questText a,
#questTodoListDialog,
#questTodoListDialog li,
#questTodoListDialog a,
div.dialog div.content #achievementQuestList td {
    color: #362415 !important;
}

.questWrapper a,
#questTodoListDialog a {
    font-weight: 700;
    text-decoration: none;
}

.questWrapper a:hover,
#questTodoListDialog a:hover {
    color: #8b5429 !important;
}

.questWrapper .questTasks ul#questTodolist li {
    margin-bottom: 8px;
    padding-left: 18px;
}

.questWrapper .questTasks ul#questTodolist li.finished,
.questWrapper .questTasks ul#questTodolist li.reward {
    color: #5b523f !important;
}

.questWrapper .questRewards ul.questRewardsList {
    width: auto;
}

.questWrapper .questButtons {
    height: auto;
    min-height: 36px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(110, 79, 41, 0.25);
}

.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog h4.round,
#questTodoListDialog h4.round {
    margin: 0 0 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #8d6b43 0%, #694424 100%) !important;
    color: #fbf2df !important;
    border: 1px solid #4b2d16;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 0 rgba(51, 26, 8, 0.45);
}

.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog ul,
#questTodoListDialog ul {
    margin: 0 0 14px;
    padding: 10px 12px 4px;
    background-color: #fcf5e7 !important;
    background-image: none !important;
    border: 1px solid #d4bd97;
    border-radius: 10px;
}

.dialogV2.dialogWrapper.white.questTodoList #questTodoListDialog li.questName,
#questTodoListDialog li.questName {
    margin: 0 0 8px;
    padding: 9px 12px 9px 18px;
    background-color: #fff9ee !important;
    background-image: linear-gradient(180deg, #fff9ee 0%, #f0e1c3 100%) !important;
    border: 1px solid #d6bf98;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#questTodoListDialog li.questName a.arrow.quest {
    display: block;
}

div.dialog div.content #achievementQuestList {
    width: 100%;
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 8px;
}

div.dialog div.content #achievementQuestList tr {
    background: transparent;
}

div.dialog div.content #achievementQuestList tr:nth-child(even),
div.dialog div.content #achievementQuestList tr:nth-child(odd) {
    background: transparent;
}

div.dialog div.content #achievementQuestList td {
    background: linear-gradient(180deg, #fff9ec 0%, #eee2c5 100%) !important;
    border-top: 1px solid #d8c29b;
    border-bottom: 1px solid #d8c29b;
}

div.dialog div.content #achievementQuestList td:first-child {
    border-left: 1px solid #d8c29b;
    border-radius: 8px 0 0 8px;
}

div.dialog div.content #achievementQuestList td:last-child {
    border-right: 1px solid #d8c29b;
    border-radius: 0 8px 8px 0;
}

.dialogV2.dialogWrapper.white.questInformation .dialogContents .iconButton.cancel,
.dialogV2.dialogWrapper.white.questTodoList .dialogContents .iconButton.cancel,
.dialogV2.dialogWrapper .dialogContents .iconButton.cancel,
.dialogCancelButton.iconButton.small.cancel {
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #274110;
    border-radius: 6px;
    background: linear-gradient(180deg, #759a36 0%, #46661a 100%) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialogV2.dialogWrapper.white.questInformation .dialogContents .iconButton.cancel:after,
.dialogV2.dialogWrapper.white.questTodoList .dialogContents .iconButton.cancel:after,
.dialogV2.dialogWrapper .dialogContents .iconButton.cancel:after,
.dialogCancelButton.iconButton.small.cancel:after {
    display: none;
}

.dialogV2.dialogWrapper.white.questInformation .dialogContents .iconButton.cancel svg,
.dialogV2.dialogWrapper.white.questTodoList .dialogContents .iconButton.cancel svg,
.dialogV2.dialogWrapper .dialogContents .iconButton.cancel svg,
.dialogCancelButton.iconButton.small.cancel svg {
    width: 14px;
    height: 14px;
}

.dialogV2.dialogWrapper.white.questInformation .dialogContents .iconButton.cancel svg .outline,
.dialogV2.dialogWrapper.white.questTodoList .dialogContents .iconButton.cancel svg .outline,
.dialogV2.dialogWrapper .dialogContents .iconButton.cancel svg .outline,
.dialogCancelButton.iconButton.small.cancel svg .outline {
    display: none;
}

.dialogV2.dialogWrapper.white.questInformation .dialogContents .iconButton.cancel svg .icon,
.dialogV2.dialogWrapper.white.questInformation .dialogContents .iconButton.cancel svg path,
.dialogV2.dialogWrapper.white.questTodoList .dialogContents .iconButton.cancel svg .icon,
.dialogV2.dialogWrapper.white.questTodoList .dialogContents .iconButton.cancel svg path,
.dialogV2.dialogWrapper .dialogContents .iconButton.cancel svg .icon,
.dialogV2.dialogWrapper .dialogContents .iconButton.cancel svg path,
.dialogCancelButton.iconButton.small.cancel svg .icon,
.dialogCancelButton.iconButton.small.cancel svg path {
    fill: #f8f1db !important;
}

.dialogV2.dialogWrapper.white.questInformation .dialogContents .iconButton.cancel:hover,
.dialogV2.dialogWrapper.white.questTodoList .dialogContents .iconButton.cancel:hover,
.dialogV2.dialogWrapper .dialogContents .iconButton.cancel:hover,
.dialogCancelButton.iconButton.small.cancel:hover {
    background: linear-gradient(180deg, #88ad44 0%, #557921 100%) !important;
}

.dialogV2.dialogWrapper.white.questInformation .dialogContents .iconButton.cancel:active,
.dialogV2.dialogWrapper.white.questTodoList .dialogContents .iconButton.cancel:active,
.dialogV2.dialogWrapper .dialogContents .iconButton.cancel:active,
.dialogCancelButton.iconButton.small.cancel:active {
    background: linear-gradient(180deg, #5d7f27 0%, #365012 100%) !important;
}

div.reports #reportWrapper .adventureReport .adventureHeader .headline .from h2 {
    text-transform: none;
    margin-right: 58px;
}

div.reports #reportWrapper .adventureReport,
div.reports #reportWrapper .adventureReport .adventureHeader .headline,
div.reports #reportWrapper .adventureReport .adventureHeader .headline .from {
    overflow: visible;
}

div.reports #reportWrapper .adventureReport .adventureHeader .headline .from .roleIcon {
    display: none;
}

div.reports #reportWrapper .adventureReport .adventureHeader .headline .from .tribeIcon {
    right: 8px;
    bottom: 0;
    width: 38px !important;
    height: 36px !important;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

div.reports #reportWrapper .adventureReport .adventureHeader .headline .to .adventureTitleIcon {
    position: absolute;
    left: 22px;
    top: 10px;
    width: 16px;
    height: 16px;
    background-image: url('../../img/a/adventure-ltr.png');
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}

div.reports #reportWrapper .adventureReport .adventureHeader .headline .to .roleIcon,
div.reports #reportWrapper .adventureReport .adventureHeader .headline .to .svgAttack,
div.reports #reportWrapper .adventureReport .adventureHeader .headline .to .svgLoot {
    display: none;
}

div.reports #reportWrapper .adventureReport .adventureHeader .headline .to svg.svgLoot {
    left: -2px;
    right: auto;
}

div.reports #reportWrapper .adventureReport .additionalInformation th {
    text-align: center;
    vertical-align: middle;
}

div.reports #reportWrapper .adventureReport .additionalInformation .adventureInfoCell,
div.reports #reportWrapper .adventureReport .additionalInformation .adventureLootCell {
    text-align: center;
    vertical-align: middle;
}

div.reports #reportWrapper .adventureReport .additionalInformation .adventureInfoList,
div.reports #reportWrapper .adventureReport .additionalInformation .adventureLootLine {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    min-height: 24px;
    direction: rtl;
}

div.reports #reportWrapper .adventureReport .additionalInformation .adventureInfoItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

div.reports #reportWrapper .adventureReport .additionalInformation .adventureInfoDivider {
    width: 1px;
    height: 18px;
    background: rgba(126, 49, 50, 0.24);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.55);
}

div.reports #reportWrapper .adventureReport .additionalInformation .adventureInfoItem img {
    flex: 0 0 auto;
    margin: 0;
}

div.reports #reportWrapper .adventureReport .additionalInformation .adventureLootReward img {
    flex: 0 0 auto;
    margin: 0;
}

div.reports #reportWrapper .adventureReport .additionalInformation .adventureLootReward {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
    unicode-bidi: isolate;
}

div.reports #reportWrapper .adventureReport .additionalInformation .adventureLootText {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    unicode-bidi: isolate;
}

.dialog.trav47PaymentShop,
#content.trav47-shop-page {
    color: #352415;
}

.dialog.trav47PaymentShop .dialog-background-tl,
.dialog.trav47PaymentShop .dialog-background-tc,
.dialog.trav47PaymentShop .dialog-background-tr,
.dialog.trav47PaymentShop .dialog-background-ml,
.dialog.trav47PaymentShop .dialog-background-mc,
.dialog.trav47PaymentShop .dialog-background-mr,
.dialog.trav47PaymentShop .dialog-background-bl,
.dialog.trav47PaymentShop .dialog-background-bc,
.dialog.trav47PaymentShop .dialog-background-br {
    background-image: none !important;
    background-color: #8c6a3d !important;
}

.dialog.trav47PaymentShop .dialog-background-mc {
    background-color: #eadcbd !important;
}

.dialog.trav47PaymentShop .dialog-contents,
.dialog.trav47PaymentShop .dialogContents {
    overflow: visible;
    background: linear-gradient(180deg, #f8eed7 0%, #e6d3ad 100%);
    border: 1px solid #76542f;
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(32, 17, 5, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard {
    position: relative;
    box-sizing: border-box;
    direction: rtl;
}

.dialog.trav47PaymentShop div#paymentWizard .trav47PaymentClose {
    position: absolute;
    top: -37px;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #5c3d1c;
    border-radius: 6px;
    background: linear-gradient(180deg, #f4e4bf 0%, #c8a46d 100%);
    color: #3b2411;
    font: bold 24px/1 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(31, 18, 7, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.dialog.trav47PaymentShop div#paymentWizard .trav47PaymentClose:hover {
    background: linear-gradient(180deg, #fff1cb 0%, #d8b578 100%);
    color: #1f1208;
}

.dialog.trav47PaymentShop div#paymentWizard .trav47PaymentClose:active {
    background: linear-gradient(180deg, #bd9860 0%, #f4e4bf 100%);
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .header {
    position: absolute;
    top: -34px;
    right: 48px;
    left: 48px;
    height: 38px !important;
    margin: 0 !important;
    overflow: visible;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .header ul {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 38px !important;
    margin: 0;
    padding: 0;
}

.dialog.trav47PaymentShop div#paymentWizard .header li,
.dialog.trav47PaymentShop div#paymentWizard .header li.active {
    float: none !important;
    display: block;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
}

.dialog.trav47PaymentShop div#paymentWizard .header li.clear {
    display: none !important;
}

.dialog.trav47PaymentShop div#paymentWizard .header .tabButton,
.dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 134px;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 20px;
    background: linear-gradient(180deg, #fff8e8 0%, #eadac0 100%);
    border: 1px solid #9d7b4d;
    border-bottom-color: #6b4e2e;
    border-radius: 3px 3px 0 0;
    color: #3e2a17 !important;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 2px rgba(39, 22, 8, 0.18);
}

.dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton {
    height: 36px !important;
    background: linear-gradient(180deg, #8f6f4d 0%, #5b3d23 100%);
    border-color: #4e321b;
    border-bottom-color: #4e321b;
    color: #fff4df !important;
    transform: none;
}

.dialog.trav47PaymentShop div#paymentWizard .header .tabBtnBGPart,
.dialog.trav47PaymentShop div#paymentWizard .header .tabBtnImg,
.dialog.trav47PaymentShop div#paymentWizard .header .tabBorder {
    display: none !important;
}

.dialog.trav47PaymentShop div#paymentWizard .header .tabButton .text {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    color: inherit;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton .text {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
}

/* Keep only the outer Plus Features store tab in the max-upgrade purple. */
.dialog.trav47PaymentShop div#paymentWizard .header .tabButton.paymentFeatures,
.dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton.paymentFeatures {
    color: #f2f2f2 !important;
    border-color: #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;
}

.dialog.trav47PaymentShop div#paymentWizard .header .tabButton.paymentFeatures .text,
.dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton.paymentFeatures .text {
    color: inherit !important;
    text-shadow: inherit !important;
}

.dialog.trav47PaymentShop div#paymentWizard .trav47PaymentTabIcon {
    color: #d7a900;
    font-size: 17px;
    line-height: 1;
}

.dialog.trav47PaymentShop div#paymentWizard .contentBorder {
    background: linear-gradient(180deg, #fff9eb 0%, #f1e2c2 100%);
    border-color: #c0a06b;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(67, 43, 19, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dialog.trav47PaymentShop div#paymentWizard .accountBalance {
    position: absolute !important;
    top: 46px !important;
    left: 14px !important;
    right: auto !important;
    z-index: 25;
    width: auto !important;
    min-width: 156px;
    max-width: none !important;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: visible !important;
    padding: 5px 10px 5px 12px;
    border: 1px solid rgba(120, 83, 42, 0.45);
    border-radius: 6px;
    background: rgba(255, 246, 224, 0.86);
    color: #3a2614;
    font-weight: 700;
    line-height: 20px;
    direction: rtl;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(67, 43, 19, 0.12);
}

.dialog.trav47PaymentShop div#paymentWizard .accountBalance .trav47GoldBalanceAmount {
    color: #241508;
}

.dialog.trav47PaymentShop div#paymentWizard .accountBalance .gold {
    flex: 0 0 auto;
    margin: 0;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentWrapper {
    box-sizing: border-box;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopGoldArea {
    float: none;
    width: 100%;
    min-height: 445px;
    padding: 13px 12px 16px;
    box-sizing: border-box;
    direction: rtl;
}

.trav47ShopWizard .trav47ShopGoldArea h4,
.trav47ShopWizard .trav47ShopInfo h4,
.trav47-shop-content h1.titleInHeader {
    margin: 0 0 12px;
    color: #684521;
    font-size: 15px;
}

.trav47ShopPackageGrid,
.trav47-gold-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    direction: rtl;
}

.trav47-gold-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(126px, 156px));
    align-items: start;
}

.trav47GoldPackage,
.trav47-gold-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    aspect-ratio: 1 / 2;
    min-height: 222px;
    padding: 9px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff5cf 0%, #f0ca63 55%, #c28922 100%);
    border: 1px solid #a56d19;
    border-radius: 8px;
    color: #33210e !important;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(63, 38, 8, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.trav47GoldPackage:hover,
.trav47-gold-card:hover {
    background: linear-gradient(180deg, #fff9dc 0%, #f6d674 55%, #d49a29 100%);
    border-color: #5f7e20;
    color: #2d4413 !important;
    transform: translateY(-1px);
}

.trav47GoldPackageName,
.trav47-gold-card-title {
    width: 100%;
    overflow: hidden;
    color: #3a2611;
    font-size: 14px;
    font-weight: 800;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trav47GoldPackageImage,
.trav47-gold-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 92px;
    flex: 1 1 auto;
    border: 1px solid rgba(149, 99, 25, 0.45);
    border-radius: 6px;
    background: rgba(255, 244, 196, 0.44);
    box-sizing: border-box;
}

.trav47GoldPackageImage img,
.trav47-gold-card-image img {
    display: block;
    max-width: 92%;
    max-height: 100%;
    object-fit: contain;
}

.trav47GoldPackageMeta,
.trav47-gold-card-amount {
    color: #5f4216;
    font-size: 13px;
    font-weight: 800;
    line-height: 17px;
}

.trav47GoldPackagePrice,
.trav47-gold-card-price {
    color: #2f1d0a;
    font-size: 12px;
    font-weight: 700;
    line-height: 15px;
}

.trav47GoldPackageButton,
.trav47-buy-link,
.trav47-gold-card-button,
.trav47-plus-action,
.dialog.trav47PaymentShop div#paymentWizard .featureButton button.gold,
.dialog.trav47PaymentShop div#paymentWizard .featureButton button.green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 25px;
    padding: 4px 14px;
    border: 1px solid #283308 !important;
    border-radius: 5px;
    background-color: #7cb029 !important;
    background-image: linear-gradient(to bottom, #7cb029, #587c1e) !important;
    color: #f2f2f2 !important;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: inset 2px 0 1px -1px #4b6f19, inset -2px 0 1px -1px #4b6f19, inset 0 3px 1px -1px #b5e251, inset 0 -3px 1px -1px rgba(44, 75, 12, 0.6);
    cursor: pointer;
    box-sizing: border-box;
}

.trav47GoldPackageButton:hover,
.trav47-buy-link:hover,
.trav47-gold-card-button:hover,
.trav47-plus-action:hover,
.dialog.trav47PaymentShop div#paymentWizard .featureButton button.gold:hover,
.dialog.trav47PaymentShop div#paymentWizard .featureButton button.green:hover {
    background-color: #7cb029 !important;
    background-image: none !important;
    border-color: #506030 !important;
    color: #283308 !important;
    text-shadow: none;
    box-shadow: inset 0 20px 25px -10px rgba(255, 255, 255, 0.7);
}

.trav47-plus-action.is-disabled,
.trav47-plus-action:disabled {
    color: #506030 !important;
    border-color: #9fa38a !important;
    background: #89917b !important;
    text-shadow: none;
    opacity: 0.72;
    cursor: default;
}

.dialog.trav47PaymentShop div#paymentWizard .featureButton button.gold .button-background,
.dialog.trav47PaymentShop div#paymentWizard .featureButton button.green .button-background {
    display: none !important;
}

.dialog.trav47PaymentShop div#paymentWizard .featureButton button.gold .button-container,
.dialog.trav47PaymentShop div#paymentWizard .featureButton button.green .button-container {
    height: 100%;
}

.dialog.trav47PaymentShop div#paymentWizard .featureButton button.gold .button-content,
.dialog.trav47PaymentShop div#paymentWizard .featureButton button.green .button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 0;
    color: inherit !important;
    background: transparent !important;
}

.dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking,
.dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking {
    min-height: 64px;
    overflow: hidden;
    box-sizing: border-box;
}

.dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureContent,
.dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureContent {
    float: none;
    width: auto;
    height: auto;
    min-height: 60px;
    margin: 0 9px 2px 132px;
    position: static;
    box-sizing: border-box;
}

.dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureButton,
.dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureButton {
    top: 7px;
    left: 12px;
}

.dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureDuration,
.dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureRenewal,
.dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureDuration,
.dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureRenewal {
    left: 12px;
    bottom: 6px;
    width: 112px;
    line-height: 14px;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
}

.dialog.trav47PaymentShop div#paymentWizard.pros,
.dialog.trav47PaymentShop div#paymentWizard.paymentFeatures {
    direction: rtl;
}

.dialog.trav47PaymentShop div#paymentWizard.pros .featureTitle,
.dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureTitle,
.dialog.trav47PaymentShop div#paymentWizard.pros .premiumFeatureDescription,
.dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureRemainingTime {
    text-align: right;
}

#content.trav47-shop-page .trav47-shop-panel {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    background: linear-gradient(180deg, #f7ecd5 0%, #e8d5b0 100%);
    border: 1px solid #80613b;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(47, 28, 10, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.trav47-shop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #b99a68;
    direction: rtl;
}

.trav47-shop-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 14px;
    background: linear-gradient(180deg, #8f6d40 0%, #674822 100%);
    border: 1px solid #5a3f20;
    border-radius: 6px 6px 0 0;
    color: #fff4d9 !important;
    font-weight: 700;
    text-decoration: none;
}

.trav47-shop-tab.active,
.trav47-shop-tab:hover {
    background: linear-gradient(180deg, #fff8e8 0%, #ead6b1 100%);
    border-bottom-color: #ead6b1;
    color: #3b2917 !important;
}

.trav47ShopEmpty {
    grid-column: 1 / -1;
    padding: 20px;
    color: #6b5334;
    text-align: center;
}

.trav47-plus-overview {
    direction: rtl;
}

.trav47-plus-lead {
    margin: 0 0 14px;
    color: #5c4326;
    font-weight: 700;
}

.trav47-plus-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trav47-plus-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 82px;
    padding: 12px;
    background: linear-gradient(180deg, #fff8e6 0%, #ead4a9 100%);
    border: 1px solid #c2a06b;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.trav47-plus-card.is-active {
    border-color: #86a53d;
    background: linear-gradient(180deg, #fffced 0%, #e9ddb9 100%);
}

.trav47-plus-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #8f5e11;
    border-radius: 8px;
    background: linear-gradient(180deg, #f6d26a 0%, #bd8320 100%);
    color: #fff7d7;
    font-weight: 900;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.trav47-plus-card-body h3 {
    margin: 0 0 4px;
    color: #3d2914;
    font-size: 15px;
}

.trav47-plus-card-body p {
    margin: 0;
    color: #6c5435;
    line-height: 1.45;
}

.trav47-plus-status {
    margin-top: 5px;
    color: #58751e;
    font-weight: 800;
}

.trav47-plus-action {
    gap: 4px;
}

@media screen and (max-width: 760px) {
    .dialog.trav47PaymentShop,
    .dialog.trav47PaymentShop .dialog-contents,
    .dialog.trav47PaymentShop .dialogContents {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        transform: none !important;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop {
        position: fixed !important;
        top: 8px !important;
        right: 6px !important;
        left: 6px !important;
        margin: 0 !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard {
        width: 100% !important;
        min-height: 0;
        max-height: calc(100vh - 26px);
        padding-top: 42px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dialog.trav47PaymentShop div#paymentWizard .trav47PaymentClose {
        top: 5px;
        left: 6px;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header {
        position: absolute;
        top: 5px;
        right: 44px;
        left: 44px;
        height: 34px !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header ul {
        height: 34px !important;
        gap: 3px;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header li:not(.clear) {
        flex: 1 1 0;
        min-width: 0;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header .tabButton,
    .dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton {
        width: 100%;
        min-width: 0;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 7px;
        border-radius: 3px 3px 0 0;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton {
        height: 32px !important;
        transform: none;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header .tabButton .text {
        font-size: 11px;
    }

    .dialog.trav47PaymentShop div#paymentWizard .contentWrapper,
    .dialog.trav47PaymentShop div#paymentWizard .contentArea,
    .dialog.trav47PaymentShop div#paymentWizard .infoArea,
    .dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopGoldArea {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard .accountBalance {
        position: static !important;
        display: inline-flex;
        margin: 0 0 8px;
        min-width: 0;
    }

    .dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopGoldArea {
        min-height: 0;
        padding: 10px;
    }

    .trav47ShopPackageGrid,
    .trav47-gold-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .trav47GoldPackage,
    .trav47-gold-card {
        min-height: 0;
        padding: 7px;
    }

    .trav47GoldPackageImage,
    .trav47-gold-card-image {
        min-height: 72px;
    }

    .dialog.trav47PaymentShop div#paymentWizard .paymentPopupDialogWrapper,
    .dialog.trav47PaymentShop div#paymentWizard .paymentPopupDialogWrapper .feature,
    .dialog.trav47PaymentShop div#paymentWizard .paymentPopupDialogWrapper .featureContent {
        width: 100% !important;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard .paymentPopupDialogWrapper .feature {
        min-height: 74px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking {
        min-height: 66px;
        padding: 0;
    }

    .dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureContent {
        width: auto !important;
        min-height: 62px;
        margin: 0 8px 2px 106px !important;
        padding-right: 8px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureTitle {
        margin: 6px 0 3px;
        overflow: visible;
        font-size: 14px;
        line-height: 17px;
        text-overflow: clip;
        white-space: nowrap;
    }

    .dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureRemainingTime {
        right: 8px;
        bottom: 6px;
        left: auto;
        max-width: calc(100% - 116px);
        line-height: 15px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureButton {
        top: 8px;
        left: 10px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureDuration,
    .dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper .featureBooking .featureRenewal {
        left: 8px;
        bottom: 5px;
        width: 104px;
        font-size: 11px;
        line-height: 14px;
        white-space: nowrap;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentWrapper {
        display: block;
        overflow: hidden;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea {
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-tl,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-tr,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-tc,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-ml,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-mr,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-mc,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-bl,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-br,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-bc {
        display: none !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea {
        width: 100% !important;
        margin-top: 4px !important;
        padding: 0 !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentBorder-contents {
        margin: 0 !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-contents {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 2px;
        height: auto !important;
        min-height: 0;
        margin: 0 !important;
        padding: 0;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a {
        display: block;
        flex: 1 1 0;
        min-height: 0;
        text-decoration: none;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep {
        float: none !important;
        width: 100% !important;
        height: 27px !important;
        min-height: 0;
        margin: 0 !important;
        padding: 0 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: none !important;
        background: linear-gradient(180deg, #fff8e8 0%, #eadac0 100%);
        border: 1px solid #9d7b4d;
        border-bottom-color: #6b4e2e;
        border-radius: 3px 3px 0 0;
        color: #3e2a17;
        text-align: center;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep.active {
        border-color: #4e321b;
        background: linear-gradient(180deg, #8f6f4d 0%, #5b3d23 100%);
        color: #fff4df;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep .buyGoldInfoStepLabel {
        margin: 0;
        overflow: visible;
        font-size: 12px;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep .buyGoldInfoStepContent {
        display: none;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .feature,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking {
        height: auto !important;
        min-height: 0;
        margin: 0 0 5px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking {
        padding: 5px 6px !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureContent {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title title"
            "desc desc"
            "meta action";
        align-items: center;
        gap: 2px 6px;
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureTitle {
        grid-area: title;
        min-width: 0;
        margin: 0;
        overflow: visible;
        color: #4d321b;
        font-size: 12px;
        line-height: 15px;
        text-align: right;
        text-overflow: clip;
        white-space: nowrap;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureRemainingTime {
        position: static !important;
        grid-area: desc;
        right: auto;
        bottom: auto;
        left: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        color: #5d4a2f;
        font-size: 11px;
        line-height: 13px;
        text-align: right;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureButton {
        position: static !important;
        grid-area: action;
        justify-self: start;
        align-self: center;
        margin: 0;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureButton button.gold,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureButton button.green {
        min-width: 72px;
        height: 24px;
        padding: 3px 10px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureDuration,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper .featureBooking .featureRenewal {
        position: static !important;
        grid-area: meta;
        width: auto;
        min-width: 0;
        margin: 0;
        color: #4f3c22;
        font-size: 10.5px;
        line-height: 13px;
        text-align: right;
        white-space: nowrap;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent {
        grid-template-areas:
            "desc desc"
            "meta action";
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table {
        grid-area: desc;
        width: 100% !important;
        margin: 0 !important;
        font-size: 11px;
        line-height: 13px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table tbody {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 1px 8px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table tr {
        display: contents;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td {
        display: inline-flex !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        align-items: center;
        justify-content: flex-end;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .inlineIcon.resources {
        white-space: nowrap;
    }

    .trav47-plus-card-grid {
        grid-template-columns: 1fr;
    }
}

body.globalMessage div#sysmsg {
    width: auto;
    max-width: 550px;
    margin: 0 auto;
    box-sizing: border-box;
}

body.globalMessage .globalMessageArticleBanner {
    display: block;
    width: 100%;
    height: 160px;
    margin: 0 0 14px;
    border: 0;
    object-fit: cover;
    object-position: center center;
    box-sizing: border-box;
}

body.globalMessage .globalMessageBody {
    max-width: 100%;
    overflow: hidden;
    color: #2f2318;
    font-size: 13px;
    line-height: 1.5;
    direction: rtl;
}

body.globalMessage .globalMessageBody li {
    margin: 0 18px 6px 0;
    line-height: 1.45;
    list-style-position: outside;
}

body.globalMessage .globalMessageContinue {
    clear: both;
    margin: 14px 0 0;
}

body.globalMessage .globalMessageContinue a {
    font-weight: 700;
}

/* Interface correction pass: readable dialogs and actionable buttons. */
.dialogOverlay .dialogWrapper .dialogContents,
.dialogOverlay .dialogWrapper .dialog-contents,
.dialog .dialogContents,
.dialog .dialog-contents,
.dialog #dialogContent,
.dialog .content#dialogContent {
    box-sizing: border-box;
    background: linear-gradient(180deg, #fafdff 0%, #e2edf2 100%) !important;
    border: 1px solid #9ab1bf;
    border-radius: 8px;
    color: #334b5c !important;
    box-shadow: 0 12px 28px rgba(35, 54, 66, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dialogOverlay .dialogWrapper .title,
.dialog .title,
.dialog h1,
.dialog h2,
.dialog h3,
.dialog h4 {
    color: #334b5c !important;
}

.dialog .dialogCancelButton.iconButton.small.cancel,
.dialogV2.dialogWrapper.white .dialogContents .iconButton.cancel {
    z-index: 5;
    background: linear-gradient(180deg, #fff8e8 0%, #d7b77d 100%) !important;
    border: 1px solid #73522a !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(35, 22, 10, 0.24);
}

input[type="submit"],
input[type="button"],
#mapCoordEnter button.green.small,
.dialog .buttons button,
#finishNowDialog button,
#submitButton button,
#submitText button,
form[name="msg"] button {
    min-height: 26px;
    padding: 0 12px;
    background: linear-gradient(180deg, #7fa63d 0%, #4e741e 100%) !important;
    border: 1px solid #375513 !important;
    border-radius: 6px !important;
    color: #fff7dc !important;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 2px rgba(38, 28, 13, 0.22) !important;
}

#mapContainer #mapCoordEnter.toolbar div.coordinatesInput {
    display: inline-flex !important;
    flex-direction: row-reverse;
    align-items: center;
    gap: 5px;
    direction: rtl;
}

#mapContainer #mapCoordEnter.toolbar div.coordinatesInput {
    float: right;
}

#mapContainer #mapCoordEnter.toolbar div.coordinatesInput > div {
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#mapContainer #mapCoordEnter.toolbar div.coordinatesInput > .clear {
    display: none !important;
}

#mapContainer #mapCoordEnter.toolbar div.coordinatesInput input {
    text-align: center !important;
    direction: ltr;
}

/* Desktop map coordinates: keep the action button level with both inputs. */
@media screen and (min-width: 1025px) {
    body.map #mapContainer #mapCoordEnter.toolbar button.green.small {
        top: 3px !important;
        height: 17px !important;
        min-height: 17px !important;
        padding: 0 8px !important;
        box-sizing: border-box;
    }

    body.map #mapContainer #mapCoordEnter.toolbar button.green.small .button-container,
    body.map #mapContainer #mapCoordEnter.toolbar button.green.small .button-content {
        height: 15px !important;
        min-height: 0 !important;
        line-height: 15px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box;
    }

    body.map #mapContainer #mapCoordEnter.toolbar button.green.small .button-content {
        font-size: 13px !important;
    }
}

#finishNowDialog,
#demolishNowDialog {
    box-sizing: border-box;
    background: linear-gradient(180deg, #fbf0d5 0%, #ead2a6 100%) !important;
    border: 1px solid #8a6739;
    border-radius: 8px;
    color: #2f2114 !important;
}

#demolishNowDialog {
    width: fit-content;
    max-width: min(320px, calc(100vw - 36px));
    min-width: 0;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    direction: rtl;
    text-align: center;
}

#demolishNowDialog p {
    margin: 0 0 10px !important;
    color: #2f2114;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
}

#demolishNowDialog .buttonWrapper {
    margin: 0;
    text-align: center;
}

#demolishNowDialog button.demolishNowConfirm {
    min-height: 26px;
    padding: 4px 18px !important;
    color: #3a2a10 !important;
    background-image: linear-gradient(to bottom, #fdf5cb, #f8eeb0 40%, #f0dc7c 45%, #e6ce64 85%, #caac50) !important;
    background-color: #f8eeb0 !important;
    border: 1px solid #82631d !important;
    box-shadow: inset 0 0 1px 1px rgba(82, 67, 32, 0.5), inset 0 2px 2px 1px #faf8ec, inset 0 -2px 2px 0 #a08939 !important;
    text-shadow: 0 1px 0 rgba(255, 250, 225, 0.65);
}

#demolishNowDialog button.demolishNowConfirm:hover,
#demolishNowDialog button.demolishNowConfirm:focus {
    background-image: linear-gradient(to bottom, #fff9d8, #f5e69d 48%, #dfc059 100%) !important;
    border-color: #665722 !important;
}

#demolishNowDialog button.demolishNowConfirm .button-content,
div#build.gid15 .demolishNow button.textButtonV1.gold .button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    direction: rtl;
}

#demolishNowDialog button.demolishNowConfirm .goldValue,
div#build.gid15 .demolishNow button.textButtonV1.gold .goldValue {
    direction: ltr;
}

#demolishNowDialog button.demolishNowConfirm .goldIcon,
div#build.gid15 .demolishNow button.textButtonV1.gold .goldIcon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0;
    background-image: url('../../../images/ui/buttons/button/content/goldInner-rtl.png');
    vertical-align: middle;
}

.dialog:has(#demolishNowDialog) {
    max-width: calc(100vw - 16px) !important;
}

.dialog:has(#demolishNowDialog) .dialog-container,
.dialog:has(#demolishNowDialog) .dialog-contents,
.dialog:has(#demolishNowDialog) form,
.dialog:has(#demolishNowDialog) #dialogContent {
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
}

.dialog:has(#demolishNowDialog) .title,
.dialog:has(#demolishNowDialog) .buttons {
    display: none !important;
}

#finishNowDialog .buttons,
#finishNowDialog p,
div#build form .cta,
div#build .trainUnits,
div#build table.trainUnits td {
    text-align: center;
}

@media screen and (max-width: 520px) {
    #demolishNowDialog {
        padding: 9px 10px;
    }

    #demolishNowDialog p {
        white-space: normal;
    }

}

div#build form .cta button,
div#build .trainUnits button,
div#build table.trainUnits button {
    margin-right: auto;
    margin-left: auto;
}

div.dialog div.content #achievementRewardList {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    clear: both;
    width: 100%;
    margin: 8px auto 0;
    text-align: center;
}

div.dialog div.content #achievementRewardList div.achievement,
div.dialog div.content #achievementRewardList div.achievementArrow,
div.dialog div.content #achievementRewardList div.verticalLine {
    float: none !important;
}

div.dialog div.content #achievementRewardList div.achievement {
    flex: 0 0 89px;
    margin: 0 !important;
}

div.dialog div.content #achievementRewardList div.achievementArrow {
    flex: 0 0 9px;
}

div.dialog div.content #achievementRewardList div.verticalLine {
    flex: 0 0 1px;
}

.questWrapper .questRewards,
.questWrapper .questButtons,
.questWrapper.achievements .questRewards {
    text-align: center !important;
}

@media screen and (max-width: 430px) {
    div.dialog div.content #achievementRewardList {
        width: 122%;
        margin-right: -11%;
        margin-left: -11%;
        transform: scale(0.82);
        transform-origin: center top;
    }
}

@media screen and (max-width: 620px) {
    body.mobileOptimized.globalMessage div#sysmsg {
        max-width: 100%;
    }

    body.mobileOptimized.globalMessage .globalMessageBody {
        overflow: visible;
        font-size: 13px;
    }

}

div.reports #reportWrapper .supportReport,
div.reports #reportWrapper .supportReport .supportHeader,
div.reports #reportWrapper .supportReport .supportHeader .headline,
div.reports #reportWrapper .supportReport .supportHeader .participants,
div.reports #reportWrapper .supportReport .supportTroops,
div.reports #reportWrapper .supportReport .additionalInformation {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
}

div.reports #reportWrapper .supportReport {
    overflow: hidden;
}

div.reports #reportWrapper .supportReport .supportTroops {
    table-layout: fixed;
}

div.reports #reportWrapper .supportReport .supportHeader .participants .to,
div.reports #reportWrapper .supportReport .supportHeader .participants .from {
    min-width: 0;
    overflow: hidden;
}

#reportWrapper > .body > img.reportImage,
#reportWrapper > .body > .body > img.reportImage,
#reportWrapper > .body > .victory .reportImage.outcome {
    display: block;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
}

#reportWrapper > .body > .victory,
#reportWrapper > .body > .role,
#reportWrapper .tradeReport,
#reportWrapper .supportReport,
#reportWrapper .adventureReport,
#reportWrapper .animalReport,
#reportWrapper .settleReport {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box;
}

/* Settlement reports: real success/failure outcomes with dedicated headers. */
#reportWrapper .body .reportImage.settlementSuccess,
#reportWrapper .body .reportImage.settlementFailed {
    display: block;
    width: 100% !important;
    height: 190px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#reportWrapper .body .reportImage.settlementSuccess {
    background-image: url('../../../images/reports/reports_settlement-success.jpg');
}

#reportWrapper .body .reportImage.settlementFailed {
    background-image: url('../../../images/reports/reports_settlement-failed.jpg');
}

#trav47ReportsOverview .trav47ReportType22,
#trav47ReportsOverview .trav47ReportType23 {
    display: inline-block;
    flex: 0 0 19px;
    width: 19px;
    height: 17px;
    background-position: center;
    background-repeat: no-repeat;
}

#trav47ReportsOverview .trav47ReportType22 {
    background-image: url('../../../images/reports/mini_house-rtl.png');
}

#trav47ReportsOverview .trav47ReportType23 {
    background-image: url('../../../images/reports/mini_houseFailed-rtl.gif');
}

div.reports #reportWrapper .trav47SettlementReport {
    overflow: hidden;
    border: 1px solid #dfc495;
    border-top: 0;
    background: #fffdf8;
}

div.reports #reportWrapper .trav47SettlementStatus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 6px 12px;
    border-bottom: 1px solid #d7c6a8;
    color: #36561f;
    background: linear-gradient(180deg, #f0f7df, #dcebc1);
    font: 700 16px/28px Tahoma, Arial, sans-serif;
    text-align: center;
}

div.reports #reportWrapper .trav47SettlementReport.is-failed .trav47SettlementStatus {
    color: #7d2b20;
    background: linear-gradient(180deg, #fff0e9, #efd1c4);
}

div.reports #reportWrapper .trav47SettlementStatusIcon {
    position: relative;
    display: inline-block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #5f841f;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

div.reports #reportWrapper .trav47SettlementStatusIcon::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 7px;
    height: 4px;
    border-right: 2px solid #5f841f;
    border-bottom: 2px solid #5f841f;
    transform: rotate(45deg);
}

div.reports #reportWrapper .trav47SettlementReport.is-failed .trav47SettlementStatusIcon {
    border-color: #a84334;
}

div.reports #reportWrapper .trav47SettlementReport.is-failed .trav47SettlementStatusIcon::before,
div.reports #reportWrapper .trav47SettlementReport.is-failed .trav47SettlementStatusIcon::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 3px;
    width: 10px;
    height: 2px;
    border: 0;
    background: #a84334;
    transform: rotate(45deg);
}

div.reports #reportWrapper .trav47SettlementReport.is-failed .trav47SettlementStatusIcon::after {
    transform: rotate(-45deg);
}

div.reports #reportWrapper .trav47SettlementInformation {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

div.reports #reportWrapper .trav47SettlementInformation th,
div.reports #reportWrapper .trav47SettlementInformation td {
    min-height: 38px;
    padding: 9px 12px;
    border-bottom: 1px solid #e3d7c2;
    vertical-align: middle;
}

div.reports #reportWrapper .trav47SettlementInformation tr:last-child th,
div.reports #reportWrapper .trav47SettlementInformation tr:last-child td {
    border-bottom: 0;
}

div.reports #reportWrapper .trav47SettlementInformation th {
    width: 148px;
    color: #5c4b35;
    background: #f5ecdd;
    font-weight: 700;
    text-align: right;
}

div.reports #reportWrapper .trav47SettlementInformation td {
    color: #3f3a31;
    background: #fffdf8;
    text-align: right;
}

div.reports #reportWrapper .trav47SettlementCoordinates {
    color: #4f7719;
    font-weight: 700;
}

div.reports #reportWrapper .trav47SettlementCpDivider {
    display: inline-block;
    margin: 0 7px;
    color: #a28e70;
}

div.reports #reportWrapper > .header .headline .tradeRouteSubject {
    overflow: hidden;
    color: #333333;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.reports #reportWrapper > .header .headline .tradeRouteSubject a.village {
    color: #99c01a;
}

div.reports #reportWrapper > .header .headline .tradeRouteSubject a.village:hover,
div.reports #reportWrapper > .header .headline .tradeRouteSubject a.village:focus {
    color: #00bc00;
}

div.reports #reportWrapper .tradeReport .tradeHeader .tradeRouteHeadline {
    display: block;
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
    border-right: solid 1px #dfc495;
    border-left: solid 1px #dfc495;
    border-bottom: solid 1px #dfc495;
    background-color: #fcf2da;
    margin-top: 3px;
}

div.reports #reportWrapper .tradeReport .tradeHeader .tradeRouteTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    min-width: 0;
    margin: 0;
    padding: 4px 10px 0;
    overflow: hidden;
    color: #333333;
    direction: rtl;
    font-size: 16px;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    box-sizing: border-box;
}

div.reports #reportWrapper .tradeReport .tradeHeader .tradeRouteTitle span {
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: #333333;
    line-height: 1;
}

div.reports #reportWrapper .tradeReport .tradeHeader .tradeRouteTitle .tradeRouteVillage {
    display: inline-flex;
    align-items: center;
    max-width: 38%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    color: #99c01a;
    line-height: 1;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

div.reports #reportWrapper .tradeReport .tradeHeader .tradeRouteTitle .tradeRouteVillage:hover,
div.reports #reportWrapper .tradeReport .tradeHeader .tradeRouteTitle .tradeRouteVillage:focus {
    color: #00bc00;
}

@media screen and (max-width: 760px) {
    div.reports #reportWrapper .tradeReport .tradeHeader .tradeRouteTitle {
        gap: 5px;
        padding: 4px 7px 0;
        font-size: 13px;
    }

    div.reports #reportWrapper .tradeReport .tradeHeader .tradeRouteTitle .tradeRouteVillage {
        max-width: 34%;
    }
}

div.reports #reportWrapper .travianReportDeleteForm {
    position: absolute;
    top: 38px;
    left: 8px;
    z-index: 50;
    margin: 0;
}

div.reports #reportWrapper .travianReportDeleteButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 1px solid #7f1717 !important;
    border-radius: 4px !important;
    background: linear-gradient(#d84a43, #a71f1f) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    cursor: pointer;
}

div.reports #reportWrapper .travianReportDeleteButton:hover,
div.reports #reportWrapper .travianReportDeleteButton:focus {
    background: linear-gradient(#ef625b, #b72525) !important;
}

div.reports #reportWrapper .travianReportDeleteButton:before,
div.reports #reportWrapper .travianReportDeleteButton:after {
    display: none !important;
}

div.reports #reportWrapper .travianReportDeleteButton i.delete {
    display: block;
    margin: 0;
    filter: brightness(0) invert(1);
}

div.reports #reportWrapper .animalReport .animalHeader .headline .from .tribeIcon,
div.reports #reportWrapper .animalReport .animalHeader .headline .from .roleIcon {
    display: none;
}

div.reports #reportWrapper .animalReport .animalHeader .headline .to.animalIconSlot {
    overflow: visible;
    z-index: 3;
}

div.reports #reportWrapper .animalReport .animalHeader .headline .to.animalIconSlot .tribeIcon {
    position: absolute;
    right: 14px;
    bottom: -3px;
    z-index: 3;
}

div.reports #reportWrapper .animalReport .animalHeader .headline .to.animalIconSlot .roleIcon {
    position: absolute;
    right: 54px;
    bottom: -4px;
    width: 40px;
    height: 46px;
    z-index: 4;
}

div#build.gid27 table#own {
    table-layout: fixed;
}

div#build.gid27 table#own col.icon-col {
    width: 5%;
}

div#build.gid27 table#own col.name-col {
    width: 45%;
}

div#build.gid27 table#own col.village-col {
    width: 31%;
}

div#build.gid27 table#own col.time-col {
    width: 19%;
}

div#build.gid27 table#own td.icon {
    padding-right: 2px;
    padding-left: 2px;
}

div#build.gid27 table#own td.pla {
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div#build.gid27 table#own td.pla a {
    white-space: nowrap;
}

div#build.gid27 table#own td.dist {
    width: auto;
    padding-right: 3px;
    padding-left: 3px;
    font-size: 11px;
    white-space: nowrap;
}

div#build.gid27 table#own td.nam {
    width: auto;
}

/* Use the same artefact icon strip in treasury tables on desktop and phone. */
div#build.gid27 table td.icon {
    width: 29px;
    min-width: 29px;
    max-width: 29px;
    padding: 2px 3px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

div#build.gid27 table td.icon img[class*="artefact_icon_"] {
    display: inline-block;
    float: none;
    width: 23px;
    height: 23px;
    margin: 0 auto;
    padding: 0;
    background-color: transparent;
    background-image: url('../../../images/artefacts/icons/artefact-icons-medium.png');
    background-repeat: no-repeat;
    background-size: 23px 230px;
    vertical-align: middle;
}

div#build.gid27 table td.icon img.artefact_icon_1 { background-position: 0 0; }
div#build.gid27 table td.icon img.artefact_icon_2 { background-position: 0 -23px; }
div#build.gid27 table td.icon img.artefact_icon_4 { background-position: 0 -46px; }
div#build.gid27 table td.icon img.artefact_icon_5 { background-position: 0 -69px; }
div#build.gid27 table td.icon img.artefact_icon_6 { background-position: 0 -92px; }
div#build.gid27 table td.icon img.artefact_icon_8 { background-position: 0 -115px; }
div#build.gid27 table td.icon img.artefact_icon_9 { background-position: 0 -138px; }
div#build.gid27 table td.icon img.artefact_icon_7 { background-position: 0 -161px; }
div#build.gid27 table td.icon img.artefact_icon_fool { background-position: 0 -184px; }
div#build.gid27 table td.icon img.artefact_icon_10 { background-position: 0 -207px; }

/* Artefact details: compact date and clearer spacing between rows. */
div#build.gid27 .trav47ArtefactDetailsTable tbody th,
div#build.gid27 .trav47ArtefactDetailsTable tbody td {
    padding-top: 8px;
    padding-bottom: 6px;
}

div#build.gid27 .trav47ArtefactCapturedAt {
    display: inline-flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    column-gap: 4px;
    white-space: nowrap;
}

div#build.gid27 .trav47ArtefactCapturedDate {
    display: inline-flex;
    flex-direction: row;
    direction: rtl;
    column-gap: 0;
    white-space: nowrap;
}

div#build.gid27 .trav47ArtefactCapturedTime {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Global previous/next paginator arrows. */
div.paginator .travianPagerSeparator {
    display: none !important;
}

div.paginator .travianPagerArrow {
    position: relative !important;
    display: inline-block !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    margin: 0 3px !important;
    padding: 0 !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 30px !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
}

div.paginator .travianPagerArrow:before {
    content: "";
    position: absolute;
    top: 7px;
    width: 12px;
    height: 12px;
    border-top: 4px solid #14110c;
    border-left: 4px solid #14110c;
    border-radius: 2px 0 0 0;
    transition: border-color 150ms ease, opacity 150ms ease;
}

div.paginator .travianPagerPrevious:before {
    left: 11px;
    transform: rotate(135deg);
}

div.paginator .travianPagerNext:before {
    right: 11px;
    transform: rotate(-45deg);
}

div.paginator a.travianPagerArrow:hover:before,
div.paginator a.travianPagerArrow:focus:before {
    border-color: #7a4d20;
}

div.paginator .travianPagerArrow.disabled {
    cursor: default !important;
    pointer-events: none;
}

div.paginator .travianPagerArrow.disabled:before {
    border-color: #b8b1a1;
    opacity: 0.72;
}

/* Keep map coordinates in X|Y order inside RTL Arabic text. */
span.coordinates,
span.coordinatesWrapper,
span.coordinates .coordinateX,
span.coordinates .coordinateY,
span.coordinates .coordinatePipe {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

span.coordinates,
span.coordinatesWrapper {
    white-space: nowrap !important;
}

span.coordinatesAligned.coordinatesrtl,
span.coordinatesAligned.coordinatesltr {
    direction: ltr !important;
}

span.coordinatesAligned .coordinateX {
    text-align: right !important;
}

span.coordinatesAligned .coordinateY {
    text-align: left !important;
}

/* Arabic game UI displays the minus sign on the visual right of coordinates. */
input.coordinates,
.coordinatesInput input[name="x"],
.coordinatesInput input[name="y"],
.farmSlotCoordinate input[name="x"],
.farmSlotCoordinate input[name="y"] {
    direction: rtl !important;
    unicode-bidi: normal !important;
    text-align: center !important;
}

/* Rally-point fields use the same trailing-minus notation as displayed coordinates. */
.coordinatesInput input[data-trav47-coordinate-input] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

span.coordinates .trav47CoordinateRaw {
    display: inline-block !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
}

/* Alliance sidebar news should stay compact and separated inside the narrow box. */
.sidebar #sidebarBoxAlliance .content .boxTitle {
    margin-bottom: 4px;
    text-align: center;
}

.sidebar #sidebarBoxAlliance .content .boxTitle .name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar #sidebarBoxAlliance .content .boxTitle .allianceTag {
    color: #2b6dad;
    font-weight: bold;
}

.sidebar #sidebarBoxAlliance .content ul.allianceNewsList {
    margin: 0;
    padding: 0;
    list-style: none;
    direction: rtl;
    text-align: center;
    font-size: 12px;
}

.sidebar #sidebarBoxAlliance .content ul.allianceNewsList li.allianceNewsItem {
    display: block;
    overflow: hidden;
    padding: 4px 0 5px;
    line-height: 1.2;
    background: transparent;
}

.sidebar #sidebarBoxAlliance .content ul.allianceNewsList li.allianceNewsItem:not(:last-child) {
    border-bottom: 1px solid rgba(94, 70, 58, 0.2);
}

.sidebar #sidebarBoxAlliance .content .allianceNewsDate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin: 2px 0 0;
    overflow: hidden;
    color: #5e463a;
    font-weight: bold;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: isolate;
}

.sidebar #sidebarBoxAlliance .content .allianceNewsClock {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 2px;
    direction: ltr;
    unicode-bidi: isolate;
}

.sidebar #sidebarBoxAlliance .content .allianceNewsPeriod,
.sidebar #sidebarBoxAlliance .content .allianceNewsDay {
    direction: rtl;
    unicode-bidi: isolate;
}

.sidebar #sidebarBoxAlliance .content .allianceNewsDateDivider {
    display: inline-block;
    flex: 0 0 1px;
    width: 1px;
    height: 10px;
    border-radius: 1px;
    background: currentColor;
    opacity: .42;
}

.sidebar #sidebarBoxAlliance .content .allianceNewsText {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.rtl div#build.gid24 .researches .research .celebrationFooter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
    direction: rtl;
}

body.rtl div#build.gid24 .researches .research .celebrationFooter .celebrationDuration {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0;
    direction: ltr;
}

body.rtl div#build.gid24 .researches .research .celebrationFooter .celebrationDuration i {
    flex: 0 0 auto;
    margin: 0;
}

body.rtl div#build.gid24 .researches .research .celebrationFooter .celebrationDuration .value {
    direction: ltr;
}

body.rtl div#build.gid24 .researches .research .celebrationFooter .celebrationCta {
    margin-top: 0;
}

body.rtl div#build.gid24 .researches .research .celebrationFooter .celebrationCta button {
    float: none;
    margin: 0 !important;
}

body.rtl div#build.gid24 .researches .research .celebrationFooter button.celebrationButton {
    min-width: 58px;
    text-align: center;
}

body.alliance div#content.alliance ul.allianceOptionList {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 12px 0 14px;
    padding: 0;
    list-style: none;
    direction: rtl;
}

/* Alliance action feedback is rendered after the action form, directly
   beneath its submit button. */
body.alliance div#content.alliance .trav47-alliance-operation-message {
    clear: both;
    display: block;
    width: 100%;
    margin: 9px 0 0;
    padding: 7px 10px;
    border: 1px solid #b9cdaa;
    border-radius: 4px;
    color: #3f6428;
    background: #edf5e7;
    font: 700 12px/18px Tahoma, Arial, sans-serif;
    text-align: center;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47-alliance-operation-message.error {
    border-color: #d9aaa3;
    color: #9b3028;
    background: #fae9e6;
}

body.alliance div#content.alliance form.trav47AllianceInviteForm {
    width: 100%;
    margin: 0;
    padding: 2px 0 0;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceInviteField {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    overflow: hidden;
    border: 1px solid #c3d0b8;
    border-radius: 5px;
    background: #f8faf5;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceInviteField label {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 7px;
    border-left: 1px solid #c3d0b8;
    background: #e7efe1;
    color: #405536;
    font: 700 12px/19px Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceInviteField input.text {
    display: block;
    width: calc(100% - 14px);
    min-height: 34px;
    margin: 7px;
    padding: 6px 10px;
    border: 1px solid #9fb18f;
    border-radius: 5px;
    outline: 0;
    background: #fff;
    color: #34432b;
    font: 12px/20px Tahoma, Arial, sans-serif;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(54, 70, 45, .09);
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceInviteField input.text:focus {
    border-color: #6f963e;
    box-shadow: 0 0 0 2px rgba(111, 150, 62, .18), inset 0 1px 2px rgba(54, 70, 45, .08);
}

body.alliance div#content.alliance .trav47AllianceInviteSubmit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0 0;
}

body.alliance div#content.alliance .trav47AllianceInviteSubmit > button {
    float: none;
    min-width: 155px;
    margin: 0;
}

body.alliance div#content.alliance .trav47AllianceInviteSubmit .button-content {
    padding-inline: 9px;
    font-size: 12px;
    white-space: nowrap;
}

body.alliance div#content.alliance .trav47AllianceInviteFeedback {
    width: 100%;
    margin: 9px 0 0;
}

body.alliance div#content.alliance .trav47AllianceQuitFeedback {
    clear: both;
    width: 100%;
    margin: 9px 0 0;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceInvitationsCard {
    width: 100%;
    margin: 0 0 22px;
    overflow: hidden;
    border: 1px solid #c6d1bd;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
}

body.alliance div#content.alliance table.trav47AllianceInvitationsTable {
    width: 100%;
    margin: 0;
    border: 0;
    table-layout: fixed;
}

body.alliance div#content.alliance table.trav47AllianceInvitationsTable td {
    height: 38px;
    padding: 6px 9px;
    border: 0;
    border-bottom: 1px solid #e0e6da;
    background: #fff;
    vertical-align: middle;
    box-sizing: border-box;
}

body.alliance div#content.alliance table.trav47AllianceInvitationsTable tr:last-child td {
    border-bottom: 0;
}

body.alliance div#content.alliance table.trav47AllianceInvitationsTable td.abo {
    width: 42px;
    text-align: center;
}

body.alliance div#content.alliance .trav47AllianceInvitedPlayer {
    display: block;
    overflow: hidden;
    color: #5f861f;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.alliance div#content.alliance button.trav47AllianceInvitationCancel {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0 0 2px;
    border: 1px solid #ca9d94;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff 0, #f3ded9 100%);
    color: #a33a2d;
    font: 700 18px/20px Arial, sans-serif;
    box-shadow: inset 0 1px 0 #fff;
    cursor: pointer;
    box-sizing: border-box;
}

body.alliance div#content.alliance button.trav47AllianceInvitationCancel:hover,
body.alliance div#content.alliance button.trav47AllianceInvitationCancel:focus-visible {
    border-color: #b66d61;
    outline: 0;
    background: #f5d3cc;
}

body.alliance div#content.alliance .trav47AllianceDescriptionTools {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    margin: 8px 0 0;
    gap: 8px;
    direction: rtl;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceMedalsSwitchWrap,
body.alliance div#content.alliance .trav47AllianceGuideTool {
    position: relative;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceMedalsSwitchWrap #switchMedals,
body.alliance div#content.alliance button.trav47AllianceGuideToggle {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #a9bb98;
    border-radius: 5px;
    background: linear-gradient(180deg, #f8fbf5 0, #e2edd9 100%);
    color: #405d2d;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(61, 78, 44, .12);
    cursor: pointer;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceMedalsSwitchWrap #switchMedals:hover,
body.alliance div#content.alliance .trav47AllianceMedalsSwitchWrap #switchMedals:focus-visible,
body.alliance div#content.alliance button.trav47AllianceGuideToggle:hover,
body.alliance div#content.alliance button.trav47AllianceGuideToggle:focus-visible,
body.alliance div#content.alliance button.trav47AllianceGuideToggle.trav47AllianceGuideToggleOpen {
    border-color: #76974f;
    outline: 0;
    background: linear-gradient(180deg, #fbfdf8 0, #d9e9cb 100%);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 2px rgba(111, 150, 62, .14);
}

body.alliance div#content.alliance .trav47AllianceGuideArrow {
    width: 0;
    height: 0;
    margin-right: 7px;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 5px solid #58783e;
    transition: transform .15s ease;
}

body.alliance div#content.alliance .trav47AllianceGuideToggleOpen .trav47AllianceGuideArrow {
    transform: rotate(180deg);
}

body.alliance div#content.alliance .trav47AllianceGuideMenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: grid;
    width: 100%;
    min-width: 132px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid #aebda1;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(48, 60, 38, .22);
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceGuideMenu[hidden] {
    display: none !important;
}

body.alliance div#content.alliance .trav47AllianceGuideMenu button {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    min-height: 29px;
    margin: 0;
    padding: 5px 8px;
    border: 0;
    border-bottom: 1px solid #e1e8dc;
    border-radius: 0;
    background: #fff;
    color: #3d5230;
    font: 700 11px/19px Tahoma, Arial, sans-serif;
    text-align: right;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceGuideMenu button:last-child {
    border-bottom: 0;
}

body.alliance div#content.alliance .trav47AllianceGuideMenu button:hover,
body.alliance div#content.alliance .trav47AllianceGuideMenu button:focus-visible {
    outline: 0;
    background: #edf5e7;
    color: #5d7f36;
}

body.alliance div#content.alliance .trav47AllianceGuideMenu button.trav47AllianceGuideOptionUsed {
    background: #eeeeec;
    color: #8a8a84;
    cursor: default;
}

body.alliance div#content.alliance .trav47AllianceMedalsPicker {
    width: 100%;
    margin: 8px 0 10px;
    padding: 9px;
    border: 1px solid #c9d4c1;
    border-radius: 5px;
    background: #f4f7f1;
    box-sizing: border-box;
}

body.alliance div#content.alliance .trav47AllianceMedalsGrid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 8px;
    direction: rtl;
}

body.alliance div#content.alliance button.trav47AllianceMedalButton {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex: 0 0 82px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 94px;
    margin: 0;
    padding: 6px 5px 5px;
    overflow: hidden;
    border: 1px solid #bdceae;
    border-radius: 5px;
    background: linear-gradient(180deg, #fbfdf8 0, #e7efe0 100%);
    color: #46652b;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(61, 78, 44, .13);
    cursor: pointer;
    box-sizing: border-box;
}

body.alliance div#content.alliance button.trav47AllianceMedalButton:hover,
body.alliance div#content.alliance button.trav47AllianceMedalButton:focus-visible {
    border-color: #7ea050;
    outline: 0;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 2px rgba(111, 150, 62, .16);
}

body.alliance div#content.alliance button.trav47AllianceMedalButton.trav47AllianceMedalButtonUsed {
    border-color: #c7c7c7;
    background: linear-gradient(180deg, #f2f2f2 0, #dddddd 100%);
    color: #777;
    box-shadow: inset 0 1px 0 #fff;
    cursor: default;
}

body.alliance div#content.alliance .trav47AllianceMedalImage {
    display: block;
    width: 42px;
    height: 58px;
    margin: 0 auto 4px;
    object-fit: contain;
}

body.alliance div#content.alliance .trav47AllianceMedalButtonUsed .trav47AllianceMedalImage {
    filter: grayscale(1) saturate(.2);
    opacity: .38;
}

body.alliance div#content.alliance .trav47AllianceMedalName {
    display: block;
    width: 100%;
    overflow: hidden;
    color: inherit;
    font: 700 11px/15px Tahoma, Arial, sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.alliance div#content.alliance .trav47AllianceMedalsEmpty {
    margin: 0;
    padding: 9px;
    color: #687364;
    font: 12px/18px Tahoma, Arial, sans-serif;
    text-align: center;
}

body.alliance div#content.alliance ul.allianceOptionList li {
    justify-self: center;
    width: 50%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body.alliance div#content.alliance ul.allianceOptionList .allianceOptionButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid rgba(116, 91, 54, 0.3);
    border-radius: 6px;
    color: #332417;
    background: linear-gradient(to bottom, #fffaf0, #efe3c6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 1px 3px rgba(68, 45, 24, 0.12);
    font-weight: bold;
    line-height: 1.35;
    text-align: right;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

body.alliance div#content.alliance ul.allianceOptionList .allianceOptionButton:hover,
body.alliance div#content.alliance ul.allianceOptionList .allianceOptionButton:focus-visible {
    border-color: rgba(94, 132, 35, 0.72);
    background: linear-gradient(to bottom, #fffdf5, #e6f0d0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 7px rgba(65, 91, 26, 0.2);
    transform: translateY(-1px);
}

body.alliance div#content.alliance ul.allianceOptionList span {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.alliance div#content.alliance .trav47AllianceOptionsBackWrap {
    margin: 10px 0 6px;
    text-align: left;
}

body.alliance div#content.alliance .trav47AllianceOptionsBack {
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #8d806c;
    border-radius: 5px;
    color: #40392f;
    background: linear-gradient(to bottom, #fffdf7, #e6ded0);
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(54, 42, 29, .15);
    font-weight: bold;
    cursor: pointer;
}

body.alliance div#content.alliance p.allianceOptionSubmit {
    margin: 10px 0 0;
    text-align: center;
}

body.alliance div#content.alliance p.allianceOptionSubmit button#btn_ok.textButtonV1.green {
    float: none;
    min-width: 118px;
    min-height: 32px;
    padding: 0 18px;
    border: 1px solid #356f12;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(to bottom, #76ad2f, #3f7d13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 6px rgba(44, 70, 15, 0.28);
    text-shadow: 0 1px 1px rgba(28, 49, 9, 0.65);
    cursor: pointer;
}

body.alliance div#content.alliance p.allianceOptionSubmit button#btn_ok.textButtonV1.green:hover,
body.alliance div#content.alliance p.allianceOptionSubmit button#btn_ok.textButtonV1.green:focus {
    background: linear-gradient(to bottom, #86bd39, #4b8d18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 3px 9px rgba(44, 70, 15, 0.32);
}

body.alliance div#content.alliance p.allianceOptionSubmit button#btn_ok.textButtonV1.green:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 3px rgba(29, 47, 10, 0.32);
}

body.alliance div#content.alliance p.allianceOptionSubmit button#btn_ok.textButtonV1.green > .button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
}

body.alliance div#content.alliance p.allianceOptionSubmit button#btn_ok.textButtonV1.green .button-content {
    color: #fff;
    font-weight: bold;
}

.travian-mobile-quick-access {
    display: none;
}

/* Sidebar info notices: Arabic text, readable timers, and real premium buttons. */
.sidebar #sidebarBoxInfobox .content ul li {
    direction: rtl;
    text-align: right;
}

.sidebar #sidebarBoxInfobox .content ul li p.trav47InfoNotice {
    margin: 0;
    line-height: 1.35;
}

.sidebar #sidebarBoxInfobox .content ul li .timer {
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: bold;
    white-space: nowrap;
}

.sidebar #sidebarBoxInfobox .content button.productionBoostButton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-width: 82px;
    height: 25px;
    margin: 6px auto 0 0;
    padding: 4px 13px;
    box-sizing: border-box;
    border: 1px solid #82631d !important;
    border-radius: 5px !important;
    background-color: #e6ce64 !important;
    background-image: linear-gradient(to bottom, #fdf5cb 0%, #f8eeb0 40%, #f0dc7c 45%, #e6ce64 85%, #caac50 100%) !important;
    box-shadow: inset 0 0 1px 1px rgba(82, 67, 32, 0.5), inset 0 2px 2px 1px #faf8ec, inset 0 -2px 2px 0 #a08939 !important;
    color: #47340e !important;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 248, 206, 0.72);
    line-height: 15px;
    vertical-align: middle;
    cursor: pointer;
}

.sidebar #sidebarBoxInfobox .content button.productionBoostButton:hover,
.sidebar #sidebarBoxInfobox .content button.productionBoostButton:focus {
    border-color: #665722 !important;
    background-color: #f8eeb0 !important;
    background-image: linear-gradient(to bottom, #fff8d7 0%, #f5df83 48%, #d4ad38 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(88, 63, 14, 0.3) !important;
}

.sidebar #sidebarBoxInfobox .content button.productionBoostButton:active {
    background-image: linear-gradient(to top, #f0dc7c, #caac50) !important;
    box-shadow: inset 0 2px 2px 1px #77652c, inset 0 -2px 2px 0 #faf8ec !important;
}

.sidebar #sidebarBoxInfobox .content button.productionBoostButton .button-container,
.sidebar #sidebarBoxInfobox .content button.productionBoostButton .button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    line-height: 15px;
    white-space: nowrap;
}

.sidebar #sidebarBoxInfobox .content button.productionBoostButton .button-background {
    display: none;
}

.sidebar #sidebarBoxInfobox .content button.productionBoostButton .goldIcon {
    flex: 0 0 auto;
    margin: 0 4px 0 2px;
}

.sidebar #sidebarBoxInfobox .content button.infoboxCancelDeleteButton {
    margin: 0 0 0 5px;
    vertical-align: middle;
}

.sidebar #sidebarBoxInfobox .content .infoboxDeleteButton {
    width: 24px;
    height: 24px;
}

/* Natar endgame progress: a compact, clickable status card in the infobox. */
.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderNotice {
    margin: 6px 0 8px !important;
    padding: 0 !important;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px;
}

.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderNotice a.trav47NatarWonderLink {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 7px 9px !important;
    margin: 0 !important;
    box-sizing: border-box;
    color: #fff !important;
    font: 700 11px/1.45 Tahoma, Arial, sans-serif;
    text-decoration: none !important;
    background: linear-gradient(135deg, #a52b31 0%, #7e171d 52%, #5b0d13 100%);
    border: 1px solid #4c090e;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 5px rgba(71, 7, 13, .3);
    text-shadow: 0 1px 1px rgba(41, 0, 4, .7);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderNotice a.trav47NatarWonderLink:hover,
.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderNotice a.trav47NatarWonderLink:focus {
    color: #fff !important;
    filter: brightness(1.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 7px rgba(71, 7, 13, .38);
    outline: 0;
}

.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderNotice a.trav47NatarWonderLink:active {
    transform: translateY(1px);
}

.trav47NatarWonderStatus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.trav47NatarWonderText {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.trav47NatarWonderText strong,
.trav47NatarWonderText small {
    color: #fff;
    line-height: 1.25;
}

.trav47NatarWonderText strong {
    font-size: 11px;
}

.trav47NatarWonderText small {
    font-size: 9px;
    font-weight: 400;
    opacity: .88;
}

.trav47NatarWonderPulse {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: #ffb9b9;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 216, 216, .13), 0 0 7px rgba(255, 220, 220, .6);
}

.trav47NatarWonderLevel {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    color: rgba(255, 255, 255, .88);
    font-size: 10px;
    white-space: nowrap;
    background: rgba(44, 0, 4, .28);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
}

.trav47NatarWonderLevel strong {
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderCountdown {
    margin: 5px 0 7px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderCountdown > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-height: 34px;
    margin: 0 !important;
    padding: 6px 8px !important;
    box-sizing: border-box;
    color: #5b3a0b !important;
    font: 700 10px/1.45 Tahoma, Arial, sans-serif;
    text-decoration: none !important;
    background: linear-gradient(135deg, #fff4c6 0%, #ead99b 100%);
    border: 1px solid #b69746;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 3px rgba(92, 62, 10, .18);
}

.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderCountdown > a:hover,
.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderCountdown > a:focus {
    color: #432901 !important;
    filter: brightness(1.04);
    outline: 0;
}

.sidebar #sidebarBoxInfobox .content ul li.trav47NatarWonderCountdown .timer {
    flex: 0 0 auto;
    padding: 2px 6px;
    color: #fff !important;
    background: #8d2a25;
    border-radius: 9px;
    text-shadow: 0 1px 1px rgba(50, 0, 0, .55);
}

body.village2 div.village2 div#map_details.dorf2MobileMovements {
    display: none;
}

/* Desktop V3 village backgrounds must keep their original artboard size.
   Some hosted setups resize/optimize these images or let them repeat, which
   breaks the visual alignment with resource fields and village buildings. */
@media screen and (min-width: 621px) {
    body.buildingsV3.perspectiveResources div#background {
        background-image: url("../../../images/village/backgrounds/resources-modern.jpg") !important;
        background-repeat: no-repeat !important;
        background-size: 2716px 894px !important;
        background-position: center top !important;
    }

    body.buildingsV3.perspectiveBuildings div#background {
        background-image: url("../../../images/village/backgrounds/buildings-modern.jpg") !important;
        background-repeat: no-repeat !important;
        background-size: 4029px 1509px !important;
        background-position: calc(50% - 84px) top !important;
    }

    body.buildingsV3.rtl.perspectiveBuildings div#background {
        background-position: calc(50% + 84px) top !important;
    }
}

/* Message composer: keep the BB toolbar neutral and make resource choices visible. */
body.message div.messages #bbEditor #message_toolbar.bbToolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    background: #e6e6e6 !important;
    overflow: visible;
    box-sizing: border-box;
}

body.message div.messages #bbEditor #message_container .boxes,
body.message div.messages #bbEditor #message_container .boxes-contents {
    overflow: visible !important;
}

body.message div.messages #bbEditor #message_toolbar .clear {
    display: none;
}

body.message div.messages #bbEditor #message_toolbar button.icon.bbButton {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b9b9b9 !important;
    border-radius: 3px;
    background: #dddddd linear-gradient(to bottom, #f7f7f7, #d5d5d5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 1px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    text-align: center;
}

body.message div.messages #bbEditor #message_toolbar button.icon.bbButton:hover,
body.message div.messages #bbEditor #message_toolbar button.icon.bbButton:focus {
    border-color: #9f9f9f !important;
    background: #eeeeee linear-gradient(to bottom, #ffffff, #dfdfdf) !important;
}

body.message div.messages #bbEditor #message_toolbar button.icon.bbButton.iconActive {
    border-color: #8f8f8f !important;
    background: #cfcfcf linear-gradient(to bottom, #d8d8d8, #bfbfbf) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
}

body.message div.messages #bbEditor #message_toolbar button.icon.bbButton img {
    position: static !important;
    display: block;
    flex: 0 0 auto;
    margin: 0 !important;
    background-image: url("../../../images/messages/ui/bb_buttons.gif") !important;
    background-repeat: no-repeat;
}

body.message div.messages #bbEditor #message_previewButton {
    margin-right: auto !important;
}

body.message div.messages #bbEditor #message_toolbarWindows {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    z-index: 40;
}

body.message div.messages #bbEditor #message_toolbarWindows > div {
    position: absolute;
    top: 5px;
    right: 0;
    left: auto;
    margin: 0 !important;
    padding: 6px;
    border: 1px solid #b7b7b7 !important;
    border-radius: 4px;
    background: #efefef !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    max-width: 440px !important;
    direction: rtl;
    box-sizing: border-box;
}

body.message div.messages #bbEditor #message_resources {
    min-width: 136px;
    white-space: nowrap;
}

body.message div.messages #bbEditor #message_resources a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 2px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #ffffff;
    vertical-align: top;
}

body.message div.messages #bbEditor #message_resources a:hover,
body.message div.messages #bbEditor #message_resources a:focus {
    border-color: #9f9f9f;
    background: #f7f7f7;
}

body.message div.messages #bbEditor #message_resources img {
    display: block;
    margin: 0 !important;
    background-repeat: no-repeat;
    background-position: center center;
}

body.message div.messages #bbEditor #message_resources img.r1 {
    width: 16px;
    height: 12px;
    background-image: url("../../../images/icons/resources/lumber_tiny.png");
}

body.message div.messages #bbEditor #message_resources img.r2 {
    width: 16px;
    height: 12px;
    background-image: url("../../../images/icons/resources/clay_tiny.png");
}

body.message div.messages #bbEditor #message_resources img.r3 {
    width: 16px;
    height: 12px;
    background-image: url("../../../images/icons/resources/iron_tiny.png");
}

body.message div.messages #bbEditor #message_resources img.r4 {
    width: 16px;
    height: 16px;
    background-image: url("../../../images/icons/resources/crop_small.png");
}

body.message div.messages #bbEditor #message_smilies a,
body.message div.messages #bbEditor #message_troops a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
}

/* Gold Club popup rules live in css_rtl/payment/paymentPopups.css.
 * Keep this stylesheet free of legacy overrides so only one layout is applied. */
/* Rally point pages must remain scrollable below the fixed mobile navigation. */
@media screen and (max-width: 620px) {
    html:has(body.mobileOptimized.build),
    html#mainLayout,
    html,
    body.mobileOptimized.build,
    body.build {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        scrollbar-width: none;
    }

    html:has(body.mobileOptimized.build)::-webkit-scrollbar,
    html#mainLayout::-webkit-scrollbar,
    html::-webkit-scrollbar,
    body.mobileOptimized.build::-webkit-scrollbar,
    body.build::-webkit-scrollbar {
        display: none;
    }

    body.mobileOptimized.build #content,
    body.mobileOptimized.build #content #build.gid16,
    body.build #content,
    body.build #content #build.gid16 {
        height: auto !important;
        min-height: 100%;
        overflow: visible !important;
    }

    body.mobileOptimized.build #content #build.gid16,
    body.build #content #build.gid16 {
        padding-bottom: 84px;
    }

    html#mainLayout {
        overflow: visible !important;
    }

    html#mainLayout:has(body.build.travianMobile.mobileOptimized) {
        overflow: visible !important;
    }

    body.mobileOptimized.build,
    body.build {
        overflow-y: auto !important;
    }
}

/* Obsolete desktop simulator skin removed; the shared phone skin is loaded below fixes.css. */

/* Unified desktop shop surface: one dialog, one panel, one tab treatment. */
@media screen and (min-width: 761px) {
    .dialog.trav47PaymentShop {
        width: 960px !important;
        max-width: calc(100vw - 40px) !important;
        background: transparent !important;
        color: #28343a;
    }

    .dialog.trav47PaymentShop .dialog-container,
    .dialog.trav47PaymentShop [class^="dialog-background"],
    .dialog.trav47PaymentShop [class*=" dialog-background"] {
        background: transparent !important;
    }

    .dialog.trav47PaymentShop [class^="dialog-background"],
    .dialog.trav47PaymentShop [class*=" dialog-background"] {
        display: none !important;
    }

    .dialog.trav47PaymentShop .dialog-contents,
    .dialog.trav47PaymentShop .dialogContents {
        width: 940px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border: 1px solid #77838a;
        border-radius: 6px;
        background: #eef1ef;
        box-shadow: 0 16px 38px rgba(9, 18, 20, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .dialog.trav47PaymentShop div#paymentWizard {
        min-height: 510px;
        padding: 75px 22px 22px;
        background: transparent;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard .trav47PaymentClose {
        top: 17px;
        right: auto;
        left: 18px;
        width: 30px;
        height: 30px;
        border: 1px solid #aeb8b7;
        border-radius: 4px;
        background: #f8faf8;
        color: #44545a;
        box-shadow: none;
        font-size: 22px;
    }

    .dialog.trav47PaymentShop div#paymentWizard .trav47PaymentClose:hover {
        border-color: #8c3f38;
        background: #f8e7e4;
        color: #8c3f38;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header {
        top: 58px;
        right: 22px;
        left: 22px;
        height: 40px !important;
        overflow: visible;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header ul {
        gap: 0;
        height: 40px !important;
        padding: 3px;
        border: 1px solid #c8d0ce;
        border-radius: 5px;
        background: #dfe5e2;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header li:not(.clear),
    .dialog.trav47PaymentShop div#paymentWizard .header li.active {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        height: 32px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header .tabButton,
    .dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton {
        width: 100%;
        min-width: 0;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px;
        border: 0;
        border-radius: 3px;
        background: transparent;
        box-shadow: none;
        color: #536167 !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton {
        background: #29685f;
        color: #ffffff !important;
        box-shadow: 0 1px 3px rgba(24, 70, 63, 0.32);
    }

    .dialog.trav47PaymentShop div#paymentWizard .header .tabButton:hover {
        background: rgba(41, 104, 95, 0.12);
        color: #245c55 !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton:hover {
        background: #29685f;
        color: #ffffff !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header .tabButton .text {
        color: #536167 !important;
        font-size: 14px;
        font-weight: 700;
        text-shadow: none !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton .text {
        color: #ffffff !important;
        text-shadow: none !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .trav47PaymentTabIcon {
        color: #d19a2d;
    }

    .dialog.trav47PaymentShop div#paymentWizard .accountBalance {
        top: 22px !important;
        left: 58px !important;
        min-width: 145px;
        padding: 5px 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #425258;
        box-shadow: none;
        font-size: 14px;
        line-height: 22px;
    }

    .dialog.trav47PaymentShop div#paymentWizard .accountBalance .trav47GoldBalanceAmount {
        color: #1f3036;
    }

    .dialog.trav47PaymentShop div#paymentWizard .contentWrapper,
    .dialog.trav47PaymentShop div#paymentWizard .contentArea,
    .dialog.trav47PaymentShop div#paymentWizard .infoArea,
    .dialog.trav47PaymentShop div#paymentWizard .contentBorder,
    .dialog.trav47PaymentShop div#paymentWizard .contentBorder-contents {
        float: none;
        width: 100%;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopGoldArea {
        min-height: 390px;
        padding: 0;
    }

    .trav47ShopWizard .trav47ShopGoldArea h4 {
        margin: 0 0 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid #d6ddda;
        color: #35464b;
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        text-align: right;
        text-shadow: none;
    }

    /* Plus features: right-side category list with a clean vertical feature stack. */
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentWrapper {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        direction: rtl;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea {
        grid-column: 1;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea {
        grid-column: 2;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-tl,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-tr,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-tc,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-ml,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-mr,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-mc,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-bl,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-br,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-bc,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-tl,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-tr,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-tc,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-ml,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-mr,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-mc,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-bl,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-br,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea .contentBorder-bc {
        display: none !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-contents {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a {
        display: block;
        width: 100%;
        text-decoration: none;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep.active {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100% !important;
        min-height: 42px;
        margin: 0 !important;
        padding: 0 13px;
        border: 1px solid #bdc8c4;
        border-radius: 4px;
        background: #e3e9e6;
        color: #4b5d61;
        box-shadow: none;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep.active {
        border-color: #2d766b;
        background: #2d766b;
        color: #ffffff;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStepLabel {
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        text-align: right;
        text-shadow: none;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStepContent {
        display: none;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentPopupDialogWrapper {
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentWizardMenu {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentWizardMenu.hide {
        display: none;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .feature,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking {
        align-self: stretch;
        width: 100% !important;
        max-width: none !important;
        min-height: 72px;
        margin: 0 !important;
        padding: 10px 12px;
        overflow: hidden;
        border: 1px solid #c7b071;
        border-radius: 4px;
        background: #f7edc9;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking .featureContent {
        display: grid;
        direction: rtl;
        grid-template-columns: 92px minmax(0, 1fr);
        grid-template-areas:
            "action title"
            "details description";
        align-items: center;
        column-gap: 12px;
        width: 100% !important;
        height: auto !important;
        min-height: 50px;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking .featureTitle {
        grid-area: title;
        margin: 0;
        color: #44331c;
        font-size: 15px;
        line-height: 18px;
        text-align: right;
        direction: rtl;
        text-shadow: none;
        white-space: normal;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking .featureRemainingTime {
        position: static !important;
        grid-area: description;
        min-width: 0;
        margin: 0;
        color: #665236;
        font-size: 12px;
        line-height: 16px;
        text-align: right;
        direction: rtl;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking .featureDuration,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking .featureRenewal {
        position: static !important;
        grid-area: details;
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: stretch;
        width: auto;
        margin: 0;
        color: #776341;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        direction: rtl;
        white-space: normal;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking .featureButton {
        position: static !important;
        grid-area: action;
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center;
        align-self: center;
        margin: 0;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking .featureButton button.gold,
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .featureBooking .featureButton button.green {
        min-width: 76px;
        height: 28px;
        padding: 4px 10px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureBooking {
        height: auto !important;
        min-height: 72px;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureBooking .featureContent {
        grid-template-areas:
            "action resources"
            "details resources";
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table {
        grid-area: resources;
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table tbody {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        width: 100%;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table tr {
        display: contents;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td {
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        height: auto !important;
        padding: 4px 7px !important;
        border: 0 !important;
        direction: rtl;
        white-space: nowrap;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td:has(.r2),
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td:has(.r3),
    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td:has(.r4) {
        border-inline-start: 1px solid rgba(83, 63, 38, 0.24) !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td:has(.r1) {
        background: #e6d2ae;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td:has(.r2) {
        background: #e2c1aa;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td:has(.r3) {
        background: #d4dcdb;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td:has(.r4) {
        background: #dce3bb;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .inlineIcon.resources {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: #514026;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .inlineIcon.resources i {
        flex: 0 0 20px;
        width: 20px;
        height: 15px;
        background-size: 20px auto;
    }

    .trav47ShopPackageGrid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        max-width: 880px;
        margin: 0 auto;
        gap: 14px;
    }

    .trav47GoldPackage {
        position: relative;
        min-height: 286px;
        padding: 13px 10px 10px;
        gap: 6px;
        overflow: hidden;
        border: 2px solid #d19a2b;
        border-radius: 5px;
        background: radial-gradient(circle at 50% 54%, rgba(91, 232, 224, 0.28) 0%, rgba(91, 232, 224, 0) 52%), linear-gradient(180deg, #006066 0%, #004c52 100%);
        color: #ffffff !important;
        box-shadow: 0 3px 8px rgba(24, 39, 39, 0.2);
        isolation: isolate;
        transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    }

    .trav47GoldPackage:nth-child(3n + 1) {
        border-color: #e0ad35;
        background: radial-gradient(circle at 50% 54%, rgba(255, 232, 136, 0.32) 0%, rgba(255, 232, 136, 0) 50%), linear-gradient(180deg, #bd7b12 0%, #d79c25 54%, #aa6809 100%);
    }

    .trav47GoldPackage:hover {
        border-color: #d0ad61;
        background: radial-gradient(circle at 50% 54%, rgba(91, 232, 224, 0.28) 0%, rgba(91, 232, 224, 0) 52%), linear-gradient(180deg, #006066 0%, #004c52 100%);
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(24, 39, 39, 0.28);
    }

    .trav47GoldPackage:nth-child(3n + 1):hover {
        background: radial-gradient(circle at 50% 54%, rgba(255, 232, 136, 0.32) 0%, rgba(255, 232, 136, 0) 50%), linear-gradient(180deg, #bd7b12 0%, #d79c25 54%, #aa6809 100%);
    }

    .trav47GoldPackage:active {
        transform: translateY(0) scale(0.99);
        box-shadow: inset 0 2px 6px rgba(4, 13, 13, 0.28);
    }

    .trav47GoldPackageGlow {
        position: absolute;
        z-index: 0;
        top: 52px;
        right: 50%;
        width: 188px;
        height: 188px;
        background: url("../../../images/glare.png") center / contain no-repeat;
        opacity: 0.84;
        pointer-events: none;
        transform: translateX(50%);
    }

    .trav47GoldPackageName,
    .trav47GoldPackageButton {
        display: none;
    }

    .trav47GoldPackageImage {
        position: relative;
        z-index: 1;
        order: 2;
        min-height: 161px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .trav47GoldPackageImage img {
        width: 100%;
        max-width: 146px;
        max-height: 150px;
        object-fit: contain;
        filter: drop-shadow(0 3px 3px rgba(14, 11, 4, 0.28));
    }

    .trav47GoldPackageMeta {
        position: relative;
        z-index: 1;
        order: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        direction: ltr;
        color: #f0d18a;
        font-size: 24px;
        font-weight: 800;
        line-height: 30px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    }

    .trav47GoldPackageMeta .trav47GoldPackageGoldIcon {
        display: block;
        flex: 0 0 25px;
        width: 25px;
        height: 25px;
        margin: 0 0 0 6px;
        object-fit: contain;
    }

    .trav47GoldPackagePrice {
        position: relative;
        z-index: 1;
        order: 3;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 35px;
        margin-top: auto;
        margin-right: -10px;
        margin-bottom: -10px;
        margin-left: -10px;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(10, 22, 23, 0.5);
        color: #e9e1cc;
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
        text-shadow: none;
    }
}

/* Desktop report headers keep the outcome layers compact and readable.
 * The lower icon identifies the report result; the upper icon remains the
 * loss/victory state. Both stay contained by the coloured role header. */
@media (min-width: 801px) {
    #reportWrapper .body .role .header .outcome {
        width: 48px !important;
        min-width: 48px !important;
        height: 36px !important;
        overflow: visible;
    }

    #reportWrapper .body .role .header .outcome > img.loot,
    #reportWrapper .body .role .header .outcome > img.skull {
        position: absolute !important;
        z-index: 1;
        left: 4px !important;
        right: auto !important;
        bottom: 1px !important;
        width: 28px !important;
        max-width: 28px !important;
        height: 32px !important;
        max-height: 32px !important;
    }

    #reportWrapper .body .role .header .outcome > img.losses,
    #reportWrapper .body .role .header .outcome > svg.losses {
        z-index: 2;
        top: 1px !important;
        left: 21px !important;
        right: auto !important;
        bottom: auto !important;
        width: 24px !important;
        max-width: 24px !important;
        height: 30px !important;
        max-height: 30px !important;
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 1px 2px rgba(42, 25, 12, 0.55));
    }
}

/* Keep report-result layers compact on phones as well. */
@media (max-width: 800px) {
    #reportWrapper .body .role .header .outcome {
        width: 48px !important;
        min-width: 48px !important;
        height: 36px !important;
        overflow: visible;
    }

    #reportWrapper .body .role .header .outcome > img.loot,
    #reportWrapper .body .role .header .outcome > img.skull {
        position: absolute !important;
        z-index: 1;
        left: 4px !important;
        right: auto !important;
        bottom: 1px !important;
        width: 28px !important;
        max-width: 28px !important;
        height: 32px !important;
        max-height: 32px !important;
    }

    #reportWrapper .body .role .header .outcome > img.losses,
    #reportWrapper .body .role .header .outcome > svg.losses {
        position: absolute !important;
        z-index: 2;
        top: 1px !important;
        left: 21px !important;
        right: auto !important;
        bottom: auto !important;
        width: 24px !important;
        max-width: 24px !important;
        height: 30px !important;
        max-height: 30px !important;
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 1px 2px rgba(42, 25, 12, 0.55));
    }

    #reportWrapper .body .role .troopHeadline .toolList .iconButton {
        width: 26px;
        height: 26px;
        overflow: hidden;
    }

    #reportWrapper .body .role .troopHeadline .toolList .iconButton i.repeatAttack {
        top: 3px !important;
    }
}

/* Reports use one dedicated mobile scroller so vertical swipes are not
 * swallowed by the page root or by the horizontal tab bar. */
@media screen and (max-width: 800px) {
    body.reports: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.reports:not(.village1):not(.village2) #center::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    body.reports:not(.village1):not(.village2) #center #contentOuterContainer,
    body.reports:not(.village1):not(.village2) #center #contentOuterContainer .contentContainer {
        height: auto !important;
        overflow: visible !important;
    }
}

/* Pin every report-result stack to the physical left edge of its header. */
#reportWrapper .body .role .header .outcome {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
}

#reportWrapper .body .role .header .outcome > img.loot,
#reportWrapper .body .role .header .outcome > img.skull {
    left: 0 !important;
    right: auto !important;
}

/* Save a report as a PNG beside the report-delete control. */
div.reports #reportWrapper .travianReportExportButton {
    position: absolute;
    top: 0;
    left: 65px;
    z-index: 50;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
    margin: 0;
    padding: 0 !important;
    border: 1px solid #523817 !important;
    border-radius: 4px !important;
    background: linear-gradient(#d6b35d, #8d6524) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
    color: #fff8dc;
    cursor: pointer;
}

div.reports #reportWrapper .travianReportExportButton:hover,
div.reports #reportWrapper .travianReportExportButton:focus {
    background: linear-gradient(#e7c975, #a6772b) !important;
}

div.reports #reportWrapper .travianReportExportButton:disabled {
    cursor: wait;
    opacity: 0.7;
}

div.reports #reportWrapper .travianReportExportButton:before,
div.reports #reportWrapper .travianReportExportButton:after {
    display: none !important;
}

div.reports #reportWrapper .travianReportExportButton svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: #3c260f;
    filter: drop-shadow(0 1px 0 rgba(255, 245, 205, 0.42));
}

@media screen and (max-width: 800px) {
    body.reports #reportWrapper .role.attacker > .header > h2,
    body.reports #reportWrapper .role.defender > .header > h2 {
        font-size: 18.5px;
    }
}

/* The defender outcome is a standalone shield, not a status layer. */
#reportWrapper .body .role.defender .header .outcome > img.losses,
#reportWrapper .body .role.defender .header .outcome > svg.losses {
    z-index: 1 !important;
    top: 2px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 28px !important;
    max-width: 28px !important;
    height: 32px !important;
    max-height: 32px !important;
    filter: none !important;
}

/* Preserve the skull's native proportions so it remains sharp. */
#reportWrapper .body .role.attacker .header .outcome > img.loot,
#reportWrapper .body .role.attacker .header .outcome > img.skull {
    height: 35px !important;
    max-height: 35px !important;
}

/* Regular village panel: keep every count directly beside its unit label,
   even when a million-sized count widens the number column. */
body.village1:not(.travianMobile) div.village1 div#map_details table#troops td.num {
    direction: ltr !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* Unit labels always stay on one line; full-play mobile is excluded. */
body.village1:not(.travianMobile) div.village1 div#map_details table#troops td.un {
    width: auto !important;
    white-space: nowrap !important;
}

/* Each regular-layout troop row sizes itself. A large count in one row must
   never create an empty column between the icon, count, and unit name below. */
body.village1:not(.travianMobile) div.village1 div#map_details table#troops tbody tr {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 2px !important;
    direction: rtl !important;
}

body.village1:not(.travianMobile) div.village1 div#map_details table#troops td.ico,
body.village1:not(.travianMobile) div.village1 div#map_details table#troops td.num,
body.village1:not(.travianMobile) div.village1 div#map_details table#troops td.un {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Desktop village troop rail: legacy unit sheets advance in 19px cells.
   Crop the transparent sprite window by one pixel on its right and bottom
   so neither separator edge leaks into the troop rail. Standalone hyena art
   keeps its own 22px box. */
@media screen and (min-width: 1025px) {
    body.village1:not(.travianMobile) div.village1 div#map_details table#troops td.ico img.unit:not(.u35) {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 19px !important;
        min-height: 19px !important;
        max-height: 19px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

/* The three phone skins share the same legacy troop sprites. Apply the same
   one-pixel crop to their village troop panel without touching standalone art. */
html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#troops td.ico img.unit:not(.u35),
body.village1.travianMobile div.village1 div#map_details table#troops td.ico img.unit:not(.u35) {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Finish-now popup: one clean silver dialog for buildings and resource fields.
   It intentionally replaces the old beige nine-slice frame. */
.dialog:has(#finishNowDialog),
.dialogWrapper:has(#finishNowDialog) {
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dialog:has(#finishNowDialog) .dialog-background-tl,
.dialog:has(#finishNowDialog) .dialog-background-tc,
.dialog:has(#finishNowDialog) .dialog-background-tr,
.dialog:has(#finishNowDialog) .dialog-background-ml,
.dialog:has(#finishNowDialog) .dialog-background-mc,
.dialog:has(#finishNowDialog) .dialog-background-mr,
.dialog:has(#finishNowDialog) .dialog-background-bl,
.dialog:has(#finishNowDialog) .dialog-background-bc,
.dialog:has(#finishNowDialog) .dialog-background-br,
.dialog:has(#finishNowDialog) .dialog-dragbar,
.dialog:has(#finishNowDialog) .title,
.dialog:has(#finishNowDialog) > .buttons {
    display: none !important;
}

.dialog:has(#finishNowDialog) .dialog-container,
.dialog:has(#finishNowDialog) .dialogContents,
.dialog:has(#finishNowDialog) .dialog-contents,
.dialog:has(#finishNowDialog) #dialogContent,
.dialog:has(#finishNowDialog) .content#dialogContent {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dialog:has(#finishNowDialog) #dialogCancelButton,
.dialog:has(#finishNowDialog) .dialogCancelButton {
    position: absolute !important;
    z-index: 4 !important;
    top: 7px !important;
    left: 7px !important;
    width: 26px !important;
    height: 26px !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: #a13f38 !important;
    background: linear-gradient(#f8fbfc, #dce7ec) !important;
    border: 1px solid #9aadb8 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

#finishNowDialog.trav47FinishNowDialog {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    direction: rtl;
    color: #344955 !important;
    background: linear-gradient(180deg, #f8fbfc 0%, #e4ebef 100%) !important;
    border: 1px solid #9aadb8 !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(24, 43, 54, 0.42), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

#finishNowDialog .trav47FinishNowHeader {
    margin: 0 0 9px !important;
    padding: 0 0 7px 28px !important;
    text-align: right !important;
    border-bottom: 1px solid #bdcbd2;
}

#finishNowDialog .trav47FinishNowHeader h2 {
    margin: 0 !important;
    color: #344955 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
}

#finishNowDialog .trav47FinishNowHeader p {
    margin: 3px 0 0 !important;
    color: #60727b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 17px !important;
    text-align: right !important;
}

#finishNowDialog .trav47FinishNowList {
    margin: 0 0 10px !important;
    padding: 7px 9px !important;
    background: rgba(255,255,255,.52) !important;
    border: 1px solid #bdcbd2 !important;
    border-radius: 5px !important;
}

#finishNowDialog .trav47FinishNowList h3 {
    margin: 0 0 5px !important;
    color: #536974 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
    text-align: right !important;
}

#finishNowDialog .trav47FinishNowList ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#finishNowDialog .trav47FinishNowList li {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 3px 0 !important;
    color: #344955 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-align: right !important;
    border-top: 1px solid rgba(154,173,184,.42);
}

#finishNowDialog .trav47FinishNowList li:first-child {
    border-top: 0 !important;
}

#finishNowDialog .trav47FinishNowList li > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#finishNowDialog .trav47FinishNowList span.lvl {
    flex: 0 0 auto;
    color: #d76b1d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

#finishNowDialog .buttonWrapper {
    margin: 0 !important;
    text-align: center !important;
}

#finishNowDialog .buttonWrapper button.gold {
    position: relative !important;
    min-width: 126px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    color: #221c0b !important;
    background: linear-gradient(#f5df5a, #edd030) !important;
    border: 2px solid #181818 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 1px 2px rgba(88,65,11,.3) !important;
}

#finishNowDialog .buttonWrapper button.gold .button-container,
#finishNowDialog .buttonWrapper button.gold .button-background,
#finishNowDialog .buttonWrapper button.gold .buttonStart,
#finishNowDialog .buttonWrapper button.gold .buttonEnd,
#finishNowDialog .buttonWrapper button.gold .buttonMiddle {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#finishNowDialog .buttonWrapper button.gold .button-content {
    position: absolute !important;
    inset: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #221c0b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(255,251,212,.58) !important;
}

#finishNowDialog .buttonWrapper button.gold .goldIcon {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    background-image: url('../../../images/ui/buttons/button/content/goldInner-rtl.png') !important;
    vertical-align: middle;
}

#finishNowDialog .buttonWrapper button.gold .goldValue {
    direction: ltr;
    font-weight: 700 !important;
}

/* The legacy icon is a transparent sprite; render an explicit close mark. */
.dialog:has(#finishNowDialog) #dialogCancelButton::before,
.dialog:has(#finishNowDialog) .dialogCancelButton::before {
    content: "×" !important;
    display: block !important;
    color: #a13f38 !important;
    font: 25px/23px Arial, sans-serif !important;
    text-align: center !important;
}

/* Canonical gold packages: the same artwork and card language on desktop and
 * phone.  This replaces the former yellow mobile package cards. */
.trav47-currency-shop {
    cursor: pointer;
}

.dialog.trav47PaymentShop .trav47ShopPackageGrid,
.trav47-gold-card-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 880px !important;
    margin: 0 auto !important;
    direction: rtl !important;
}

.dialog.trav47PaymentShop .trav47GoldPackage,
.trav47-gold-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 286px !important;
    padding: 13px 10px 10px !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;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(24,39,39,.2) !important;
    isolation: isolate;
    box-sizing: border-box !important;
}

.trav47BestSellerBadge {
    position: absolute !important;
    z-index: 8 !important;
    top: 9px !important;
    right: auto !important;
    left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 82px !important;
    min-height: 22px !important;
    padding: 0 13px 0 6px !important;
    border: 1px solid #ffd777 !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, #d99a1c 0%, #8d4707 100%) !important;
    color: #fff8d9 !important;
    font: 700 11px/18px Tahoma, Arial, sans-serif !important;
    text-shadow: 0 1px 1px rgba(70, 37, 3, .85) !important;
    white-space: nowrap !important;
    transform: none !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%) !important;
    box-shadow: 0 2px 5px rgba(72, 43, 5, .34) !important;
    pointer-events: none !important;
}

.trav47GoldOfferHud {
    display: none;
}

.trav47GoldOfferStrip {
    display: flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    height: 26px;
    margin: 0 0 6px;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid #66962f;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(106, 158, 48, .96), rgba(55, 105, 11, .96));
    box-shadow: inset 0 1px 0 rgba(232, 255, 188, .35), 0 2px 5px rgba(33, 67, 8, .22);
    color: #fff;
    direction: rtl;
    font: 700 11px/24px Tahoma, Arial, sans-serif;
    text-align: center;
    text-shadow: 0 1px 1px rgba(30, 62, 5, .85);
    white-space: nowrap;
    box-sizing: border-box;
}

.trav47GoldOfferStrip strong,
.trav47GoldOfferStrip span,
.trav47GoldOfferStrip b {
    white-space: nowrap;
}

.trav47GoldOfferStrip strong b,
.trav47GoldOfferStrip__countdown {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
}

.trav47GoldOfferPercent {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
}

.trav47GoldOfferPercent > span {
    display: block !important;
    direction: ltr !important;
}

.trav47-gold-card-amount {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.trav47GoldOfferBadge {
    position: absolute !important;
    z-index: 8 !important;
    top: 100% !important;
    right: auto !important;
    left: -10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 48px !important;
    min-height: 22px !important;
    padding: 0 13px 0 6px !important;
    border: 1px solid #d7f68a !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, #78b52c 0%, #376b0b 100%) !important;
    color: #fff !important;
    direction: ltr !important;
    font: 800 10px/18px Tahoma, Arial, sans-serif !important;
    text-shadow: 0 1px 1px rgba(28, 58, 4, .9) !important;
    white-space: nowrap !important;
    unicode-bidi: isolate !important;
    transform: none !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%) !important;
    box-shadow: 0 2px 5px rgba(28, 58, 4, .34) !important;
    pointer-events: none !important;
}

.dialog.trav47PaymentShop .trav47GoldPackageMeta {
    width: 100% !important;
    box-sizing: border-box !important;
}

@keyframes trav47BestSellerGlow {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(238, 171, 35, .62), 0 0 13px rgba(255, 196, 42, .46), 0 5px 12px rgba(24, 39, 39, .3);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(255, 222, 117, .92), 0 0 23px rgba(255, 203, 63, .88), 0 6px 15px rgba(24, 39, 39, .35);
    }
}

.dialog.trav47PaymentShop .trav47GoldPackage:nth-child(3n + 1),
.trav47-gold-card: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.trav47PaymentShop .trav47GoldPackage.trav47BestSellerPackage,
.trav47-gold-card.trav47BestSellerPackage {
    border-color: #ffe18a !important;
    background:
        radial-gradient(circle at 50% 54%, rgba(255, 205, 70, .34) 0%, rgba(255, 205, 70, 0) 53%),
        linear-gradient(180deg, #7c2115 0%, #9d3e17 53%, #4c100b 100%) !important;
    animation: trav47BestSellerGlow 2.2s ease-in-out infinite !important;
}

.dialog.trav47PaymentShop .trav47GoldPackage:hover,
.trav47-gold-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(24,39,39,.28) !important;
}

.dialog.trav47PaymentShop .trav47GoldPackageGlow {
    position: absolute !important;
    z-index: 0 !important;
    top: 52px !important;
    right: 50% !important;
    width: 188px !important;
    height: 188px !important;
    opacity: .84 !important;
    transform: translateX(50%) !important;
    pointer-events: none !important;
}

.dialog.trav47PaymentShop .trav47GoldPackageName,
.dialog.trav47PaymentShop .trav47GoldPackageButton {
    display: none !important;
}

.dialog.trav47PaymentShop .trav47GoldPackageMeta {
    position: relative !important;
    z-index: 1 !important;
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    direction: ltr !important;
    color: #f0d18a !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 30px !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
}

.dialog.trav47PaymentShop .trav47GoldPackageGoldIcon {
    display: block !important;
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 0 0 6px !important;
    object-fit: contain !important;
}

.dialog.trav47PaymentShop .trav47GoldPackageImage {
    position: relative !important;
    z-index: 1 !important;
    order: 2 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 161px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.dialog.trav47PaymentShop .trav47GoldPackageImage img {
    width: 100% !important;
    max-width: 146px !important;
    max-height: 150px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 3px rgba(14,11,4,.28)) !important;
}

.dialog.trav47PaymentShop .trav47GoldPackagePrice {
    position: relative !important;
    z-index: 1 !important;
    order: 3 !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 35px !important;
    margin: auto -10px -10px !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(10,22,23,.5) !important;
    color: #e9e1cc !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
}

@media screen and (max-width: 760px) {
    .dialog.trav47PaymentShop .trav47ShopPackageGrid,
    .trav47-gold-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
        max-width: none !important;
        direction: rtl !important;
    }

    .dialog.trav47PaymentShop .trav47GoldPackage,
    .trav47-gold-card {
        min-height: 205px !important;
        padding: 9px 7px 7px !important;
    }

    .dialog.trav47PaymentShop .trav47GoldPackageGlow {
        top: 38px !important;
        width: 148px !important;
        height: 148px !important;
    }

    .dialog.trav47PaymentShop .trav47GoldPackageMeta {
        min-height: 25px !important;
        font-size: 20px !important;
        line-height: 25px !important;
    }

    .dialog.trav47PaymentShop .trav47GoldPackageGoldIcon {
        flex-basis: 22px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .dialog.trav47PaymentShop .trav47GoldPackageImage {
        min-height: 102px !important;
    }

    .dialog.trav47PaymentShop .trav47GoldPackageImage img {
        max-width: 88px !important;
        max-height: 94px !important;
    }
}

/* Single authoritative payment-shop shell.  It deliberately comes after all
 * former shop rules so the obsolete parchment frame cannot reappear. */
.dialog.trav47PaymentShop {
    width: min(calc(100vw - 20px), 410px) !important;
    max-width: min(calc(100vw - 20px), 410px) !important;
    max-height: calc(100dvh - 16px) !important;
    min-width: 0 !important;
    color: #38505d !important;
    background: transparent !important;
    direction: rtl !important;
}

.dialog.trav47PaymentShop [class^="dialog-background"],
.dialog.trav47PaymentShop [class*=" dialog-background"] {
    display: none !important;
}

.dialog.trav47PaymentShop .dialog-container,
.dialog.trav47PaymentShop .dialog-contents,
.dialog.trav47PaymentShop .dialogContents {
    width: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    border: 1px solid #91acb8 !important;
    border-radius: 8px !important;
    background-color: #e7f0f4 !important;
    background-image: 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.trav47PaymentShop #dialogContent {
    width: 100% !important;
    max-height: calc(100dvh - 18px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
}

/* The payment template puts a second parchment layer on its form.  Remove it
 * instead of painting another surface over it. */
.dialog.trav47PaymentShop form,
.dialog.trav47PaymentShop #dialogContent.content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dialog.trav47PaymentShop div#paymentWizard {
    position: relative !important;
    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.trav47PaymentShop div#paymentWizard .header {
    position: static !important;
    order: -2 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 7px !important;
    padding: 0 0 7px 40px !important;
    border-bottom: 1px solid #b7cbd4 !important;
    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop div#paymentWizard .header ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    list-style: none !important;
}

.dialog.trav47PaymentShop div#paymentWizard .header li,
.dialog.trav47PaymentShop div#paymentWizard .header li.active,
.dialog.trav47PaymentShop div#paymentWizard .header li:not(.clear) {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: 31px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.dialog.trav47PaymentShop div#paymentWizard .header .tabButton,
.dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 31px !important;
    min-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.trav47PaymentShop div#paymentWizard .header li.active .tabButton {
    border-color: #6e9bac !important;
    background: linear-gradient(#d6ebf2, #a9cbd8) !important;
    color: #244653 !important;
}

.dialog.trav47PaymentShop div#paymentWizard .header .tabButton .text,
.dialog.trav47PaymentShop div#paymentWizard .header li.active .tabButton .text {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .accountBalance {
    position: static !important;
    order: -1 !important;
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !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;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentWrapper,
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentArea,
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentBorder,
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentBorder-contents {
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Premium features are a separate product view.  Keep its own wrappers and
 * arrange the six benefits as two main features followed by four boosts. */
.dialog.trav47PaymentShop #paymentWizard.pros {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .infoArea {
    display: none !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .contentWrapper,
.dialog.trav47PaymentShop #paymentWizard.pros .contentArea,
.dialog.trav47PaymentShop #paymentWizard.pros .contentBorder-contents,
.dialog.trav47PaymentShop #paymentWizard.pros .paymentPopupDialogWrapper {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .subHeadline {
    margin: 0 0 8px !important;
    padding: 0 2px 7px !important;
    border-bottom: 1px solid #b7cbd4 !important;
    color: #38505d !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: right !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature {
    position: relative !important;
    display: flex !important;
    grid-column: span 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 142px !important;
    margin: 0 !important;
    padding: 7px !important;
    float: none !important;
    clear: none !important;
    overflow: visible !important;
    border: 1px solid #b7cbd4 !important;
    border-radius: 6px !important;
    background: linear-gradient(#f8fcfe, #e0ebf0) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.95) !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1),
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) {
    grid-column: span 2 !important;
    min-height: 118px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureContent {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 0 74px 0 0 !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureContent::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    content: "";
    background: center / contain no-repeat;
}

.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(1) .featureContent::before { background-image: url("../../../images/goldClub.png"); }
.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(2) .featureContent::before { background-image: url("../../../images/travianPlus.png"); }
.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(3) .featureContent::before { background-image: url("../../../images/lumber.png"); }
.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(4) .featureContent::before { background-image: url("../../../images/clay.png"); }
.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(5) .featureContent::before { background-image: url("../../../images/iron.png"); }
.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(6) .featureContent::before { background-image: url("../../../images/crop.png"); }

.dialog.trav47PaymentShop #paymentWizard.pros .featureTitle {
    min-height: 32px !important;
    margin: 0 0 5px !important;
    color: #304b5a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    white-space: normal !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureTitle::after {
    display: block;
    margin-top: 3px;
    color: #5a6d77;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
}

.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(1) .featureTitle::after { content: "قوائم المزارع والتجار الآليين ومزايا إضافية."; }
.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(2) .featureTitle::after { content: "تنبيهات الهجوم، خانات بناء إضافية وواجهة موسعة."; }
.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(n+3) .featureTitle::after { content: "يزيد إنتاج هذا المورد في جميع قراك بنسبة 25%."; }

.dialog.trav47PaymentShop #paymentWizard.pros .featureButton {
    margin-top: auto !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros button.prosButton {
    min-width: 76px !important;
    height: 28px !important;
    margin: 0 !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureRemainingTime {
    margin: 5px 0 0 !important;
    color: #5a6d77 !important;
    font-size: 11px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
}

@media screen and (max-width: 760px) {
    .dialog.trav47PaymentShop #paymentWizard.pros {
        padding: 7px !important;
    }

    .dialog.trav47PaymentShop #paymentWizard.pros .featureCollection {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature,
    .dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1),
    .dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) {
        grid-column: span 1 !important;
        min-height: 126px !important;
    }
}

.dialog.trav47PaymentShop .trav47ShopGoldArea {
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.dialog.trav47PaymentShop .trav47ShopGoldArea 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.trav47PaymentShop div#paymentWizard .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(#fff, #dbe8ed) !important;
    color: #b43b2f !important;
    box-shadow: none !important;
    font: 25px/1 Arial, sans-serif !important;
}

/* The glow is a separate asset in the desktop shop; render it on phones too. */
.dialog.trav47PaymentShop .trav47GoldPackageGlow {
    background: url("../../../images/glare.png") center / contain no-repeat !important;
}

/* Shop title and current gold share one stable header row. */
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard {
    flex-wrap: wrap !important;
    align-items: center !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .header {
    order: 1 !important;
    flex: 0 0 100% !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentWrapper,
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentArea {
    display: contents !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopGoldArea h4 {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 0 7px !important;
    padding: 0 0 6px !important;
    text-align: right !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .accountBalance {
    order: 3 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin: 0 0 7px !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopPackageGrid {
    order: 4 !important;
    flex: 0 0 100% !important;
}

/* Fixed title row: shop name right, current gold flush left. */
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard {
    display: block !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentWrapper,
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentArea {
    display: block !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .accountBalance {
    position: absolute !important;
    z-index: 4 !important;
    top: 43px !important;
    left: 9px !important;
    right: auto !important;
    margin: 0 !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopGoldArea h4 {
    min-height: 25px !important;
    margin: 0 0 7px !important;
    padding: 3px 112px 6px 0 !important;
    line-height: 19px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* The wizard appends its tab header after its content.  Pin that existing
 * header at the top, then use an explicit title row from the HTML. */
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard {
    display: block !important;
    padding: 51px 9px 12px !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .header {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: 50px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentWrapper,
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .contentArea {
    display: block !important;
}

.dialog.trav47PaymentShop .trav47ShopTitleRow {
    position: relative !important;
    display: block !important;
    min-height: 27px !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    padding: 0 0 6px !important;
    border-bottom: 1px solid #bed0d8 !important;
    direction: rtl !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop .trav47ShopTitleRow h4,
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopTitleRow h4 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #38505d !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.dialog.trav47PaymentShop .trav47ShopTitleRow .accountBalance,
.dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .trav47ShopTitleRow .accountBalance {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    left: 0 !important;
    order: initial !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    display: inline-flex !important;
    min-height: 24px !important;
    margin: 0 !important;
    margin-right: 0 !important;
    padding: 1px 6px !important;
    border: 1px solid #b9cbd3 !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,.7) !important;
    color: #38505d !important;
    line-height: 20px !important;
}

/* Desktop is an independent wide dialog.  Never inherit the phone-sized
 * payment-shop geometry. */
@media screen and (min-width: 761px) {
    body:not(.travianMobile) .dialog.trav47PaymentShop {
        width: 960px !important;
        max-width: calc(100vw - 40px) !important;
        max-height: none !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop .dialog-container,
    body:not(.travianMobile) .dialog.trav47PaymentShop .dialog-contents,
    body:not(.travianMobile) .dialog.trav47PaymentShop .dialogContents {
        width: 940px !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop #dialogContent {
        max-height: none !important;
        overflow: visible !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard {
        min-height: 510px !important;
        padding: 75px 22px 22px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .header {
        top: 18px !important;
        right: 22px !important;
        left: 22px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .header ul {
        grid-template-columns: repeat(3, 150px) !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop .trav47ShopTitleRow {
        min-height: 31px !important;
        margin-bottom: 16px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop .trav47ShopTitleRow h4 {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop .trav47ShopPackageGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 14px !important;
        max-width: 880px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop .trav47GoldPackage {
        min-height: 286px !important;
        padding: 13px 10px 10px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop .trav47GoldPackageImage {
        min-height: 161px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop .trav47GoldPackageImage img {
        max-width: 146px !important;
        max-height: 150px !important;
    }
}

/* Tablet is still using the mobile game shell, so it must not inherit the
 * narrow phone shop.  Keep five packages in a real 80%-wide grid. */
@media screen and (min-width: 761px) and (max-width: 1024px) {
    body.travianMobile .dialog.trav47PaymentShop {
        width: min(80vw, 820px) !important;
        max-width: min(80vw, 820px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    body.travianMobile .dialog.trav47PaymentShop .dialog-container,
    body.travianMobile .dialog.trav47PaymentShop .dialog-contents,
    body.travianMobile .dialog.trav47PaymentShop .dialogContents {
        width: 100% !important;
        max-height: calc(100dvh - 24px) !important;
    }

    body.travianMobile .dialog.trav47PaymentShop #dialogContent {
        max-height: calc(100dvh - 26px) !important;
    }

    body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard {
        min-height: 0 !important;
        padding: 58px 12px 14px !important;
    }

    body.travianMobile .dialog.trav47PaymentShop .trav47ShopPackageGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 10px !important;
        max-width: none !important;
    }

    body.travianMobile .dialog.trav47PaymentShop .trav47GoldPackage {
        min-height: 250px !important;
        padding: 11px 8px 8px !important;
    }

    body.travianMobile .dialog.trav47PaymentShop .trav47GoldPackageMeta {
        font-size: 21px !important;
        line-height: 27px !important;
    }

    body.travianMobile .dialog.trav47PaymentShop .trav47GoldPackageImage {
        min-height: 132px !important;
    }

    body.travianMobile .dialog.trav47PaymentShop .trav47GoldPackageImage img {
        max-width: 112px !important;
        max-height: 122px !important;
    }
}

/* Final premium-card geometry: no legacy hover arrows or floated fragments. */
.dialog.trav47PaymentShop #paymentWizard.pros .subHeadline,
.dialog.trav47PaymentShop #paymentWizard.pros .dynamicContent,
.dialog.trav47PaymentShop #paymentWizard.pros .highlightArrow {
    display: none !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature {
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureContent {
    width: 100% !important;
    min-height: 126px !important;
    padding: 0 57px 0 0 !important;
    overflow: hidden !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureContent::before {
    top: 2px !important;
    right: 0 !important;
    width: 50px !important;
    height: 50px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureContent::before,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureContent::before {
    width: 62px !important;
    height: 62px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureTitle {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    font-size: 12px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureTitle::after {
    display: block !important;
    width: 100% !important;
    margin-top: 3px !important;
    color: #5a6d77 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 13px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(n+3) .featureTitle::after {
    content: "رفع إنتاج جميع القرى بنسبة 25%." !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureButton {
    top: auto !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 0 !important;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureButton button.prosButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 70px !important;
    height: 27px !important;
    padding: 0 7px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureRemainingTime,
.dialog.trav47PaymentShop #paymentWizard.pros .featureDuration {
    display: block !important;
    top: auto !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    float: none !important;
    color: #5a6d77 !important;
    font-size: 10px !important;
    line-height: 13px !important;
    white-space: nowrap !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureDuration {
    position: absolute !important;
    right: 0 !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: 82px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* نادي الذهب يملك بطاقة عريضة؛ لا تحصر مدة الميزة في عرض 82px. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureDuration {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* سطح المكتب: اترك فاصلاً واضحاً بين زر التمديد وخيار التجديد التلقائي. */
html[data-trav47-layout="desktop"] .dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureRenewal {
    transform: translateY(10px) !important;
}

/* Reference layout: two wide premium benefits, then four self-contained
 * resource cards.  Resource information is vertical and centred. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) {
    display: block !important;
    min-height: 288px !important;
    padding: 8px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureContent {
    display: block !important;
    flex: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    min-height: 270px !important;
    padding: 80px 8px 56px !important;
    text-align: center !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureContent::before {
    top: 6px !important;
    right: 50% !important;
    width: 68px !important;
    height: 68px !important;
    transform: translateX(50%) !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureContent,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureContent {
    padding-right: 78px !important;
    text-align: center !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureTitle,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureTitle {
    font-size: 17px !important;
    line-height: 21px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureTitle::after,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureTitle::after {
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 16px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureTitle {
    text-align: center !important;
    font-size: 14px !important;
    line-height: 19px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureTitle::after {
    display: block !important;
    min-height: 32px !important;
    margin: 7px 0 0 !important;
    color: #5a4a35 !important;
    font-size: 11px !important;
    line-height: 16px !important;
    text-align: center !important;
    white-space: normal !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .feature:nth-child(n+3) .featureTitle::after {
    content: "يزيد إنتاج هذا المورد في جميع القرى بنسبة 25% لمدة 7 أيام." !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureButton {
    right: 50% !important;
    bottom: 43px !important;
    left: auto !important;
    height: 27px !important;
    transform: translateX(50%) !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureRemainingTime {
    position: absolute !important;
    right: 0 !important;
    bottom: 10px !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 11px !important;
    line-height: 15px !important;
    text-align: center !important;
    text-overflow: clip !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3):has(.featureRemainingTime) .featureDuration {
    bottom: 29px !important;
}

@media screen and (max-width: 760px) {
    .dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) {
        min-height: 248px !important;
    }

    .dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureContent {
        min-height: 230px !important;
        padding-top: 73px !important;
    }
}

/* Use the compact, centered Buy Gold tab strip in every shop view.  The
 * product pages have different content, but their shared navigation must not
 * switch to the legacy full-width tabs when the active view changes. */
@media screen and (min-width: 761px) {
    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard {
        min-height: 510px !important;
        padding: 75px 22px 22px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard .header {
        position: absolute !important;
        top: 18px !important;
        right: 22px !important;
        left: 22px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard .header ul {
        grid-template-columns: repeat(3, 150px) !important;
        justify-content: center !important;
        gap: 5px !important;
    }
}

/* Mobile shop views append the shared tab strip after their content.  Keep it
 * pinned above the cards so the Pros and Plus Features tabs remain reachable. */
@media screen and (max-width: 760px) {
    .dialog.trav47PaymentShop div#paymentWizard {
        display: block !important;
        min-height: 0 !important;
        padding: 54px 9px 12px !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header {
        position: absolute !important;
        z-index: 20 !important;
        top: 10px !important;
        right: 10px !important;
        left: 50px !important;
        width: auto !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .header ul {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    .dialog.trav47PaymentShop div#paymentWizard .contentWrapper {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Tablet-sized mobile layout: every main shop tab uses the same header slot.
 * Only Buy Gold used to pin this strip, so the other views shifted it below
 * the close button after switching. */
@media screen and (min-width: 761px) and (max-width: 1024px) {
    body.travianMobile .dialog.trav47PaymentShop div#paymentWizard {
        display: block !important;
        min-height: 0 !important;
        padding: 58px 12px 14px !important;
    }

    body.travianMobile .dialog.trav47PaymentShop div#paymentWizard .header {
        position: absolute !important;
        z-index: 20 !important;
        top: 10px !important;
        right: 12px !important;
        left: 52px !important;
        width: auto !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    body.travianMobile .dialog.trav47PaymentShop div#paymentWizard .header ul {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    body.travianMobile .dialog.trav47PaymentShop div#paymentWizard .contentWrapper {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Plus Features is the reference position in the mobile shell.  Buy Gold has
 * an extra wrapper offset, so lift only its main tab strip to the same line. */
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.trav47ShopWizard .header {
    top: 4px !important;
}

/* Plus Features category tabs live in the unused row below the main shop
 * navigation on the mobile layout. */
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea {
    position: absolute !important;
    z-index: 15 !important;
    top: 50px !important;
    right: 9px !important;
    left: 9px !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentWrapper {
    position: static !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-contents {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a {
    display: block !important;
    min-width: 0 !important;
    text-decoration: none !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a:nth-of-type(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 1px solid #c7a45e !important;
    border-radius: 4px !important;
    background: linear-gradient(#fff6d7, #ebd096) !important;
    color: #70501d !important;
    box-sizing: border-box !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep.active {
    border-color: #8d6418 !important;
    background: linear-gradient(#bd8a2e, #8e5d14) !important;
    color: #fff8e3 !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStepLabel {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStepContent {
    display: none !important;
}

/* Resource amounts in the mobile Resources view stay on one centered row. */
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table tbody {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureBooking {
    padding-block: 8px !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent {
    row-gap: 7px !important;
    padding-block: 3px !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #moreProtection .featureBooking {
    padding-block: 8px !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #moreProtection .featureContent {
    row-gap: 7px !important;
    padding-block: 3px !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #generalOptions .featureBooking {
    padding-block: 8px !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #generalOptions .featureContent {
    row-gap: 7px !important;
    padding-block: 3px !important;
}

/* نسخة الويب الضيقة: قواعد ميزات بلاس من الجوال نفسه. */
@media screen and (max-width: 1024px) {
/* Web-phone copy: Plus Features category tabs use the native phone rules below the main shop
 * navigation on the mobile layout. */
html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea {
    position: absolute !important;
    z-index: 15 !important;
    top: 50px !important;
    right: 9px !important;
    left: 9px !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentWrapper {
    position: static !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-contents {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a {
    display: block !important;
    min-width: 0 !important;
    text-decoration: none !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a:nth-of-type(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep,
html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 1px solid #c7a45e !important;
    border-radius: 4px !important;
    background: linear-gradient(#fff6d7, #ebd096) !important;
    color: #70501d !important;
    box-sizing: border-box !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep.active {
    border-color: #8d6418 !important;
    background: linear-gradient(#bd8a2e, #8e5d14) !important;
    color: #fff8e3 !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStepLabel {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStepContent {
    display: none !important;
}

/* Resource amounts in the mobile Resources view stay on one centered row. */
html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table tbody {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent table td {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureBooking {
    padding-block: 8px !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #buyResources .featureContent {
    row-gap: 7px !important;
    padding-block: 3px !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #moreProtection .featureBooking {
    padding-block: 8px !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #moreProtection .featureContent {
    row-gap: 7px !important;
    padding-block: 3px !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #generalOptions .featureBooking {
    padding-block: 8px !important;
}

html[data-trav47-layout="desktop"] body .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures #generalOptions .featureContent {
    row-gap: 7px !important;
    padding-block: 3px !important;
}

}

/* Mobile Pros view: reserve the navigation row, then show complete feature
 * cards with their artwork, description, action and duration. */
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    padding: 62px 8px 12px !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .header {
    position: absolute !important;
    z-index: 20 !important;
    top: 10px !important;
    right: 9px !important;
    left: 50px !important;
    width: auto !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .contentWrapper,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .contentArea,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .contentBorder-contents,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .paymentPopupDialogWrapper {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .infoArea,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .subHeadline,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .dynamicContent,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .highlightArrow {
    display: none !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(1),
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(2),
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(n+3) {
    display: block !important;
    grid-column: span 1 !important;
    min-height: 184px !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureContent,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureContent {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 168px !important;
    margin: 0 !important;
    padding: 66px 4px 42px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureContent::before,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureContent::before {
    top: 0 !important;
    right: 50% !important;
    width: 58px !important;
    height: 58px !important;
    transform: translateX(50%) !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureContent,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureContent {
    padding: 66px 4px 42px !important;
    text-align: center !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureContent::before,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureContent::before {
    top: 0 !important;
    right: 50% !important;
    width: 58px !important;
    height: 58px !important;
    transform: translateX(50%) !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureTitle,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureTitle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #44331c !important;
    font-size: 13px !important;
    line-height: 17px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureTitle::after {
    display: block !important;
    min-height: 28px !important;
    margin-top: 4px !important;
    color: #665236 !important;
    font-size: 10px !important;
    line-height: 13px !important;
    text-align: center !important;
    white-space: normal !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureButton {
    position: absolute !important;
    right: 50% !important;
    bottom: 23px !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateX(50%) !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureButton {
    bottom: 17px !important;
}

/* بطاقات الموارد تحمل وصفاً وزراً ومدة؛ امنحها مساحة عمودية مستقلة كي لا
   يلامس الزر الوصف أو سطر المدة. */
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(n+3) {
    min-height: 204px !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureCollection > .feature:nth-child(n+3) .featureContent {
    min-height: 188px !important;
}

body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureDuration,
body.travianMobile .dialog.trav47PaymentShop div#paymentWizard.pros .featureRemainingTime {
    position: absolute !important;
    right: 4px !important;
    bottom: 5px !important;
    left: 4px !important;
    width: auto !important;
    margin: 0 !important;
    color: #665236 !important;
    font-size: 10px !important;
    line-height: 13px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* سطح المكتب فقط: تبويبات ميزات بلاس تبقى عموداً على اليمين، ومحتوى
   التبويب المختار يأخذ المساحة المقابلة على اليسار.  هذا يعزلها عن ترتيب
   الهاتف الذي يحوّل التبويبات إلى صف أفقي. */
@media screen and (min-width: 761px) {
    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentWrapper {
        display: grid !important;
        grid-template-columns: 180px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 14px !important;
        direction: rtl !important;
        overflow: visible !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentArea {
        position: static !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea .contentBorder-contents {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* لا نفرض display!important على قوائم الخيارات: السكربت يخفي القائمتين
       غير النشطتين عبر .hide أو style="display:none". */
    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentWizardMenu {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentWizardMenu.hide,
    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .paymentWizardMenu[style*="display: none"] {
        display: none !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .infoArea a,
    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .buyGoldInfoStep {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* نافذة المتجر على سطح المكتب لها مقاس واحد في جميع التبويبات.  العرض
   90% من المقاس السابق، والمحتوى يلتزم بالمساحة الجديدة بدلاً من تمديدها. */
@media screen and (min-width: 761px) {
    body:not(.travianMobile) .dialog.trav47PaymentShop {
        width: 864px !important;
        max-width: calc(100vw - 40px) !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop .dialog-container,
    body:not(.travianMobile) .dialog.trav47PaymentShop .dialog-contents,
    body:not(.travianMobile) .dialog.trav47PaymentShop .dialogContents {
        width: 844px !important;
        height: 550px !important;
        min-height: 550px !important;
        max-height: 550px !important;
        box-sizing: border-box !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop #dialogContent {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard {
        height: 510px !important;
        min-height: 510px !important;
        max-height: 510px !important;
        padding: 68px 20px 20px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard .header ul {
        grid-template-columns: repeat(3, 135px) !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures .contentWrapper {
        grid-template-columns: 162px minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    body:not(.travianMobile) .dialog.trav47PaymentShop div#paymentWizard.paymentFeatures {
        overflow-y: hidden !important;
    }
}

/* صفحة الملف الشخصي في سطح المكتب: تفاصيل مختصرة في صف واحد ووصفان
   مستقلان بعناوين فوق الصندوقين.  يبقى هذا خارج ستايل الهاتف. */
@media screen and (min-width: 761px) {
    body.player:not(.travianMobile) #content.player table#editDetails {
        width: 100% !important;
    }

    body.player:not(.travianMobile) #content.player .profileDetailsGroups {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        min-height: 34px !important;
        direction: rtl !important;
    }

    body.player:not(.travianMobile) #content.player .profileDetailsFields,
    body.player:not(.travianMobile) #content.player .profileDetailsGender,
    body.player:not(.travianMobile) #content.player .profileDetailsGenderOptions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body.player:not(.travianMobile) #content.player .profileDetailsField {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
    }

    body.player:not(.travianMobile) #content.player .profileDetailsField input.age {
        width: 52px !important;
        min-width: 52px !important;
        text-align: center !important;
    }

    body.player:not(.travianMobile) #content.player .profileDetailsField input.residence {
        width: 150px !important;
        min-width: 150px !important;
    }

    body.player:not(.travianMobile) #content.player .profileDetailsDivider {
        width: 1px !important;
        height: 24px !important;
        background: rgba(89, 67, 43, .22) !important;
    }

    body.player:not(.travianMobile) #content.player .profileDetailsGenderTitle,
    body.player:not(.travianMobile) #content.player .profileDetailsGenderOptions label {
        margin: 0 !important;
        white-space: nowrap !important;
    }

    body.player:not(.travianMobile) #content.player .profileDescriptionEditor {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 0 20px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    body.player:not(.travianMobile) #content.player .profileDescriptionEditorField {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        gap: 6px !important;
    }

    body.player:not(.travianMobile) #content.player .profileDescriptionEditor .profileDescriptionLabel {
        display: block !important;
        margin: 0 !important;
        padding: 0 4px !important;
        color: #46311e !important;
        font-weight: bold !important;
        line-height: 18px !important;
        text-align: right !important;
    }

    body.player:not(.travianMobile) #content.player .profileDescriptionEditor textarea.editDescription {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: 250px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.player:not(.travianMobile) #content.player #medals.profileMedalsPicker {
        margin: 10px 0 16px !important;
    }

    body.player:not(.travianMobile) #content.player .profileMedalsGrid {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        direction: rtl !important;
    }

    body.player:not(.travianMobile) #content.player #medals button.profileMedalButton {
        display: flex !important;
        flex: 0 0 88px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 100px !important;
        margin: 0 !important;
        padding: 8px 6px 7px !important;
        border: 1px solid #c7b071 !important;
        border-radius: 5px !important;
        background: linear-gradient(#fff9e9, #f2e2ba) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.85), 0 1px 2px rgba(76, 51, 20, .14) !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    body.player:not(.travianMobile) #content.player #medals button.profileMedalButton img.medal {
        display: block !important;
        width: 42px !important;
        height: 58px !important;
        margin: 0 0 6px !important;
        object-fit: contain !important;
    }

    body.player:not(.travianMobile) #content.player #medals button.profileMedalButton .profileMedalLabel {
        display: block !important;
        width: 100% !important;
        min-height: 17px !important;
        overflow: hidden !important;
        color: #48321d !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}


/* رسائل اللعبة: اجعل زر الرد وزر الإرسال مكوّنين موحدين بدلاً من طبقات الأزرار القديمة. */
body.message div.messages #answer,
body.message div.messages #send {
    text-align: center;
}

body.message div.messages #answer #s1.game-message-action-button,
body.message div.messages #send #btn_ok.game-message-action-button {
    float: none !important;
    display: inline-block !important;
    min-width: 94px;
    padding: 7px 20px;
    color: #fff !important;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(#7fbd32, #4f8d13) !important;
    border: 1px solid #274d0a !important;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 1px 2px rgba(0,0,0,.28);
    cursor: pointer;
}

body.message div.messages #answer #s1.game-message-action-button:hover,
body.message div.messages #answer #s1.game-message-action-button:focus,
body.message div.messages #send #btn_ok.game-message-action-button:hover,
body.message div.messages #send #btn_ok.game-message-action-button:focus {
    color: #fff !important;
    background: linear-gradient(#92ce42, #5a9e19) !important;
}

/* إجراءات ملف اللاعب: أسفل عمود البطل مع فاصل صغير بين الرابطين. */
body.player #content.player .playerProfileActions {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 160px;
    max-width: 40%;
    min-height: 24px;
    margin: 4px auto 8px 0;
    direction: rtl;
    box-sizing: border-box;
}

body.player #content.player .playerProfileActions a {
    display: inline-block;
    margin: 0;
    line-height: 18px;
    white-space: nowrap;
}

body.player #content.player .playerProfileActions a + a {
    position: relative;
}

body.player #content.player .playerProfileActions a + a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: auto;
    left: -5px;
    width: 1px;
    height: 12px;
    background: #9b978d;
    transform: translateY(-50%);
    pointer-events: none;
}

/* صور المباني الخاصة: استخدم الرسم الافتراضي للقبائل التي لا تملك رسماً خاصاً. */
body.buildingsV3 img.g44:not(.big) {
    background-image: url("../../../images/village/classic/defaultBuildings/g44-rtl.png");
}

body.buildingsV3 img.g44.big {
    background-image: url("../../../images/village/classic/defaultBuildings/big/g44-rtl.png");
}

body.buildingsV3 img.g45:not(.big) {
    background-image: url("../../../images/village/classic/defaultBuildings/g45-rtl.png");
}

body.buildingsV3 img.g45.big {
    background-image: url("../../../images/village/classic/defaultBuildings/big/g45-rtl.png");
}

/* حقول الموارد والمباني القائمة: خلفية وصف موحّدة. */
body.build #content #build > #descriptionAndInfo {
    background: #9aae51 url("../../../images/background2.jpg") center / cover no-repeat !important;
    border: 1px solid #78833d;
    border-radius: 5px;
    box-shadow: inset 0 1px rgba(255,255,255,.35), 0 1px 1px rgba(0,0,0,.18);
    box-sizing: border-box;
}

body.build #content #build > #descriptionAndInfo {
    min-height: 116px;
    padding: 12px 14px 12px 126px;
    margin-bottom: 8px;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(20, 44, 13, .85);
}

body.build #content #build > #descriptionAndInfo .build_desc,
body.build #content #build > #descriptionAndInfo .build_desc * {
    color: #fff !important;
}

body.build #content #build.gid0 > .buildingWrapper .build_desc {
    padding: 8px;
}

/* إطار صورة الوصف الموحد على سطح المكتب والهاتف. */
body.build #content #build > #descriptionAndInfo {
    position: relative !important;
    min-height: 160px !important;
    padding-left: 184px !important;
    margin-bottom: 4px !important;
    box-sizing: border-box !important;
}

body.build #content #build > .roundedCornersBox.big .stickyImage {
    position: absolute !important;
    top: -164px !important;
    right: auto !important;
    bottom: auto !important;
    left: 8px !important;
    width: 170px !important;
    height: 154px !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(.75) !important;
    transform-origin: top left !important;
}

/* سطح المكتب: نفس إطار الوصف الموحد، معزول تمامًا عن قواعد الهاتف. */
html[data-trav47-layout="desktop"] body.build #content #build > #descriptionAndInfo {
    min-height: 160px !important;
    padding: 38px 14px 12px 184px !important;
}

html[data-trav47-layout="desktop"] body.build #content #build > .roundedCornersBox.big .stickyImage {
    top: -164px !important;
    left: 8px !important;
    width: 170px !important;
    height: 154px !important;
    overflow: hidden !important;
}

html[data-trav47-layout="desktop"] body.build #content #build > .roundedCornersBox.big .stickyImage a.build_logo {
    top: 0 !important;
    left: 0 !important;
}

html[data-trav47-layout="desktop"] body.build #content #build > .roundedCornersBox.big .stickyImage img.build_logo.building.big {
    transform: scale(.825) !important;
    transform-origin: top left !important;
}

/* قيم التقدّم داخل وصف المبنى: تبقى فوق العشب بلا شريط أبيض. */
body.build #content #build > #descriptionAndInfo table#build_value,
body.build #content #build > #descriptionAndInfo table#build_value tbody,
body.build #content #build > #descriptionAndInfo table#build_value tr,
body.build #content #build > #descriptionAndInfo table#build_value th,
body.build #content #build > #descriptionAndInfo table#build_value td {
    background: transparent !important;
    background-image: none !important;
}

body.build #content #build > #descriptionAndInfo table#build_value th,
body.build #content #build > #descriptionAndInfo table#build_value td,
body.build #content #build > #descriptionAndInfo table#build_value th *,
body.build #content #build > #descriptionAndInfo table#build_value td * {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(20, 44, 13, .9) !important;
}

/* افصل بيانات المبنى المتغيرة عن نص الوصف داخل بطاقة مستقلة وهادئة. */
body.build #content #build > #descriptionAndInfo table#build_value {
    margin-top: 10px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 5px !important;
    background: rgba(30, 66, 25, .24) !important;
    background-image: none !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 1px 2px rgba(20, 44, 13, .18) !important;
    box-sizing: border-box !important;
}

/* قائمة المباني في الهدم: نفس خط الصفحة الأساسي، لا خط القوائم الافتراضي. */
#content div#build.gid15 form select#demolish,
#content div#build.gid15 form select#demolish option {
    font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
}

/* نافذة تغيير اسم القرية: نافذة فضية موحّدة في مركز الشاشة. */
.villageNameDialogWrapper {
    position: fixed !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
}

.villageNameDialogWrapper .dialog .dialog-background-tl,
.villageNameDialogWrapper .dialog .dialog-background-tc,
.villageNameDialogWrapper .dialog .dialog-background-tr,
.villageNameDialogWrapper .dialog .dialog-background-ml,
.villageNameDialogWrapper .dialog .dialog-background-mc,
.villageNameDialogWrapper .dialog .dialog-background-mr,
.villageNameDialogWrapper .dialog .dialog-background-bl,
.villageNameDialogWrapper .dialog .dialog-background-bc,
.villageNameDialogWrapper .dialog .dialog-background-br {
    background: #d9e5ea !important;
    background-image: none !important;
}

.villageNameDialogWrapper .dialog .dialog-contents,
.villageNameDialogWrapper .dialog .dialogContents {
    background: linear-gradient(180deg, #f8fbfc 0%, #e6f0f4 100%) !important;
    border: 1px solid #83a8b8 !important;
    border-radius: 7px !important;
    box-shadow: 0 5px 16px rgba(24, 49, 62, .26) !important;
}

.villageNameDialogWrapper .dialog .dialog-contents .title {
    color: #385568 !important;
}

.villageNameDialog {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.villageNameDialog label {
    color: #405b69 !important;
}

.villageNameDialog #villageNameInput {
    border-color: #9ab7c3 !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(24, 49, 62, .12) !important;
}

.villageNameCounter {
    background: #e8f1f4 !important;
    color: #547786 !important;
}

.villageNameHint {
    color: #637985 !important;
}

/* تغيير الاسم: البطاقة الداخلية هي النافذة نفسها، بلا طبقة أو عنوان ثانوي. */
.villageNameDialogWrapper .dialog,
.villageNameDialogWrapper .dialog .dialog-container,
.villageNameDialogWrapper .dialog .dialog-contents,
.villageNameDialogWrapper .dialog .dialog-contents form,
.villageNameDialogWrapper .dialog #dialogContent {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.villageNameDialogWrapper .dialog .dialog-background-tl,
.villageNameDialogWrapper .dialog .dialog-background-tc,
.villageNameDialogWrapper .dialog .dialog-background-tr,
.villageNameDialogWrapper .dialog .dialog-background-ml,
.villageNameDialogWrapper .dialog .dialog-background-mc,
.villageNameDialogWrapper .dialog .dialog-background-mr,
.villageNameDialogWrapper .dialog .dialog-background-bl,
.villageNameDialogWrapper .dialog .dialog-background-bc,
.villageNameDialogWrapper .dialog .dialog-background-br,
.villageNameDialogWrapper .dialog .dialog-dragbar,
.villageNameDialogWrapper .dialog .title,
.villageNameDialogWrapper .dialog .iconButton,
.villageNameDialogWrapper .dialog .buttons {
    display: none !important;
}

.villageNameDialogWrapper .dialog .villageNameDialog {
    display: block !important;
    width: min(310px, calc(100vw - 32px)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 15px 16px 13px !important;
    border: 1px solid #9ab7c3 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #fafdff 0%, #e6f0f4 100%) !important;
    box-shadow: 0 5px 16px rgba(24, 49, 62, .26) !important;
}

.villageNameDialogFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 2px 0;
    direction: rtl;
}

.villageNameDialogFooter .villageNameHint {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    text-align: right;
}

.villageNameDialogFooter .villageNameSaveSlot {
    display: flex;
    flex: 0 0 auto;
}

.villageNameDialogFooter .villageNameSaveSlot button.ok {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 62px;
    height: 28px !important;
    padding: 0 11px !important;
    border: 1px solid #456a18 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #9bcf43 0%, #5f9724 52%, #3c6b16 100%) !important;
    color: #fff !important;
    font: 700 12px/26px Tahoma, Arial, sans-serif !important;
    text-shadow: 0 1px rgba(26, 66, 9, .7) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .45), 0 1px 2px rgba(42, 64, 16, .28) !important;
    float: none !important;
    margin: 0 !important;
}

.villageNameDialogFooter .villageNameSaveSlot button.ok .button-background {
    display: none !important;
}

.villageNameDialogFooter .villageNameSaveSlot button.ok .button-container,
.villageNameDialogFooter .villageNameSaveSlot button.ok .button-content,
.villageNameDialogFooter .villageNameSaveSlot button.ok .text {
    display: flex !important;
    position: static !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    line-height: inherit !important;
}

.villageNameCounter {
    direction: ltr;
}

/* الدليل السريع: فهرس واضح مماثل لواجهة ترافيان الأصلية. */
html:has(body.manual),
body.manual {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 10px 14px 18px !important;
    overflow-x: hidden !important;
    float: none !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #302b25 !important;
    font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.manual #troops,
body.manual #buildings {
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 0 12px !important;
    float: none !important;
    border-bottom: 1px solid #b9b9b9;
    box-sizing: border-box;
}

body.manual #troops > h3,
body.manual #buildings > h3 {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin: 0 0 7px !important;
    color: #2e2922 !important;
    font-size: 17px !important;
    font-weight: 700;
    line-height: 24px !important;
}

body.manual #troops > h3,
body.manual #buildings > h3 {
    min-height: 34px;
    padding: 5px 8px !important;
    border: 1px solid #b8ca98;
    border-radius: 4px;
    background: linear-gradient(to left, #dfebca, #f8fbf2) !important;
    color: #3e5421 !important;
    box-sizing: border-box;
}

body.manual #troops > h3 img,
body.manual #buildings > h3 img {
    flex: 0 0 auto;
    margin: 0 !important;
}

body.manual .contentNavi.tabNavi {
    display: flex !important;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 2px;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    float: none !important;
    border-bottom: 1px solid #b8b8b8;
    box-sizing: border-box;
}

body.manual .contentNavi.tabNavi .container {
    display: block !important;
    min-width: 62px;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 1px solid #b8b8b8;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(#f8f8f8, #dfdfdf) !important;
    box-sizing: border-box;
}

body.manual .contentNavi.tabNavi .background-start,
body.manual .contentNavi.tabNavi .background-end {
    display: none !important;
}

body.manual .contentNavi.tabNavi .content,
body.manual .contentNavi.tabNavi .content .tabItem {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    background: transparent !important;
    color: #575757 !important;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 17px !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
}

body.manual .contentNavi.tabNavi .container.active {
    border-color: #8bab1b !important;
    background: #9cc30d !important;
}

body.manual .contentNavi.tabNavi .container.active .tabItem {
    color: #fff !important;
    font-weight: 700;
    text-shadow: 0 1px rgba(59, 91, 7, .45);
}

body.manual #troops > ul,
body.manual #buildings > ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 1px;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    float: none !important;
    list-style: none;
    box-sizing: border-box;
}

body.manual #troops > ul.hide,
body.manual #buildings > ul.hide {
    display: none !important;
}

body.manual #troops > ul > li,
body.manual #buildings > ul > li {
    display: flex !important;
    align-items: center;
    min-width: 0;
    width: auto !important;
    min-height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    line-height: 24px !important;
}

body.manual #troops > ul > li:empty,
body.manual #buildings > ul > li:empty {
    display: none !important;
}

body.manual #troops > ul > li img,
body.manual #buildings > ul > li img {
    flex: 0 0 auto;
    margin: 0 0 0 7px !important;
    vertical-align: middle;
}

body.manual #troops > ul > li a,
body.manual #buildings > ul > li a {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    color: #639d0a !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 24px !important;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.manual #troops > ul > li a:hover,
body.manual #buildings > ul > li a:hover {
    color: #436f05 !important;
    text-decoration: none !important;
}

/* صفحات الوحدة والمبنى داخل الدليل: بطاقة مضغوطة بدلاً من الفراغ الكبير. */
body.manual .manualEntry {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box;
}

body.manual .manualEntry .manualBack {
    display: inline-block;
    margin: 0 0 7px !important;
    color: #639d0a !important;
    font-size: 12px;
    text-decoration: none;
}

/* رابط «نظرة عامة» لا يحتاج هوامش الفقرة الافتراضية الكبيرة. */
body.manual .manualEntry > p:has(.manualBack) {
    margin: 4px 0 !important;
    line-height: 16px !important;
}

body.manual .manualEntry > p > .manualBack {
    margin: 0 !important;
}

body.manual .manualEntry h1.titleInHeader {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    margin: 0 0 9px !important;
    padding: 5px 8px !important;
    border: 1px solid #b8ca98;
    border-radius: 4px;
    background: linear-gradient(to left, #dfebca, #f8fbf2) !important;
    color: #3e5421 !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 22px !important;
    box-sizing: border-box;
}

body.manual .manualEntry h1.titleInHeader img {
    flex: 0 0 auto;
    margin: 0 !important;
}

body.manual .manualEntry h1.titleInHeader .tribe {
    color: #6c6c6c;
    font-size: 12px;
    font-weight: 400;
}

body.manual .manualTroop .bigUnitSection {
    float: right !important;
    width: 132px;
    min-height: 150px;
    margin: 0 0 8px 10px !important;
    text-align: center;
}

body.manual .manualTroop .bigUnitSection img {
    max-width: 132px;
    height: 150px !important;
    background-position: center center !important;
    background-size: auto 150px !important;
}

body.manual .manualTroop .boxes {
    float: none !important;
    width: auto !important;
    margin: 0 142px 7px 0 !important;
    padding: 5px !important;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    background: #fafafa !important;
    box-sizing: border-box;
}

body.manual .manualTroop .boxes > :not(.boxes-contents) {
    display: none !important;
}

/* تبقى بطاقات رموز القتال فقط؛ لا حاجة للوحة الرمادية خلفها. */
body.manual .manualTroop .boxes:has(table#troop_info) {
    background: transparent !important;
}

body.manual .manualTroop table#troop_info,
body.manual .manualTroop table.troopData {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
}

body.manual .manualTroop table#troop_info td,
body.manual .manualTroop table.troopData th,
body.manual .manualTroop table.troopData td {
    padding: 3px 4px !important;
    color: #3d3a34 !important;
    font-size: 11px !important;
    line-height: 18px !important;
    text-align: right !important;
    vertical-align: middle;
}

body.manual .manualTroop table.troopData tr + tr th,
body.manual .manualTroop table.troopData tr + tr td {
    border-top: 1px solid #dedede;
}

/* مؤشرات القتال: الرمز في صف والقيمة تحته، بدلاً من صف مزدحم. */
body.manual .manualTroop table#troop_info tr.combatStats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 5px;
}

body.manual .manualTroop table#troop_info tr.combatStats > td.combatStat {
    display: grid !important;
    grid-template-rows: 36px auto;
    align-items: center;
    justify-items: center;
    min-width: 0;
    padding: 0 2px 4px !important;
    border: 1px solid #cad9df;
    border-radius: 4px;
    background: linear-gradient(180deg, #fafdff 0%, #e7f0f4 100%);
    text-align: center !important;
    box-sizing: border-box;
}

body.manual .manualTroop table#troop_info .combatIcon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 34px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #dceaf0 0%, #f8fcfd 100%);
}

body.manual .manualTroop table#troop_info .combatIcon img {
    display: block;
    float: none !important;
    margin: 0 !important;
    transform: scale(1.35);
    transform-origin: center;
}

body.manual .manualTroop table#troop_info .combatValue {
    display: block;
    min-width: 2ch;
    color: #344854;
    font-size: 12px;
    font-weight: 700;
    line-height: 17px;
    direction: ltr;
}

/* صف موارد الوحدة والقتال لا يرثان شبكة الجداول القديمة ذات الأعمدة الأربعة. */
body.manual .manualTroop table#troop_info,
body.manual .manualTroop table#troop_info > tbody {
    display: block !important;
    width: 100% !important;
}

body.manual .manualTroop table#troop_info > tbody > tr:first-child {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100% !important;
}

body.manual .manualTroop table#troop_info > tbody > tr:first-child > td {
    display: block !important;
    width: auto !important;
}

body.manual .manualTroop table#troop_info > tbody > tr.combatStats {
    display: flex !important;
    width: 100% !important;
    gap: 5px;
    margin-top: 5px;
}

body.manual .manualTroop table#troop_info > tbody > tr.combatStats > td.combatStat {
    display: grid !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* صف الخصائص مختصر ومهوّى حتى لا تلتف كلماته على الهاتف. */
body.manual .manualTroop table.troopData th,
body.manual .manualTroop table.troopData td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    white-space: nowrap;
}

body.manual .manualTroop table.troopData .trainingTime {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    direction: rtl;
}

body.manual .manualTroop table.troopData .trainingTime .clock {
    flex: 0 0 auto;
    margin: 0 !important;
}

body.manual .manualEntry #t_desc,
body.manual .manualEntry #prereqs {
    clear: both;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 8px 10px;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    background: #fafafa;
    color: #45413b;
    line-height: 1.55;
    box-sizing: border-box;
}

body.manual .manualEntry #prereqs a {
    color: #639d0a !important;
    font-weight: 700;
}

body.manual .manualBuilding > img.building.big {
    float: right !important;
    width: 145px !important;
    height: 141px !important;
    margin: 0 0 8px 12px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

body.manual .manualBuilding p.description {
    float: none !important;
    width: auto !important;
    min-height: 141px;
    margin: 0 0 8px !important;
    padding: 9px 10px;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    background: #fafafa;
    line-height: 1.6;
    box-sizing: border-box;
}

body.manual .manualBuilding p.costsHeader,
body.manual .manualBuilding .resourceWrapper,
body.manual .manualBuilding .duration {
    clear: both;
}

body.manual .manualBuilding p.costsHeader {
    margin: 8px 0 4px !important;
    color: #4a5f26;
    font-weight: 700;
    text-align: center;
}

body.manual .manualBuilding .resourceWrapper {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 9px;
    margin: 0 !important;
    padding: 7px 9px;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    background: #fafafa;
}

body.manual .manualBuilding .duration {
    display: flex !important;
    align-items: center;
    justify-content: center;
    direction: ltr;
    gap: 4px;
    margin: 8px 0 !important;
}

body.manual .answers,
body.manual #anwersQuestionMark {
    display: none !important;
}

/* حاوية الدليل: إطار فضي واحد فقط، بلا زخارف متراكبة من نافذة Travian القديمة. */
.dialog.trav47ManualDialog .dialog-background-tl,
.dialog.trav47ManualDialog .dialog-background-tc,
.dialog.trav47ManualDialog .dialog-background-tr,
.dialog.trav47ManualDialog .dialog-background-ml,
.dialog.trav47ManualDialog .dialog-background-mc,
.dialog.trav47ManualDialog .dialog-background-mr,
.dialog.trav47ManualDialog .dialog-background-bl,
.dialog.trav47ManualDialog .dialog-background-bc,
.dialog.trav47ManualDialog .dialog-background-br {
    background: #e4edf1 !important;
    background-image: none !important;
}

.dialog.trav47ManualDialog .dialog-contents,
.dialog.trav47ManualDialog .dialogContents {
    border: 1px solid #8caebb !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(31, 55, 66, .28) !important;
}

/* لا تترك حاوية الحوار هامشاً قبل بداية صفحة الدليل. */
.dialog.trav47ManualDialog .dialog-container {
    padding: 0 !important;
}

/* يعمل أيضاً مع نافذة دليل فُتحت قبل تحميل نسخة JavaScript الجديدة. */
.dialog:has(iframe.popup[src*="manual.php"]) .dialog-container {
    padding: 0 !important;
}

/* لا ترث صفحة الدليل الطبقة الداخلية العامة ذات التدرج الأزرق. */
.dialog.trav47ManualDialog #dialogContent,
.dialog.trav47ManualDialog .content#dialogContent,
.dialog:has(iframe.popup[src*="manual.php"]) #dialogContent,
.dialog:has(iframe.popup[src*="manual.php"]) .content#dialogContent {
    padding: 0 !important;
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dialog.trav47ManualDialog .title {
    min-height: 26px !important;
    padding: 4px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #a9c1ca !important;
    background: linear-gradient(#f8fbfc, #e6f0f3) !important;
    color: #385568 !important;
    font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 18px !important;
    text-shadow: none !important;
}

.dialog.trav47ManualDialog #dialogCancelButton.iconButton.small.cancel {
    display: block !important;
    position: absolute !important;
    top: 5px !important;
    right: auto !important;
    left: 8px !important;
    z-index: 3;
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #83a4b2 !important;
    border-radius: 4px !important;
    background: #f8fbfc !important;
    color: #b54b43 !important;
    cursor: pointer;
}

.dialog.trav47ManualDialog #dialogCancelButton.iconButton.small.cancel:before {
    content: "×";
    display: block;
    font: 700 19px/17px Arial, sans-serif;
    text-align: center;
}

.dialog.trav47ManualDialog #dialogCancelButton.iconButton.small.cancel:hover {
    border-color: #9b5149 !important;
    background: #fff1ef !important;
}

.dialog.trav47ManualDialog iframe.popup {
    display: block !important;
    margin: 0 !important;
    border: 0 !important;
    background: #fff !important;
}

/* تبويبات الدليل: بلا خطوط خلفية قديمة وبحشوة مريحة للنص. */
body.manual .contentNavi.tabNavi {
    gap: 3px !important;
    direction: rtl !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 28px;
    margin-bottom: 12px !important;
    border-bottom: 0 !important;
    background: none !important;
    background-image: none !important;
}

body.manual .contentNavi.tabNavi .container {
    direction: rtl;
}

body.manual .contentNavi.tabNavi .container {
    min-width: 80px;
    height: auto !important;
    min-height: 28px;
    overflow: visible !important;
}

body.manual .contentNavi.tabNavi .content {
    height: auto !important;
    min-height: 26px;
    padding: 0 !important;
}

body.manual .contentNavi.tabNavi .content .tabItem {
    height: auto !important;
    min-height: 26px;
    padding: 4px 12px !important;
    line-height: 18px !important;
    white-space: nowrap;
    box-sizing: border-box;
}

body.manual #troops,
body.manual #buildings {
    border-bottom: 0 !important;
}

/* عنوان التصنيف وتبويباته في شريط واحد داخل الدليل. */
body.manual #troops,
body.manual #buildings {
    position: relative;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 36px auto;
    column-gap: 0;
    row-gap: 10px;
    margin: 0 0 20px !important;
    padding: 0 !important;
    overflow: visible;
}

body.manual #troops:before,
body.manual #buildings:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: 36px;
    border: 1px solid #b8ca98;
    border-radius: 4px;
    background: linear-gradient(to left, #dfebca, #f8fbf2);
    box-sizing: border-box;
}

body.manual #troops > h3,
body.manual #buildings > h3 {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    min-height: 36px;
    margin: 0 !important;
    padding: 5px 11px 5px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    white-space: nowrap;
}

body.manual #troops > .contentNavi.tabNavi,
body.manual #buildings > .contentNavi.tabNavi {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    align-self: center;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 3px 0 3px 8px !important;
    background: transparent !important;
}

body.manual #troops > ul,
body.manual #buildings > ul {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 !important;
}

/* القبائل الخمس تبقى ظاهرة في سطر القوات. */
body.manual #troops > .contentNavi.tabNavi .container {
    min-width: 68px;
}

body.manual #troops > .contentNavi.tabNavi .content .tabItem {
    padding-right: 8px !important;
    padding-left: 8px !important;
    font-size: 11px !important;
}

/* المباني فقط: مساحة الوصف في اليمين وصورة المبنى في اليسار. */
html[data-trav47-layout="desktop"] 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;
}

html[data-trav47-layout="desktop"] body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > .roundedCornersBox.big .stickyImage {
    right: auto !important;
    left: 8px !important;
}

html[data-trav47-layout="desktop"] body.build #content #build:not(.gid0):not(.gid1):not(.gid2):not(.gid3):not(.gid4) > .roundedCornersBox.big .stickyImage a.build_logo,
html[data-trav47-layout="desktop"] 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;
}

html[data-trav47-layout="desktop"] 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;
}

/* سطح المكتب فقط: لا نحتفظ بمساحة الـ40px القديمة فوق رسالة المستوى
   الأقصى؛ صورة المبنى مطلقة الموضع ولا تحتاج هذه الحشوة. */
@media screen and (min-width: 1025px) {
    body.build #content #build > .roundedCornersBox.big.headlineOnly {
        padding-top: 0 !important;
    }

    /* Enlarge only the building sprite by 10% (.75 -> .825).  Its absolute
       container and the description card keep their existing dimensions. */
    html#mainLayout body.build #content #build > .roundedCornersBox.big .stickyImage img.build_logo.building.big {
        transform: scale(.825) !important;
        transform-origin: top left !important;
    }

    /* The legacy round heading is 5px wider and shifted to the right.  That
       makes section bars escape the building window on desktop. */
    body.build #content #build h4.round {
        right: 0 !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Legacy building tabs are visually raised by 9px.  Cancel the layout
       space they leave behind whenever the grassy description follows. */
    body.build #content #build:not(.gid44) > .contentNavi.subNavi.tabFavorWrapper:has(+ #descriptionAndInfo) {
        margin-bottom: -9px !important;
    }

    /* بطاقات وصف المباني تملأ الحافة البيضاء الداخلية من الأعلى والجانبين. */
    body.build #center #contentOuterContainer .contentContainer > #content.build:has(> #build:not(.gid44) > #descriptionAndInfo) {
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* Keep the first view of every tabbed building on the exact same content
       grid as its remaining tabs. The grassy description stays edge-to-edge
       through its own width instead of changing the whole page padding. */
    html#mainLayout[data-trav47-layout="desktop"] body.build #center #contentOuterContainer .contentContainer > #content.build:has(> #build:is(.gid16, .gid17, .gid25, .gid26, .gid27, .gid37, .gid44) > .contentNavi.subNavi.tabFavorWrapper) {
        padding-top: 9px !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.build #content #build:is(.gid16, .gid17, .gid25, .gid26, .gid27, .gid37, .gid44) > #descriptionAndInfo {
        width: calc(100% + 12px) !important;
        max-width: none !important;
        margin-right: -6px !important;
        margin-left: -6px !important;
        box-sizing: border-box !important;
    }

    body.build #content #build > #descriptionAndInfo {
        border-radius: 0 !important;
    }

    body.build #content #build > #descriptionAndInfo table#build_value th {
        padding-right: 0 !important;
        padding-left: 8px !important;
        text-align: left !important;
    }

    body.build #content #build > #descriptionAndInfo table#build_value {
        width: fit-content !important;
        min-width: 260px !important;
        max-width: calc(100% - 12px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body.build #content #build > #descriptionAndInfo table#build_value td {
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: right !important;
    }

    body.build #content #build.gid36 > .trav47TrapperStatus {
        direction: rtl !important;
        display: flex !important;
        align-items: stretch !important;
        gap: 7px !important;
        width: calc(100% - 20px) !important;
        margin: 0 10px 9px !important;
        padding: 7px !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;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    body.build #content #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusHeading {
        display: flex !important;
        flex: 0 0 132px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        min-width: 0 !important;
        padding: 5px 8px !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: 12px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
    }

    body.build #content #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusHeading img.unit {
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: scale(.9) !important;
        transform-origin: center !important;
    }

    body.build #content #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusStats {
        display: grid !important;
        flex: 1 1 auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    body.build #content #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusItem {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-width: 0 !important;
        padding: 5px 9px !important;
        border: 1px solid rgba(121, 101, 66, .2) !important;
        border-radius: 3px !important;
        background: rgba(255, 255, 255, .7) !important;
        color: #5a5142 !important;
        font-size: 11px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
    }

    body.build #content #build.gid36 > .trav47TrapperStatus .trav47TrapperStatusItem strong {
        color: #5f8f13 !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

/* الدليل السريع: أيقونات الموارد في شريط تكلفة القوات والمباني أصغر 25%. */
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;
}

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: 46px;
    min-height: 26px;
    padding: 2px 7px;
    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(.9);
    transform-origin: center;
}

body.manual .manualTroop .cropBalance::after {
    content: "✓";
    position: absolute;
    right: 2px;
    bottom: 1px;
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    border: 1px solid #eaf6dc;
    border-radius: 50%;
    color: #fff;
    background: #5c9c27;
    font: 700 10px/1 Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(35, 76, 15, .35);
}

/* صفحة الإنتاج على سطح المكتب: نافذة فضية موحّدة بدلاً من الفقاعات القديمة. */
html[data-trav47-layout="desktop"] #content.production {
    direction: rtl;
    padding: 10px 12px 16px !important;
    border: 1px solid #8caebb;
    border-radius: 6px;
    background: linear-gradient(180deg, #fafdff 0%, #e2edf2 100%) !important;
    box-shadow: 0 5px 16px rgba(31, 55, 66, .22);
    color: #334b58;
    box-sizing: border-box;
}

html[data-trav47-layout="desktop"] #content.production .titleInHeader {
    min-height: 30px;
    margin: -10px -12px 10px !important;
    padding: 5px 12px !important;
    border: 0;
    border-bottom: 1px solid #a9c1ca;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(#f8fbfc, #e6f0f3) !important;
    color: #385568 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: right;
    text-shadow: none;
}

html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi {
    display: flex !important;
    justify-content: flex-start;
    gap: 3px;
    margin: 0 0 12px !important;
    padding: 0 !important;
    direction: rtl;
}

html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi .container {
    flex: 0 0 auto;
    min-width: 72px;
}

/* تبويبات موارد الإنتاج: بدل الشريط البيج القديم بتبويبات فضية ظاهرة. */
html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 36px;
    height: 36px !important;
    padding: 3px !important;
    border: 1px solid #a9c1ca !important;
    border-radius: 4px;
    background: linear-gradient(#f8fbfc, #e6f0f3) !important;
    box-sizing: border-box;
    z-index: auto !important;
}

html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi .container {
    float: none !important;
    height: 28px !important;
    min-width: 72px;
    margin: 0 !important;
    border: 1px solid #a9c1ca;
    border-radius: 3px;
    background: linear-gradient(#fff, #e5eef2) !important;
    box-sizing: border-box;
}

html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi .container.active {
    border-color: #638797;
    background: linear-gradient(#8fadb9, #638797) !important;
}

html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi :is(.background-start, .background-end) {
    display: none !important;
}

html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi .container .content,
html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi .container .tabItem {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    color: #385568 !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 26px !important;
    text-decoration: none !important;
    box-sizing: border-box;
}

html[data-trav47-layout="desktop"] #content.production > .contentNavi.subNavi .container.active .tabItem {
    color: #fff !important;
}

html[data-trav47-layout="desktop"] #content.production .productionContainer,
html[data-trav47-layout="desktop"] #content.production .cropBalanceContainer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 12px;
    float: none !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    direction: rtl;
}

html[data-trav47-layout="desktop"] #content.production .total.productionContainer {
    margin-top: 0 !important;
}

/* نظرة عامة على القمح: لا تورّث البطاقات الجانبية عرضها الثابت القديم (304px). */
html[data-trav47-layout="desktop"] #content.production .cropBalanceContainer > :is(.productionBoostSpeechBubble, .balanceCropBalancePart) {
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html[data-trav47-layout="desktop"] #content.production .cropBalanceContainer .balanceTroops .boxes,
html[data-trav47-layout="desktop"] #content.production .cropBalanceContainer .balanceTroops .boxes-contents {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html[data-trav47-layout="desktop"] #content.production .productionPerHour,
html[data-trav47-layout="desktop"] #content.production .productionPerHourTotal,
html[data-trav47-layout="desktop"] #content.production .balanceCropBalancePart,
html[data-trav47-layout="desktop"] #content.production .productionBoostSpeechBubble,
html[data-trav47-layout="desktop"] #content.production .productionBoostResourceSpeechBubble {
    position: static !important;
    min-width: 0;
    margin: 0 !important;
    padding: 9px !important;
    border: 1px solid #b8cbd4;
    border-radius: 4px;
    background: rgba(255, 255, 255, .78) !important;
    box-sizing: border-box;
}

html[data-trav47-layout="desktop"] #content.production h4,
html[data-trav47-layout="desktop"] #content.production .productionBoostSpeechBubble h5 {
    margin: 0 0 7px !important;
    padding: 0 0 5px !important;
    border-bottom: 1px solid #c7d7de;
    color: #385568;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: right;
}

html[data-trav47-layout="desktop"] #content.production table.row_table_data {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

html[data-trav47-layout="desktop"] #content.production table.row_table_data td {
    padding: 5px 7px !important;
    border: 0 !important;
    border-bottom: 1px solid #d9e4e8 !important;
    color: #334b58;
    background: transparent !important;
    line-height: 18px;
    text-align: right;
}

html[data-trav47-layout="desktop"] #content.production .productionPerHour thead td {
    color: #fff;
    background: linear-gradient(#7c9aaa, #58798a) !important;
    font-weight: 700;
    text-align: center;
}

html[data-trav47-layout="desktop"] #content.production .numberCell {
    direction: ltr;
    text-align: left !important;
    white-space: nowrap;
}

html[data-trav47-layout="desktop"] #content.production tr.productionSum td,
html[data-trav47-layout="desktop"] #content.production tr.total td,
html[data-trav47-layout="desktop"] #content.production tr.subtotal td {
    border-color: #a9c1ca !important;
    color: #2f5365;
    font-weight: 700;
}

html[data-trav47-layout="desktop"] #content.production .fluidSpeechBubble-container,
html[data-trav47-layout="desktop"] #content.production .fluidSpeechBubble,
html[data-trav47-layout="desktop"] #content.production .fluidSpeechBubble-contents {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-trav47-layout="desktop"] #content.production :is(.fluidSpeechBubble-tl, .fluidSpeechBubble-tr, .fluidSpeechBubble-tc, .fluidSpeechBubble-ml, .fluidSpeechBubble-mr, .fluidSpeechBubble-mc, .fluidSpeechBubble-bl, .fluidSpeechBubble-br, .fluidSpeechBubble-bc, .speechArrowBack) {
    display: none !important;
}

html[data-trav47-layout="desktop"] #content.production .productionBoostSpeechBubbleFurtherInfo {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #d9e4e8;
    color: #526b78;
    font-size: 12px;
    line-height: 18px;
}

/* لا تسمح بعرض الفقاعة القديم الثابت أن يتجاوز عمود العلاوات. */
html[data-trav47-layout="desktop"] #content.production :is(.productionBoostSpeechBubble, .productionBoostResourceSpeechBubble, .fluidSpeechBubble-container, .fluidSpeechBubble) {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html[data-trav47-layout="desktop"] #content.production .productionBoostSpeechBubbleFurtherInfo,
html[data-trav47-layout="desktop"] #content.production .productionBoostSpeechBubble p {
    overflow-wrap: anywhere;
}

/* ترويسة الإنتاج: الترويسة القديمة كانت بيج وفارغة؛ هذه ترويسة فضية بعنوان فعلي. */
html[data-trav47-layout="desktop"] #center #contentOuterContainer:has(#content.production) .productionContentTitle {
    position: relative;
    height: 38px !important;
    border: 1px solid #8caebb;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(#f8fbfc, #e6f0f3) !important;
    box-sizing: border-box;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer:has(#content.production) .productionContentTitle .productionWindowTitle {
    display: block;
    padding: 9px 12px 0 42px;
    color: #385568;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: right;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer:has(#content.production) .productionContentTitle #closeContentButton {
    position: absolute !important;
    top: 8px !important;
    left: 9px !important;
    display: grid !important;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    border: 1px solid #91afbc;
    border-radius: 3px;
    background: #f5fafc;
    color: #b84032;
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
    box-sizing: border-box;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer:has(#content.production) .productionContentTitle #closeContentButton::before {
    content: "×";
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer:has(#content.production) .productionContentTitle #answersButton {
    display: none !important;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer:has(#content.production) .contentContainer {
    padding: 0 0 10px !important;
    border: 1px solid #8caebb;
    border-top: 0;
    background: #e4edf1 !important;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer:has(#content.production) #content.production .titleInHeader {
    display: none !important;
}

/* قاعدة مباشرة للحاوية نفسها، كي لا تبقى الترويسة القديمة أو محتواها الخفي. */
html[data-trav47-layout="desktop"] #center #contentOuterContainer.productionWindow .productionContentTitle {
    position: relative;
    height: 38px !important;
    border: 1px solid #8caebb !important;
    border-bottom: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    background: linear-gradient(#f8fbfc, #e6f0f3) !important;
    background-image: linear-gradient(#f8fbfc, #e6f0f3) !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer.productionWindow .contentContainer {
    padding: 0 0 10px !important;
    border: 1px solid #8caebb !important;
    border-top: 0 !important;
    background: #e4edf1 !important;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer.productionWindow .productionWindowTitle {
    display: block;
    padding: 9px 12px 0 42px;
    color: #385568;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: right;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer.productionWindow #closeContentButton {
    position: absolute !important;
    top: 8px !important;
    left: 9px !important;
    display: grid !important;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    border: 1px solid #91afbc;
    border-radius: 3px;
    background: #f5fafc;
    color: #b84032;
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
    box-sizing: border-box;
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer.productionWindow #closeContentButton::before {
    content: "×";
}

html[data-trav47-layout="desktop"] #center #contentOuterContainer.productionWindow #content.production .titleInHeader {
    display: none !important;
}

/* سطح المكتب: إجراءات القرى الأخرى داخل قائمة القرى. */
@media screen and (min-width: 1025px) {
    body:not(.travianMobile) #sidebarBoxVillagelist .content,
    body:not(.travianMobile) #sidebarBoxVillagelist .content ul {
        overflow: visible !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li {
        position: relative;
        height: 25px !important;
        min-height: 25px !important;
        overflow: visible;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li > a {
        height: 25px !important;
        min-height: 25px !important;
        grid-template-rows: 25px !important;
        -ms-grid-rows: 25px !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li > a .iconAndNameWrapper {
        position: relative !important;
        top: -2px !important;
        height: 25px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        box-sizing: border-box;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li.hasVillageActions > a .iconAndNameWrapper {
        grid-template-columns: 15px minmax(0, 1fr) !important;
        -ms-grid-columns: 15px 1fr !important;
        padding-left: 0 !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li.hasVillageActions:not(.active) > a {
        padding-left: 26px !important;
        box-sizing: border-box;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li.hasVillageActions > a .iconAndNameWrapper .name {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li > a .name,
    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li > a .coordinatesGrid {
        font-size: 14px !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li > a .coordinatesGrid {
        position: relative !important;
        top: -2px !important;
        height: 25px !important;
        padding-left: 7px !important;
        padding-top: 4px !important;
        box-sizing: border-box;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li.hasVillageActions:not(.active) > a .coordinatesGrid .coordinatesAligned {
        transform: translateX(10px) !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsToggle {
        position: absolute;
        top: 50%;
        left: 2px;
        z-index: 80;
        display: inline-flex;
        width: 18px;
        height: 21px;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 1px solid #b99b70;
        border-radius: 3px;
        background: #ddc6a2;
        box-shadow: inset 0 1px rgba(255, 255, 255, .48), 0 1px rgba(82, 57, 32, .12);
        color: #5c4028;
        cursor: pointer;
        transform: translateY(-50%);
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li.active > .villageActionsToggle,
    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li.active > .villageActionsMenu,
    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsToggle[hidden],
    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu[hidden] {
        display: none !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsToggle svg {
        display: none;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsToggle::before {
        content: "\22EE";
        display: block;
        width: 100%;
        color: currentColor;
        font: 900 20px/19px Arial Black, Arial, Tahoma, sans-serif;
        text-align: center;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsToggle:hover,
    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsToggle:focus-visible {
        border-color: #a98557;
        color: #442b19;
        background: #cfb181;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu {
        position: absolute;
        bottom: calc(100% + 4px);
        left: 3px;
        z-index: 300;
        display: grid;
        min-width: 164px;
        max-width: min(250px, calc(100vw - 18px));
        overflow: hidden;
        border: 14px solid transparent;
        border-image: url("../../../images/ui/boxes/default_paper.png") 28 30 30 34 fill stretch;
        background: transparent;
        box-shadow: 0 2px 6px rgba(45,31,17,.36);
        direction: rtl;
        text-align: right;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu[hidden] {
        display: none;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist.villageActionsOpen {
        position: relative;
        z-index: 100 !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist.villageActionsOpen > .content {
        position: relative;
        z-index: 120 !important;
        overflow: visible !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageListHeaderRow {
        position: relative;
        z-index: 1 !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .content ul li.villageActionsMenuOpen {
        z-index: 250 !important;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu .villageActionsTitle {
        min-width: 0;
        padding: 1px 3px 6px;
        border-bottom: 1px solid rgba(93,67,42,.32);
        color: #61332b;
        font-size: 11px;
        font-weight: 700;
        line-height: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu .villageActionsTitle span {
        display: inline-block;
        max-width: 118px;
        margin-right: 3px;
        padding: 0 4px;
        overflow: hidden;
        border-radius: 2px;
        color: #4f5e43;
        background: rgba(164, 192, 132, .24);
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu > :is(a, span.disabled) {
        display: block;
        min-height: 27px;
        padding: 5px 8px;
        border-bottom: 1px solid rgba(93,67,42,.2);
        color: #513d2e;
        font-size: 11px;
        font-weight: 700;
        line-height: 17px;
        text-decoration: none;
        white-space: nowrap;
        box-sizing: border-box;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu > :is(a, span.disabled):last-child {
        border-bottom: 0;
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu a:hover {
        background: rgba(255,250,232,.72);
    }

    body:not(.travianMobile) #sidebarBoxVillagelist .villageActionsMenu .disabled {
        color: #8c9497;
        background: rgba(115,108,96,.12);
        cursor: not-allowed;
    }
}

/* الهاتف: نعرض رسالة مستقلة في الوضع الأفقي بدلاً من واجهة اللعبة. */
@media screen and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    html,
    body {
        overflow: hidden !important;
    }

    body::after {
        content: "↻\A للحصول على أفضل تجربة،\Aيرجى استخدام الموقع بالوضع العمودي";
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        margin: 0;
        background: linear-gradient(180deg, #f8fcfe 0%, #dceaf0 100%);
        color: #385568;
        font-family: Arial, Helvetica, Verdana, sans-serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.85;
        text-align: center;
        white-space: pre-line;
        direction: rtl;
        box-sizing: border-box;
    }
}

/* Shop / Benefits: keep the Gold Club lifetime label clear of its action. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureDuration {
    right: -10px !important;
}

/* Active benefits always use one vertical action stack:
   button, 5px, automatic renewal, 5px, live remaining time. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:has(.featureDuration input[type="checkbox"]) .featureButton {
    bottom: 45px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:has(.featureDuration input[type="checkbox"]) .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:has(.featureDuration input[type="checkbox"]) .featureRenewal {
    position: absolute !important;
    bottom: 25px !important;
    height: 15px !important;
    margin: 0 !important;
    transform: none !important;
    font-size: 10px !important;
    line-height: 15px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:has(.featureDuration input[type="checkbox"]) .featureRemainingTime {
    position: absolute !important;
    bottom: 5px !important;
    height: 15px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* The two wide cards keep their action stack at the left edge. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(-n+2):has(.featureDuration input[type="checkbox"]) .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(-n+2):has(.featureDuration input[type="checkbox"]) .featureRenewal,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(-n+2):has(.featureDuration input[type="checkbox"]) .featureRemainingTime {
    right: auto !important;
    left: -10px !important;
    width: 100px !important;
    max-width: 100px !important;
}

/* Resource cards keep the same stack centred under their action button. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3):has(.featureDuration input[type="checkbox"]) .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3):has(.featureDuration input[type="checkbox"]) .featureRenewal,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(n+3):has(.featureDuration input[type="checkbox"]) .featureRemainingTime {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Plus account: reserve a real action rail opposite the description instead
   of inheriting the legacy 132px left margin that pushes controls inward. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureContent {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding-right: 78px !important;
    padding-left: 120px !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureButton {
    right: auto !important;
    left: 25px !important;
    transform: none !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2) .featureRenewal {
    right: auto !important;
    left: 10px !important;
    width: 100px !important;
    max-width: 100px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2):not(:has(.featureDuration input[type="checkbox"])) .featureButton {
    bottom: 28px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2):has(.featureDuration input[type="checkbox"]) .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2):has(.featureDuration input[type="checkbox"]) .featureRenewal,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2):has(.featureDuration input[type="checkbox"]) .featureRemainingTime {
    right: auto !important;
    left: 10px !important;
    width: 100px !important;
    max-width: 100px !important;
}

/* Raise the complete Plus action rail so its button faces the description. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2):has(.featureDuration input[type="checkbox"]) .featureButton {
    bottom: 80px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2):has(.featureDuration input[type="checkbox"]) .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2):has(.featureDuration input[type="checkbox"]) .featureRenewal {
    bottom: 60px !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(2):has(.featureDuration input[type="checkbox"]) .featureRemainingTime {
    bottom: 40px !important;
}

/* Gold Club uses the same opposite-side action rail as Plus. */
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureContent {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding-right: 78px !important;
    padding-left: 120px !important;
    box-sizing: border-box !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureButton {
    right: auto !important;
    bottom: 75px !important;
    left: 25px !important;
    transform: none !important;
}

.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureDuration,
.dialog.trav47PaymentShop #paymentWizard.pros .featureCollection > .feature:nth-child(1) .featureRenewal {
    right: auto !important;
    bottom: 55px !important;
    left: 10px !important;
    width: 100px !important;
    max-width: 100px !important;
    margin: 0 !important;
    text-align: center !important;
    transform: none !important;
}

/* Dorf2 building plots: do not paint a browser tap highlight or a pressed
   overlay on buildings and wall shapes. Navigation remains handled by the
   existing click listeners, while the normal mouse hover stays unchanged. */
body.village2 #village_map,
body.village2 #village_map .buildingSlot,
body.village2 #village_map .buildingSlot *,
body.village2 #village_map svg,
body.village2 #village_map svg * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    outline: none !important;
}

body.village2 #village_map .buildingSlot .level:active ~ svg .hoverShape path,
body.village2 #village_map .buildingSlot .level:active ~ svg .hoverShapeWinter path,
body.village2 #village_map .buildingSlot svg.buildingShape .clickShape:active + .hoverShape path,
body.village2 #village_map .buildingSlot svg.buildingShape .clickShapeWinter:active + .hoverShapeWinter path,
body.village2 #village_map .buildingSlot svg.buildingShape .hoverShape:active path,
body.village2 #village_map .buildingSlot svg.buildingShape .hoverShapeWinter:active path,
body.village2 #village_map .buildingSlot svg.buildingShape.active > .hoverShape path,
body.village2 #village_map .buildingSlot svg.buildingShape.active > .hoverShapeWinter path {
    fill: transparent !important;
}

/* Dorf1 resource fields and the village-centre image use their own SVG hit
   areas. Suppress only their pressed/tap paint, not their hover or links. */
body.village1 #resourceFieldContainer,
body.village1 #resourceFieldContainer .level,
body.village1 #resourceFieldContainer svg,
body.village1 #resourceFieldContainer svg * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    outline: none !important;
}

body.village1 #resourceFieldContainer .level:active ~ svg.resourceField path,
body.village1 #resourceFieldContainer svg.resourceField > path:active,
body.village1 #resourceFieldContainer svg.villageCenter > path:active {
    fill: transparent !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
}

/* Desktop Top 10: two paired cards per row with shared row alignment. */
@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "offs climbers"
            "defs raiders" !important;
        align-items: start !important;
        gap: 18px 12px !important;
        width: 100% !important;
        margin: 0 !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid > .top10Wrapper {
        display: contents !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        right: auto !important;
        left: auto !important;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid > .clear,
    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid br {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid .top10Block {
        align-self: start !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid .top10BlockOffs {
        grid-area: offs;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid .top10BlockDefs {
        grid-area: defs;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid .top10BlockClimbers {
        grid-area: climbers;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid .top10BlockRaiders {
        grid-area: raiders;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid .top10Block > h4.round.small {
        width: 100% !important;
        right: 0 !important;
        margin: 0 0 8px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.statistics #content.statistics > .playerTop10Grid .top10Block > table.top10 {
        width: 100% !important;
        margin: 0 !important;
        table-layout: fixed !important;
    }
}
/* Desktop-only header tools: never let these legacy controls leak into the
   three compact layouts merely because their saved layout is "desktop". */
@media screen and (min-width: 1025px) {
    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .statistics, .message, .reports).rtl:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > #answersButton,
    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .statistics, .message, .reports).rtl:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > #tabFavorButton {
        display: block !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .statistics, .message, .reports).rtl:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > .contentTitleButton {
        position: relative !important;
        top: 26px !important;
        right: auto !important;
        bottom: auto !important;
        float: left !important;
        margin-left: 7px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .statistics, .message, .reports).rtl:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > #closeContentButton {
        left: 40px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .statistics, .message, .reports).rtl:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > #answersButton,
    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .statistics, .message, .reports).rtl:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > #tabFavorButton {
        left: 45px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body:is(.build, .statistics, .message, .reports).rtl:not(.village1):not(.village2) #center #contentOuterContainer > .contentTitle > #tabFavorButton.is-active {
        box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #f2c24e, 0 0 4px rgba(73, 47, 9, .7);
    }
}

/* Resource exchange dialog: one canonical component for every exchange button. */
body > div:has(> .dialog #build.exchangeResources) {
    right: auto !important;
    left: 50% !important;
    width: min(510px, calc(100vw - 20px)) !important;
    max-width: min(510px, calc(100vw - 20px)) !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
}

.dialog:has(#build.exchangeResources) {
    position: relative !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    direction: rtl;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.dialog:has(#build.exchangeResources) .dialog-container,
.dialog:has(#build.exchangeResources) .dialog-contents,
.dialog:has(#build.exchangeResources) form,
.dialog:has(#build.exchangeResources) #dialogContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.dialog:has(#build.exchangeResources) .dialog-background-tl,
.dialog:has(#build.exchangeResources) .dialog-background-tc,
.dialog:has(#build.exchangeResources) .dialog-background-tr,
.dialog:has(#build.exchangeResources) .dialog-background-ml,
.dialog:has(#build.exchangeResources) .dialog-background-mc,
.dialog:has(#build.exchangeResources) .dialog-background-mr,
.dialog:has(#build.exchangeResources) .dialog-background-bl,
.dialog:has(#build.exchangeResources) .dialog-background-bc,
.dialog:has(#build.exchangeResources) .dialog-background-br,
.dialog:has(#build.exchangeResources) .buttons {
    display: none !important;
}

.dialog:has(#build.exchangeResources) .dialog-contents {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #eef4f3 !important;
    border: 1px solid #6e8b94 !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 18px rgba(20, 31, 31, .38), inset 0 0 0 2px rgba(255, 255, 255, .72) !important;
}

.dialog:has(#build.exchangeResources) form {
    position: relative !important;
    padding-top: 43px !important;
    background: transparent !important;
}

.dialog:has(#build.exchangeResources) .dialog-dragbar {
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #526b70 0%, #344b50 100%) !important;
    border: 0 !important;
    border-bottom: 2px solid #c69a39 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    box-sizing: border-box !important;
}

.dialog:has(#build.exchangeResources) .dialog-dragbar > * {
    display: none !important;
}

.dialog:has(#build.exchangeResources) .title {
    position: absolute !important;
    z-index: 3 !important;
    top: 0 !important;
    right: 43px !important;
    left: 43px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 41px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
}

.dialog:has(#build.exchangeResources) .title::before {
    content: "تبادل الموارد";
    color: #fff7dc;
    font: 700 16px/1 Tahoma, Arial, sans-serif;
    text-shadow: 0 1px 1px #18292d;
}

.dialog:has(#build.exchangeResources) #dialogCancelButton,
.dialog:has(#build.exchangeResources) .cancel {
    position: absolute !important;
    z-index: 5 !important;
    top: 9px !important;
    left: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    background: linear-gradient(180deg, #789c45 0%, #466c25 100%) !important;
    border: 1px solid #2f4e18 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 1px 2px rgba(20, 33, 18, .35) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.dialog:has(#build.exchangeResources) #dialogCancelButton::before,
.dialog:has(#build.exchangeResources) #dialogCancelButton::after,
.dialog:has(#build.exchangeResources) .cancel::before,
.dialog:has(#build.exchangeResources) .cancel::after {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: 4px !important;
    width: 14px !important;
    height: 2px !important;
    background: #fff8df !important;
    border: 0 !important;
    border-radius: 1px !important;
    box-shadow: 0 1px 0 rgba(33, 52, 21, .55) !important;
}

.dialog:has(#build.exchangeResources) #dialogCancelButton::before,
.dialog:has(#build.exchangeResources) .cancel::before {
    transform: rotate(45deg) !important;
}

.dialog:has(#build.exchangeResources) #dialogCancelButton::after,
.dialog:has(#build.exchangeResources) .cancel::after {
    transform: rotate(-45deg) !important;
}

.dialog:has(#build.exchangeResources) #dialogContent {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#build.exchangeResources {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 11px !important;
    overflow: hidden !important;
    color: #31484e !important;
    background: #eef4f3 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#build.exchangeResources .npc_desc {
    margin: 0 0 9px !important;
    padding: 8px 10px !important;
    color: #354e54 !important;
    font: 400 12px/1.6 Tahoma, Arial, sans-serif !important;
    text-align: right !important;
    text-decoration: none !important;
    background: #f8fbfa !important;
    border: 1px solid #bfd0d2 !important;
    border-right: 3px solid #6f913a !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
}

#build.exchangeResources table#npc {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    line-height: normal !important;
    background: transparent !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
}

#build.exchangeResources table#npc thead,
#build.exchangeResources table#npc tbody {
    display: block !important;
    width: 100% !important;
}

#build.exchangeResources table#npc tr {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#build.exchangeResources table#npc tbody tr:last-child {
    margin-bottom: 0 !important;
}

#build.exchangeResources table#npc tr::before {
    grid-column: 1 / -1 !important;
    display: block !important;
    margin: 0 !important;
    color: #64787c !important;
    font: 700 10px/1.2 Tahoma, Arial, sans-serif !important;
    text-align: right !important;
}

#build.exchangeResources table#npc thead tr::before {
    content: "الموارد الحالية";
}

#build.exchangeResources table#npc tbody tr:first-child::before {
    content: "التوزيع الجديد";
}

#build.exchangeResources table#npc tbody tr:last-child::before {
    content: "الفرق";
}

#build.exchangeResources table#npc th,
#build.exchangeResources table#npc td {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #31484e !important;
    font: 400 11px/1.25 Tahoma, Arial, sans-serif !important;
    text-align: center !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

#build.exchangeResources table#npc td.deco {
    display: none !important;
}

#build.exchangeResources table#npc td.all,
#build.exchangeResources table#npc td.sel,
#build.exchangeResources table#npc td.rem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 4px !important;
    background: #f9fbfa !important;
    border: 1px solid #c4d2d3 !important;
    border-radius: 5px !important;
}

#build.exchangeResources table#npc td.all {
    flex-direction: column !important;
    gap: 1px !important;
    min-height: 46px !important;
    background: linear-gradient(180deg, #fbfcf8 0%, #edf3e7 100%) !important;
    border-color: #bdcdaa !important;
}

#build.exchangeResources table#npc td.all a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 18px !important;
}

#build.exchangeResources table#npc td.all i {
    margin: 0 !important;
    vertical-align: middle !important;
}

#build.exchangeResources table#npc td.all span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #344a3d !important;
    font-weight: 700 !important;
    direction: ltr !important;
    text-overflow: ellipsis !important;
}

#build.exchangeResources table#npc td.sel {
    gap: 3px !important;
    padding: 3px !important;
}

#build.exchangeResources table#npc td.sel .exchangeResourceIcon {
    display: inline-block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

#build.exchangeResources table#npc td.sel input.text {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 2px 3px !important;
    color: #23383d !important;
    font: 700 11px/24px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
    direction: ltr !important;
    background: #fff !important;
    border: 1px solid #8fa7aa !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(40, 62, 66, .12) !important;
    box-sizing: border-box !important;
}

#build.exchangeResources table#npc td.sel input.text:focus {
    outline: 0 !important;
    border-color: #668e35 !important;
    box-shadow: 0 0 0 2px rgba(111, 145, 58, .18), inset 0 1px 2px rgba(40, 62, 66, .1) !important;
}

#build.exchangeResources table#npc td.rem {
    min-height: 27px !important;
    padding: 3px !important;
    color: #52676b !important;
    font-weight: 700 !important;
    direction: ltr !important;
    background: #e5edec !important;
    border-color: #c4d0d0 !important;
}

#build.exchangeResources table#npc td.sum {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 29px !important;
    padding: 5px 9px !important;
    color: #35494d !important;
    font-weight: 700 !important;
    text-align: right !important;
    background: #dce7e6 !important;
    border: 1px solid #b7c8c9 !important;
    border-radius: 5px !important;
}

#build.exchangeResources table#npc td.sum span {
    color: #4e7525 !important;
    font-weight: 700 !important;
    direction: ltr !important;
}

#build.exchangeResources #submitButton,
#build.exchangeResources #submitText {
    margin: 9px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

#build.exchangeResources #submitButton button,
#build.exchangeResources #submitText button {
    width: auto !important;
    min-width: 145px !important;
    min-height: 31px !important;
    margin: 0 auto !important;
    padding: 4px 15px !important;
    color: #fff9e8 !important;
    font: 700 12px/1.25 Tahoma, Arial, sans-serif !important;
    text-align: center !important;
    border: 1px solid #365617 !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, #82a947 0%, #4e761f 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 1px 2px rgba(31, 48, 19, .24) !important;
    text-shadow: 0 1px 1px #314f19 !important;
}

#build.exchangeResources #submitButton button {
    color: #403011 !important;
    border-color: #89651c !important;
    background: linear-gradient(180deg, #fff1a4 0%, #e3bc42 100%) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important;
}

#build.exchangeResources #submitButton button:hover,
#build.exchangeResources #submitText button:hover {
    filter: brightness(1.06) !important;
}

#build.exchangeResources #npc_market_button .button-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

#build.exchangeResources #npc_market_button .goldIcon {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    background-image: url('../../../images/ui/buttons/button/content/goldInner-rtl.png') !important;
    vertical-align: middle !important;
}

@media screen and (max-width: 520px) {
    body > div:has(> .dialog #build.exchangeResources) {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
    }

    .dialog:has(#build.exchangeResources) form {
        padding-top: 41px !important;
    }

    .dialog:has(#build.exchangeResources) .dialog-dragbar {
        height: 41px !important;
    }

    .dialog:has(#build.exchangeResources) .title {
        right: 39px !important;
        left: 39px !important;
        height: 39px !important;
    }

    .dialog:has(#build.exchangeResources) .title::before {
        font-size: 14px !important;
    }

    .dialog:has(#build.exchangeResources) #dialogCancelButton,
    .dialog:has(#build.exchangeResources) .cancel {
        top: 8px !important;
        left: 8px !important;
    }

    #build.exchangeResources {
        padding: 8px !important;
    }

    #build.exchangeResources .npc_desc {
        margin-bottom: 7px !important;
        padding: 6px 7px !important;
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    #build.exchangeResources table#npc tr {
        gap: 3px !important;
        margin-bottom: 5px !important;
    }

    #build.exchangeResources table#npc th,
    #build.exchangeResources table#npc td,
    #build.exchangeResources table#npc td.sel input.text {
        font-size: 10px !important;
    }

    #build.exchangeResources table#npc td.all {
        min-height: 43px !important;
        padding: 3px 2px !important;
    }

    #build.exchangeResources table#npc td.sel,
    #build.exchangeResources table#npc td.rem {
        padding-right: 2px !important;
        padding-left: 2px !important;
    }

    #build.exchangeResources table#npc td.sum {
        min-height: 27px !important;
        padding: 4px 7px !important;
    }
}
/* Shared map locations pasted into in-game messages. */
a.trav47-message-map-link,
div.messages #message a.trav47-message-map-link {
    color: #5b9b16 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

a.trav47-message-map-link:hover,
div.messages #message a.trav47-message-map-link:hover {
    color: #3f7d08 !important;
    text-decoration: none !important;
}
/* Desktop attack train. Kept outside phone layouts intentionally. */
@media screen and (min-width: 1025px) {
    body.build .attackTrainNotice {
        margin-bottom: 8px;
        padding: 7px 10px;
        border-radius: 4px;
        text-align: center;
        font-weight: 700;
    }
    body.build .attackTrainNotice.isSuccess { background: #edf7df; color: #3f6e0b; }
    body.build .attackTrainNotice.isError { background: #fde7e2; color: #9c271b; }
    body.build .attackTrainEntryActions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
    }
    body.build .attackTrainEntryActions #btn_ok,
    body.build .attackTrainEntryActions .attackTrainBuyButton {
        position: static !important;
        float: none !important;
        display: inline-block !important;
        height: 27px !important;
        min-height: 27px !important;
        margin: 0 !important;
        vertical-align: middle;
    }
    body.build .attackTrainEntryActions .attackTrainBuyButton {
        width: auto !important;
        min-width: max-content !important;
        padding: 4px 16px !important;
        box-sizing: border-box;
    }
    body.build .attackTrainEntryActions .attackTrainBuyButton .button-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
    }
    body.build .attackTrainAdd {
        display: inline-block;
        min-height: 28px;
        margin-inline-start: 7px;
        padding: 4px 13px;
        border: 1px solid #3f6f0c;
        border-radius: 5px;
        background: linear-gradient(180deg, #8fd128 0%, #5c9b10 58%, #417b06 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(38,76,0,.25);
        color: #fff;
        font-family: inherit;
        font-weight: 700;
        cursor: pointer;
        vertical-align: middle;
    }
    body.build .attackTrainBuyButton b { margin-inline-start: 3px; }
    body.build .attackTrainBuyButton img.gold {
        margin-inline-start: 3px;
        vertical-align: -4px;
    }
    body.build .attackTrainAdd:disabled { opacity: .45; cursor: default; }
    body.build .attackTrainConfirmationActions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 8px;
        direction: rtl;
    }
    body.build .attackTrainConfirmationActions #btn_ok,
    body.build .attackTrainConfirmationActions .trav47AttackEdit,
    body.build .attackTrainConfirmationActions .attackTrainAdd {
        position: static !important;
        float: none !important;
        margin: 0 !important;
    }
    body.build .attackTrainConfirm {
        width: min(100%, 620px);
        margin: 8px auto 16px;
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid #aebfc7;
        border-radius: 7px;
        background: linear-gradient(180deg, #f9fcfd, #e8f0f3);
        box-shadow: 0 3px 10px rgba(40,58,66,.2), inset 0 0 0 2px #fff;
    }
    body.build .attackTrainConfirmHeader {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 10px;
        padding: 8px 10px;
        border: 1px solid #cbd8dd;
        border-radius: 5px;
        background: #fff;
    }
    body.build .attackTrainConfirmHeader div { display: flex; flex-direction: column; gap: 3px; }
    body.build .attackTrainConfirmHeader strong { color: #2f4f5f; font-size: 16px; }
    body.build .attackTrainConfirmHeader span { color: #526b77; }
    body.build .attackTrainConfirmHeader em { color: #788c95; font-size: 11px; white-space: nowrap; }
    body.build .attackTrainConfirmHeader .attackTrainConfirmTarget {
        display: block;
        white-space: nowrap;
        text-align: center;
    }
    body.build .attackTrainConfirmHeader .attackTrainConfirmTarget > a {
        margin-inline-start: 2px;
        color: #5b930f;
        text-decoration: none;
    }
    body.build .attackTrainConfirmHeader .attackTrainConfirmTarget > a:hover {
        color: #3f7608;
        text-decoration: underline;
    }
    body.build .attackTrainSummary { display: grid; gap: 7px; }
    body.build .attackTrainWaveTable {
        position: relative;
        width: 100%;
        overflow: hidden;
        border: 1px solid #c7d2d6;
        border-radius: 5px;
        background: #fff;
    }
    body.build .attackTrainWaveTable table.troop_details {
        width: 100% !important;
        margin: 0 !important;
    }
    body.build .attackTrainWaveHeaderActions {
        position: absolute;
        z-index: 4;
        top: 3px;
        left: 4px;
        display: flex;
        direction: ltr;
        align-items: center;
        gap: 4px;
    }
    body.build .attackTrainWaveEditButton {
        display: grid;
        place-items: center;
        width: 21px !important;
        min-width: 0 !important;
        height: 21px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 3px !important;
        border: 1px solid #9dafb7;
        border-radius: 3px;
        background: linear-gradient(#fff, #e3ebee);
        box-shadow: 0 1px 2px rgba(41,59,68,.18);
        box-sizing: border-box;
        line-height: 0;
        appearance: none;
        cursor: pointer;
    }
    body.build .attackTrainWaveEditButton:hover { background: linear-gradient(#fff, #d7e5ea); }
    body.build .attackTrainWaveEditButton svg {
        display: block;
        width: 9px;
        height: 13px;
        margin: 0;
        fill: #526d79;
    }
    body.build .attackTrainWaveCopyButton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: 21px !important;
        min-height: 21px !important;
        max-height: 21px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        border: 1px solid #9fb58a;
        border-radius: 4px;
        background: linear-gradient(#f8fff1, #dcebcf);
        color: #416b1b;
        font: 700 11px/19px inherit;
        box-sizing: border-box;
        cursor: pointer;
    }
    body.build .attackTrainWaveCopyButton:hover { background: linear-gradient(#fff, #cee5ba); }
    body.build .attackTrainWaveTable table.troop_details td,
    body.build .attackTrainWaveTable table.troop_details th {
        box-sizing: border-box;
        text-align: center;
    }
    body.build .attackTrainWaveTable .attackTrainWaveTarget {
        white-space: nowrap;
        text-align: center;
    }
    body.build .attackTrainWaveTable .attackTrainWaveTarget > span,
    body.build .attackTrainWaveTable .attackTrainWaveTarget > a {
        display: inline-block;
        vertical-align: middle;
    }
    body.build .attackTrainWaveTable .attackTrainWaveTarget > a {
        margin-inline-start: 2px;
        color: #5b930f;
        font-weight: 700;
        text-decoration: none;
    }
    body.build .attackTrainWaveTable .attackTrainWaveTarget > a:hover {
        color: #3f7608;
        text-decoration: underline;
    }
    body.build .attackTrainTargetField {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 7px 8px;
        border-top: 1px solid #d7e0e3;
        background: #f5f8f9;
        box-sizing: border-box;
    }
    body.build .attackTrainTargetField > span:first-child {
        white-space: nowrap;
        font-weight: 700;
        color: #405966;
    }
    body.build .attackTrainTargetSelects {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: auto;
        min-width: 0;
    }
    body.build .attackTrainTargetSelects.isDouble {
        display: flex;
    }
    body.build .attackTrainTargetField select {
        width: 205px !important;
        min-width: 150px;
        max-width: 205px;
        margin: 0;
        font-family: inherit;
        box-sizing: border-box;
    }
    body.build .attackTrainConfirmActions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
    }
    body.build .attackTrainSend { margin: 0 !important; }
}
@media screen and (max-width: 1024px) {
    body.build .attackTrainDesktopInline { display: none !important; }
    body.build .attackTrainEntryActions {
        display: block;
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
    body.build .attackTrainEntryActions #btn_ok {
        display: block !important;
        margin: 10px auto 0 !important;
    }
}

/* Cross-server Hall of Fame Top 100 medal. The source artwork stays neutral;
   rank classes tint the same transparent PNG without duplicating assets. */
.trav47Top100MedalLink {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

button.trav47Top100MedalLink {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    appearance: none;
}

img.trav47Top100Medal,
.profileDescriptionSingle .description img.medal.trav47Top100Medal {
    width: 64px !important;
    height: 48px !important;
    object-fit: contain;
    transition: filter .18s ease, transform .18s ease;
}

.trav47Top100MedalLink:hover img.trav47Top100Medal,
.trav47Top100MedalLink:focus img.trav47Top100Medal {
    transform: translateY(-1px) scale(1.04);
}

img.trav47Top100Medal--ruby {
    filter: sepia(1) saturate(7) hue-rotate(315deg) brightness(.92) contrast(1.18) drop-shadow(0 1px 2px rgba(157, 13, 45, .45));
}

img.trav47Top100Medal--sapphire {
    filter: sepia(1) saturate(7) hue-rotate(165deg) brightness(.9) contrast(1.18) drop-shadow(0 1px 2px rgba(20, 76, 175, .42));
}

img.trav47Top100Medal--emerald {
    filter: sepia(1) saturate(6) hue-rotate(75deg) brightness(.88) contrast(1.16) drop-shadow(0 1px 2px rgba(12, 126, 73, .42));
}

img.trav47Top100Medal--amethyst {
    filter: sepia(1) saturate(6) hue-rotate(225deg) brightness(.9) contrast(1.16) drop-shadow(0 1px 2px rgba(111, 47, 164, .42));
}

img.trav47Top100Medal--bronze {
    filter: sepia(1) saturate(5) hue-rotate(338deg) brightness(.86) contrast(1.18) drop-shadow(0 1px 2px rgba(156, 78, 27, .42));
}

img.trav47Top100Medal--gold {
    filter: sepia(1) saturate(6) hue-rotate(354deg) brightness(1.08) contrast(1.12) drop-shadow(0 1px 2px rgba(181, 132, 9, .44));
}

img.trav47Top100Medal--silver {
    filter: grayscale(1) contrast(1.08) brightness(1.02) drop-shadow(0 1px 2px rgba(55, 61, 68, .3));
}

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

.trav47Top100RankModal {
    --top100-accent: #6d7580;
    --top100-deep: #3e454f;
    position: fixed;
    inset: 0;
    z-index: 10050;
}

.trav47Top100RankModal--ruby {
    --top100-accent: #ca3450;
    --top100-deep: #77172b;
}

.trav47Top100RankModal--sapphire {
    --top100-accent: #347ad1;
    --top100-deep: #17447f;
}

.trav47Top100RankModal--emerald {
    --top100-accent: #25a66a;
    --top100-deep: #11623e;
}

.trav47Top100RankModal--amethyst {
    --top100-accent: #9454c7;
    --top100-deep: #592676;
}

.trav47Top100RankModal--bronze {
    --top100-accent: #b97038;
    --top100-deep: #70401f;
}

.trav47Top100RankModal--gold {
    --top100-accent: #d5a92f;
    --top100-deep: #876416;
}

.trav47Top100RankModal--silver {
    --top100-accent: #7c8794;
    --top100-deep: #444c56;
}

.trav47Top100RankBackdrop {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: rgba(15, 18, 21, .38) !important;
    box-shadow: none !important;
    appearance: none;
}

.trav47Top100RankDialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    box-sizing: border-box;
    overflow: auto;
    transform: translate(-50%, -50%);
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, var(--top100-accent), var(--top100-deep));
    box-shadow: 0 16px 42px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .14);
}

.trav47Top100RankClose {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 50%;
    color: #fff !important;
    font: 700 20px/24px Arial, sans-serif !important;
    text-align: center;
    background: rgba(0, 0, 0, .16) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.trav47Top100RankHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 0 0 10px 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.trav47Top100RankHeader img.trav47Top100Medal {
    flex: 0 0 58px;
    width: 58px !important;
    height: 44px !important;
    padding: 4px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .14);
}

.trav47Top100RankHeader h3,
.trav47Top100RankHeader p {
    margin: 0;
    color: #fff;
}

.trav47Top100RankHeader h3 {
    max-width: 176px;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trav47Top100RankHeader p {
    margin-top: 2px;
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
}

.trav47Top100HallLink,
.trav47Top100HallLink:link,
.trav47Top100HallLink:visited {
    display: inline-block;
    margin-right: 2px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 5px;
    color: #fff !important;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    background: rgba(0, 0, 0, .18);
}

.trav47Top100HallLink:hover,
.trav47Top100HallLink:focus {
    color: #fff !important;
    background: rgba(0, 0, 0, .3);
}

.trav47Top100RankList {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.trav47Top100RankItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .1);
}

.trav47Top100RankItem strong {
    min-width: 48px;
    color: #fff;
    font-size: 15px;
    text-align: left;
}

@media (max-width: 520px) {
    .trav47Top100RankDialog {
        width: 300px;
        max-width: calc(100vw - 36px);
        padding: 12px;
        border-radius: 12px;
    }

    .trav47Top100RankItem {
        min-height: 32px;
        padding: 5px 9px;
    }
}

/* Hostile movement confirmation: warning only, never a dispatch blocker. */
.trav47-attack-confirm-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: calc(100% - 20px);
    min-height: 28px;
    margin: 8px auto 0;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid #c88b18;
    border-radius: 6px;
    color: #654300;
    background: linear-gradient(180deg, #fff8d8 0%, #f2df9f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(91, 61, 0, .14);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.trav47ReinforcementBattleReport .trav47ReinforcementTarget {
    font-size: 11px;
}

.trav47ReinforcementBattleReport .trav47DefenderBoxSeparator {
    display: block;
    clear: both;
    width: auto;
    height: 1px;
    margin: 10px 8px;
    padding: 0;
    border: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(121, 105, 70, .32) 18%, rgba(121, 105, 70, .32) 82%, transparent 100%);
    pointer-events: none;
}

.trav47-attack-confirm-warning::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
    background: #b97800;
    font-size: 12px;
    font-weight: 900;
    line-height: 17px;
}

@media (max-width: 620px) {
    .trav47-attack-confirm-warning {
        max-width: calc(100% - 12px);
        margin-top: 7px;
        padding: 5px 8px;
        font-size: 11px;
    }
}

/* Generated server farm profile: raid-only destination. */
.trav47ServerFarmPage .trav47PlayerContent {
    padding-bottom: 12px;
}

.trav47ServerFarmProfile {
    width: 100%;
    max-width: 552px;
    margin: 0 auto;
}

.trav47ServerFarmScene {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    border: 1px solid #7f6a3f;
    border-radius: 8px 8px 5px 5px;
    background: #28351f;
    box-shadow: 0 5px 14px rgba(48, 35, 15, .2);
}

.trav47ServerFarmScene > img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
}

.trav47ServerFarmSceneShade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 25, 10, .03) 36%, rgba(15, 20, 8, .82) 100%);
    pointer-events: none;
}

.trav47ServerFarmIdentity {
    position: absolute;
    right: 18px;
    bottom: 15px;
    left: 18px;
    color: #fff;
    text-shadow: 0 1px 2px #111;
}

.trav47ServerFarmIdentity > span {
    display: block;
    margin-bottom: 2px;
    color: #e8cf7b;
    font-size: 13px;
    font-weight: 700;
}

.trav47ServerFarmIdentity > strong {
    font-size: 25px;
    line-height: 1.15;
}

.trav47ServerFarmIdentity > a {
    display: inline-block;
    margin-right: 8px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.trav47ServerFarmDetails {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 8px 0 0;
    border: 1px solid #c9b98e;
    border-radius: 6px;
    background: #c9b98e;
}

.trav47ServerFarmDetails > div {
    min-width: 0;
    padding: 7px 8px;
    text-align: center;
    background: linear-gradient(#fbf7e9, #eee6cf);
}

.trav47ServerFarmDetails span,
.trav47ServerFarmDetails strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trav47ServerFarmDetails span {
    margin-bottom: 2px;
    color: #77705f;
    font-size: 11px;
}

.trav47ServerFarmDetails strong {
    color: #3f4d22;
    font-size: 13px;
    line-height: 1.25;
}

.trav47ServerFarmActions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 12px 8px 3px;
}

.trav47ServerFarmButton {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 150px;
    min-height: 42px;
    padding: 7px 16px;
    border: 1px solid rgba(54, 66, 25, .75);
    border-radius: 6px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
    box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 2px 4px rgba(0, 0, 0, .18);
}

.trav47ServerFarmAdd {
    background: linear-gradient(#76983b, #4e6f22);
}

.trav47ServerFarmMap {
    background: linear-gradient(#4f8eaf, #326481);
}

.trav47ServerFarmRaid {
    background: linear-gradient(#c58b35, #93591e);
}

.trav47ServerFarmButton:hover,
.trav47ServerFarmButton:focus {
    filter: brightness(1.08);
}

.trav47ServerFarmButtonIcon {
    font-size: 19px;
    line-height: 1;
}

/* Hero item tooltips: isolate LTR numbers from Arabic text and keep a
   deliberate visual gap instead of relying on fragile ordinary spaces. */
.tip .trav47HeroTooltipAmountRow {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    direction: rtl;
    text-align: right;
}

.tip .trav47HeroTooltipAmount {
    display: inline-block;
    min-width: max-content;
    padding: 0;
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: 700;
}

.tip .trav47HeroTooltipMessage {
    direction: rtl;
    unicode-bidi: isolate;
}

@media (max-width: 760px) {
    .trav47ServerFarmPage .trav47PlayerContent {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .trav47ServerFarmPage .playerProfileHeaderTitle {
        white-space: nowrap;
        font-size: 15px !important;
    }

    .trav47ServerFarmScene,
    .trav47ServerFarmScene > img {
        height: 205px;
        min-height: 205px;
    }

    .trav47ServerFarmIdentity {
        right: 13px;
        bottom: 11px;
        left: 13px;
    }

    .trav47ServerFarmIdentity > strong {
        font-size: 21px;
    }

    .trav47ServerFarmActions {
        gap: 8px;
        padding-right: 2px;
        padding-left: 2px;
    }

    .trav47ServerFarmDetails {
        margin-top: 6px;
    }

    .trav47ServerFarmDetails > div {
        padding: 6px 3px;
    }

    .trav47ServerFarmDetails span {
        font-size: 10px;
    }

    .trav47ServerFarmDetails strong {
        font-size: 12px;
    }

    .trav47ServerFarmButton {
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
        gap: 4px;
        padding: 6px 4px;
        font-size: 12px;
        white-space: nowrap;
    }

    .trav47ServerFarmButtonIcon {
        font-size: 16px;
    }
}

/* Crop finder: one isolated desktop skin. The phone finder lives in body.map. */
@media screen and (min-width: 1025px) {
    html#mainLayout body.cropfinder #contentOuterContainer.cropfinderWindow .contentContainer {
        min-height: 0 !important;
        background: #eef2f0 !important;
    }

    html#mainLayout body.cropfinder #content.cropfinder {
        box-sizing: border-box;
        min-height: 0 !important;
        padding: 12px 14px 16px !important;
        overflow: hidden;
        background: #eef2f0 !important;
        border: 0 !important;
        border-radius: 0;
        box-shadow: none;
        color: #354940 !important;
        direction: rtl;
    }

    html#mainLayout body.cropfinder #content.cropfinder .cropfinderIntro {
        margin: 0 0 10px;
        padding: 9px 11px;
        background: #fff !important;
        border: 1px solid #cbd7d2;
        border-right: 4px solid #759e49;
        border-radius: 5px;
        color: #4a5d55;
        font-size: 12px;
        line-height: 18px;
        box-shadow: 0 1px 2px rgba(39, 66, 57, .05);
    }

    html#mainLayout body.cropfinder .cropfinderSearch {
        margin: 0;
        padding: 11px;
        background: #fff !important;
        border: 1px solid #c6d3ce;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(41, 68, 59, .08);
    }

    html#mainLayout body.cropfinder .cropfinderSearchGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        align-items: stretch;
    }

    html#mainLayout body.cropfinder .cropfinderField {
        --cropfinder-accent: #5c8976;
        box-sizing: border-box;
        min-width: 0;
        min-height: 84px;
        margin: 0;
        padding: 12px 9px 9px;
        background: #f5f9f7 !important;
        border: 1px solid #cedbd6;
        border-top: 3px solid var(--cropfinder-accent);
        border-radius: 5px;
        box-shadow: inset 0 1px #fff;
    }

    html#mainLayout body.cropfinder .cropfinderCoordinates {
        --cropfinder-accent: #4a8290;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: #f2f8fa !important;
    }

    html#mainLayout body.cropfinder .cropfinderTypes {
        --cropfinder-accent: #719943;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: #f5f9ef !important;
    }

    html#mainLayout body.cropfinder .cropfinderOasisFilter {
        --cropfinder-accent: #4f8d73;
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 68px;
        background: #f2f8f5 !important;
    }

    html#mainLayout body.cropfinder .cropfinderField legend {
        padding: 0 6px;
        color: #354e45;
        font-size: 12px;
        font-weight: 700;
    }

    html#mainLayout body.cropfinder .cropfinderCoordinates label {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 5px;
        direction: rtl;
        background: #fff;
        border: 1px solid #c8d8de;
        border-radius: 4px;
        color: #356b78;
        font-weight: 700;
    }

    html#mainLayout body.cropfinder .cropfinderCoordinates input.text {
        box-sizing: border-box;
        width: 52px;
        height: 28px;
        margin: 0;
        padding: 2px 4px;
        direction: rtl;
        background: #fff !important;
        border: 1px solid #aebfc4 !important;
        border-radius: 3px;
        color: #263e43 !important;
        font-weight: 700;
        text-align: center;
        outline: 0;
        box-shadow: inset 0 1px 2px rgba(42, 67, 73, .08);
    }

    html#mainLayout body.cropfinder .cropfinderCoordinates input.text:focus,
    html#mainLayout body.cropfinder .cropfinderOasisFilter select:focus {
        border-color: #6f9c87 !important;
        box-shadow: 0 0 0 2px rgba(83, 137, 112, .15);
    }

    html#mainLayout body.cropfinder .cropfinderTypes label {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        min-height: 27px;
        margin: 0;
        padding: 2px 6px;
        background: #fff;
        border: 1px solid #d3dfca;
        border-radius: 14px;
        color: #4e6246;
        font-size: 11px;
        line-height: 16px;
        white-space: nowrap;
        cursor: pointer;
    }

    html#mainLayout body.cropfinder .cropfinderTypes label:hover,
    html#mainLayout body.cropfinder .cropfinderTypes label:has(input:checked) {
        background: #e6f1d8;
        border-color: #8eae66;
        color: #3f611e;
    }

    html#mainLayout body.cropfinder .cropfinderTypes input,
    html#mainLayout body.cropfinder .cropfinderUnoccupied input {
        margin: 0;
        accent-color: #719a3f;
    }

    html#mainLayout body.cropfinder .cropfinderOasisFilter select {
        box-sizing: border-box;
        width: 230px;
        max-width: 100%;
        height: 31px;
        padding: 3px 8px;
        background: #fff !important;
        border: 1px solid #b9cbc3 !important;
        border-radius: 4px;
        color: #344d43 !important;
        font-family: inherit;
        font-weight: 700;
        text-align: center;
        outline: 0;
    }

    html#mainLayout body.cropfinder .cropfinderUnoccupied {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        gap: 5px;
        width: auto;
        min-height: 31px;
        margin: 0;
        padding: 4px 10px;
        background: #fff;
        border: 1px solid #bdccc6;
        border-radius: 4px;
        color: #40564e;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    html#mainLayout body.cropfinder .cropfinderUnoccupied:hover {
        background: #eef5f1;
        border-color: #8da99d;
    }

    html#mainLayout body.cropfinder .cropfinderSubmit {
        margin-top: 11px;
        text-align: center;
    }

    html#mainLayout body.cropfinder .cropfinderSubmit button {
        min-width: 120px;
        height: 35px;
        padding: 0 20px !important;
        border: 1px solid #355d29 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #86b84a 0%, #5f932d 100%) !important;
        color: #fff !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 2px 4px rgba(49, 84, 32, .18) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-shadow: 0 1px rgba(0, 0, 0, .28);
        cursor: pointer;
    }

    html#mainLayout body.cropfinder .cropfinderSubmit button:hover,
    html#mainLayout body.cropfinder .cropfinderSubmit button:focus {
        background: linear-gradient(180deg, #95c858 0%, #679f33 100%) !important;
    }

    html#mainLayout body.cropfinder .cropfinderSubmit button .button-background {
        display: none !important;
    }

    html#mainLayout body.cropfinder .cropfinderSubmit button .button-container,
    html#mainLayout body.cropfinder .cropfinderSubmit button .button-content {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        line-height: 1 !important;
    }

    html#mainLayout body.cropfinder .cropfinderResults {
        margin: 12px 0 0;
        padding: 0;
        overflow: hidden;
        background: #fff !important;
        border: 1px solid #c7d4cf;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(41, 68, 59, .07);
    }

    html#mainLayout body.cropfinder .cropfinderResultsHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 9px 11px;
        background: #e9f0ed;
        border-bottom: 1px solid #cbd8d3;
    }

    html#mainLayout body.cropfinder .cropfinderResultsHeader h2 {
        margin: 0;
        color: #34564b;
        font-size: 16px;
    }

    html#mainLayout body.cropfinder .cropfinderResultsHeader span {
        padding: 3px 8px;
        background: #fff;
        border: 1px solid #b8ccc3;
        border-radius: 10px;
        color: #4c715f;
        font-size: 11px;
        font-weight: 700;
    }

    html#mainLayout body.cropfinder .cropfinderTableWrap {
        overflow: hidden;
        border: 0;
    }

    html#mainLayout body.cropfinder table#croplist {
        width: 100%;
        margin: 0;
        background: #fff !important;
        border-collapse: collapse;
        table-layout: fixed;
    }

    html#mainLayout body.cropfinder table#croplist th {
        padding: 7px 5px;
        background: #53786d !important;
        border-left: 1px solid rgba(255, 255, 255, .16);
        color: #fff;
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
    }

    html#mainLayout body.cropfinder table#croplist td {
        padding: 7px 5px;
        background: #fff !important;
        border-top: 1px solid #dce5e1;
        border-left: 1px solid #e4ebe8;
        color: #3f534b;
        font-size: 11px;
        text-align: center;
        vertical-align: middle;
    }

    html#mainLayout body.cropfinder table#croplist tr:nth-child(even) td {
        background: #f3f7f5 !important;
    }

    html#mainLayout body.cropfinder table#croplist tbody tr:hover td {
        background: #eaf3ee !important;
    }

    html#mainLayout body.cropfinder table#croplist a {
        color: #588e05;
        font-weight: 700;
        text-decoration: none;
    }

    html#mainLayout body.cropfinder .cropfinderBonus,
    html#mainLayout body.cropfinder .cropfinderFree {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 9px;
        font-weight: 700;
        white-space: nowrap;
    }

    html#mainLayout body.cropfinder .cropfinderBonus {
        background: #f2e9bd;
        color: #806000;
    }

    html#mainLayout body.cropfinder .cropfinderFree {
        background: #e4f2d5;
        color: #4f7411;
    }

    html#mainLayout body.cropfinder .cropfinderLimitNote {
        margin: 0;
        padding: 8px 10px;
        background: #f6f8f7;
        border-top: 1px solid #dce5e1;
        color: #60756d;
        font-size: 11px;
        text-align: center;
    }

    html#mainLayout body.cropfinder .cropfinderEmpty {
        padding: 24px 12px;
        color: #60756d;
        text-align: center;
    }
}

/* Inactive golden direct links: explain the Plus requirement below the icons. */
#sidebarBoxActiveVillage [data-trav47-plus-required="1"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

#sidebarBoxActiveVillage > .content {
    position: relative;
}

#sidebarBoxActiveVillage .trav47QuickAccessPlusNotice {
    position: absolute;
    z-index: 20;
    top: 6px;
    right: 6px;
    left: 6px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: auto;
    margin: 0;
    padding: 5px 7px;
    background: #fff3c8;
    border: 1px solid #d5af50;
    border-radius: 4px;
    color: #654a12;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(85, 61, 15, .24);
    pointer-events: auto;
}

#sidebarBoxActiveVillage .trav47QuickAccessPlusNotice[hidden] {
    display: none !important;
}

#sidebarBoxActiveVillage .trav47QuickAccessPlusNotice.is-visible {
    display: flex;
    animation: trav47QuickAccessNoticeIn .16s ease-out;
}

#sidebarBoxActiveVillage .trav47QuickAccessPlusNoticeText {
    min-width: 0;
}

#sidebarBoxActiveVillage .trav47QuickAccessActivate {
    flex: 0 0 auto;
    min-width: 48px;
    height: 23px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid #527529;
    border-radius: 4px;
    background: linear-gradient(180deg, #91c554, #669b2e);
    color: #fff;
    font: 700 11px/21px Tahoma, Arial, sans-serif;
    text-align: center;
    text-shadow: 0 1px 1px rgba(38, 71, 12, .8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 1px 2px rgba(57, 79, 20, .22);
    cursor: pointer;
}

#sidebarBoxActiveVillage .trav47QuickAccessActivate:hover,
#sidebarBoxActiveVillage .trav47QuickAccessActivate:focus-visible {
    border-color: #41641d;
    background: linear-gradient(180deg, #a2d666, #72a936);
}

/* On desktop the quick-access icons overlap the top of the card content.
   Drop the floating notice below that icon row instead of behind it. */
@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] #sidebarBoxActiveVillage .trav47QuickAccessPlusNotice {
        top: 46px;
        z-index: 50;
    }
}

@keyframes trav47QuickAccessNoticeIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop trial: reuse the phone ordering for troop cards and training queue. */
@media screen and (min-width: 1025px) {
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .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;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action {
        direction: rtl !important;
        display: grid !important;
        grid-template-columns: 140px minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 10px 9px !important;
        margin: 0 0 9px !important;
        overflow: hidden !important;
        border: 1px solid #b8aa88 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(241, 235, 219, .86)), #f5efe1 !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(66, 45, 26, .1) !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action > .clear,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action > br,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details > br {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.bigUnitSection {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        float: none !important;
        width: 140px !important;
        min-width: 140px !important;
        height: auto !important;
        min-height: 140px !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;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.bigUnitSection > a:first-child {
        position: relative !important;
        display: block !important;
        width: 140px !important;
        height: 140px !important;
        overflow: hidden !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.bigUnitSection img.unitSection {
        position: absolute !important;
        inset: 0 !important;
        width: 140px !important;
        height: 140px !important;
        max-width: none !important;
        transform-origin: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.bigUnitSection a.zoom {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .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: 6px !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: 12px !important;
        line-height: 1.3 !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .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 5px !important;
        width: 100% !important;
        min-height: 27px !important;
        padding: 4px 8px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-right: 3px solid var(--trav47-building-accent, #769d38) !important;
        border-radius: 2px !important;
        background: #e8eddf !important;
        color: #3d542f !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: right !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details div.tit img.unit {
        margin: 0 !important;
        transform: scale(.9) !important;
        transform-origin: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details div.tit span.furtherInfo {
        color: #736b5b !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 16px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .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;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .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: 41px !important;
        padding: 3px 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, .65) !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .resourceWrapper > .resource i {
        margin: 0 !important;
        transform: scale(.8) !important;
        transform-origin: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .resourceWrapper > .resource .value {
        width: 100% !important;
        color: #4a4133 !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 11px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .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: 104px !important;
        height: 26px !important;
        padding: 2px 8px !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: 11px !important;
        line-height: 22px !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details > .duration i {
        margin: 0 0 0 3px !important;
        transform: scale(.82) !important;
        transform-origin: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta > .status.none,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta::after {
        display: none !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta > span.value,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta > a {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 26px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta > span.value:nth-of-type(1) {
        order: 1 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta > input.text {
        order: 2 !important;
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 26px !important;
        min-height: 26px !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: 24px !important;
        text-align: center !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta > span.value:nth-of-type(2) {
        order: 3 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta > a {
        order: 4 !important;
        color: #6f9f16 !important;
        font-weight: 700 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits div.action div.details .cta > button.exchange {
        order: 5 !important;
        float: none !important;
        flex: 0 0 92px !important;
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        padding: 0 5px !important;
        margin: 0 !important;
        font-size: 10.5px !important;
        line-height: 27px !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) button.startTraining {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 126px !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        padding: 0 16px !important;
        margin: 8px auto 12px !important;
        font-size: 12px !important;
        line-height: 31px !important;
        white-space: nowrap !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) table.under_progress {
        width: 100% !important;
        margin: 0 0 9px !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;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) table.under_progress th,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) table.under_progress td {
        height: 28px !important;
        padding: 4px 7px !important;
        border: 0 !important;
        border-bottom: 1px solid #ded7c6 !important;
        background: transparent !important;
        color: #494235 !important;
        font-size: 11px !important;
        line-height: 19px !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) table.under_progress thead td {
        background: #e5ebdd !important;
        color: #3f4e37 !important;
        font-weight: 700 !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) table.under_progress td.desc {
        width: 46% !important;
        text-align: right !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) table.under_progress tbody td.desc img.unit {
        position: relative !important;
        top: 1px !important;
        display: inline-block !important;
        margin: 0 2px !important;
        vertical-align: middle !important;
        transform: scale(.9) !important;
        transform-origin: center !important;
    }

    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) table.under_progress td.dur,
    body.build #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) table.under_progress td.fin {
        width: 27% !important;
        text-align: center !important;
        direction: ltr !important;
    }
}

/* Desktop building exchange actions use the same clean surface as the phone
   buttons, without the legacy nested-button padding. */
@media screen and (min-width: 1025px) {
    html#mainLayout body.build #center #contentOuterContainer #content #build button.gold.exchange {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 98px !important;
        min-width: 98px !important;
        max-width: 98px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #704c0e !important;
        border-radius: 4px !important;
        background-color: #b87e1c !important;
        background-image: linear-gradient(180deg, #f7dc83 0%, #dfb547 50%, #b87e1c 100%) !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;
        color: #392706 !important;
        font: 700 11px/1.15 Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 0 1px 0 rgba(255, 248, 206, .72) !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build button.gold.exchange > .button-container,
    html#mainLayout body.build #center #contentOuterContainer #content #build button.gold.exchange .button-content {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !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;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        font: inherit !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build button.gold.exchange :is(.button-background, .buttonStart, .buttonEnd, .buttonMiddle) {
        display: none !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build button.gold.exchange:is(:hover, :focus-visible) {
        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;
    }
}

/* Celebration artwork is a desktop enhancement; phone cards keep their
   existing compact presentation untouched. */
body.build #content #build.gid24 .celebrationArtwork {
    display: none;
}

/* Town hall celebrations — desktop presentation based on the phone cards. */
@media screen and (min-width: 1025px) {
    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 > br,
    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 > .clear:first-of-type {
        display: none !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 132px minmax(0, 1fr) !important;
        align-items: stretch !important;
        width: calc(100% - 10px) !important;
        margin: 8px 5px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #b4a174 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(239, 234, 216, .76)), #f2ecdc !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 1px 2px rgba(65, 45, 27, .14) !important;
        box-sizing: border-box !important;
        direction: rtl !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCardSmall {
        border-right: 4px solid #719544 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCardLarge {
        border-right: 4px solid #b78732 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationArtwork {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 132px !important;
        min-width: 132px !important;
        min-height: 132px !important;
        margin: 0 !important;
        padding: 3px !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 body.build #center #contentOuterContainer #content #build.gid24 .celebrationCardLarge .celebrationArtwork {
        background: linear-gradient(180deg, rgba(240, 226, 187, .9), rgba(235, 225, 201, .68)) !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationArtwork > img {
        display: block !important;
        width: 124px !important;
        height: 124px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 2px rgba(73, 53, 29, .22)) !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard > .research {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard > .research,
    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .information {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .title {
        display: flex !important;
        align-items: center !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 11px !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;
        line-height: 36px !important;
        text-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .title > a:has(img) {
        display: none !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .title > a:not(:has(img)) {
        display: inline-flex !important;
        align-items: center !important;
        color: #3d572c !important;
        font: 700 13px/19px Tahoma, Arial, sans-serif !important;
        text-decoration: none !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #3d572c !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .title > .points {
        margin-right: 7px !important;
        padding: 0 !important;
        color: #665d4c !important;
        font: 400 11px/19px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
    }

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

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .resourceWrapper > .resource {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        border: 1px solid #d5ccb5 !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, .62) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .resourceWrapper > .resource > i {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: scale(.72) !important;
        transform-origin: center !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .resourceWrapper > .resource > .value {
        display: inline-block !important;
        color: #4a4438 !important;
        font: 700 11px/15px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #4a4438 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .celebrationFooter {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 5px 11px !important;
        border-top: 1px solid #d2c7ac !important;
        background: rgba(229, 235, 221, .72) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .celebrationDuration {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
        color: #394331 !important;
        direction: ltr !important;
        font: 700 11.5px/19px Tahoma, Arial, sans-serif !important;
        text-shadow: none !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .celebrationDuration > i {
        margin: 0 !important;
        transform: scale(.78) !important;
        transform-origin: center !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .celebrationDuration > .value {
        color: #394331 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #394331 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .celebrationCta {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .celebrationCta > .none,
    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 .celebrationCard .celebrationFooter > .celebrationAvailability {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 24px !important;
        padding: 2px 9px !important;
        border: 1px solid #9faf88 !important;
        border-radius: 4px !important;
        background: #edf2e6 !important;
        color: #526047 !important;
        font: 700 10.5px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: none !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #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 body.build #center #contentOuterContainer #content #build.gid24 table.under_progress {
        width: 100% !important;
        margin: 10px 0 0 !important;
        overflow: hidden !important;
        border: 1px solid #b4a174 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 5px !important;
        background: #fffdf8 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 table.under_progress td {
        height: 29px !important;
        padding: 5px 8px !important;
        border: 0 !important;
        border-left: 1px solid #d8d0bb !important;
        border-bottom: 1px solid #ddd5c1 !important;
        background: #fffdf8 !important;
        color: #4a473d !important;
        font: 400 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 table.under_progress thead td {
        background: linear-gradient(180deg, #edf1e5, #dfe7d5) !important;
        color: #3e4c36 !important;
        font-weight: 700 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 table.under_progress tr > td:last-child {
        border-left: 0 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 table.under_progress tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build.gid24 table.under_progress td.desc {
        text-align: right !important;
    }
}

/* The generic desktop exchange rule fixes gold buttons at 98px.  The finish-
   training label also contains a price and icon, so it must size to content. */
@media screen and (min-width: 1025px) {
    html#mainLayout body.build #center #contentOuterContainer #content #build .trav47FinishTrainingRow > button.gold.exchange.finishTrainingGold {
        width: max-content !important;
        min-width: 148px !important;
        max-width: none !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build .trav47FinishTrainingRow > button.finishTrainingGold > .button-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build .trav47FinishTrainingRow > button.finishTrainingGold .button-content {
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        overflow: visible !important;
    }
}

/* Desktop only: keep the training queue and its gold-finish strip five
   pixels clear of both content edges. */
@media screen and (min-width: 1025px) {
    html#mainLayout body.build #center #contentOuterContainer #content #build > h4.round.spacer:has(+ table.under_progress[data-travian-training-server-time]),
    html#mainLayout body.build #center #contentOuterContainer #content #build > table.under_progress[data-travian-training-server-time] {
        width: calc(100% - 10px) !important;
        margin-right: 5px !important;
        margin-left: 5px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build > .trav47FinishTrainingRow {
        width: calc(100% - 10px) !important;
        margin-right: 5px !important;
        margin-left: 5px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout body.build #center #contentOuterContainer #content #build:is(.gid19, .gid20, .gid21, .gid25, .gid26, .gid36, .gid44) .buildActionOverview.trainUnits .cta > button.exchange {
        margin-right: 10px !important;
        margin-left: 0 !important;
    }
}
/* Keep the Rally Point data compact on phones; desktop reveals the second
   location line and keeps the village and mission in separate columns. */
body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineCoordinates {
    display: none;
}

/* تحركات الكهوف تحتاج اسم الهدف وإحداثياته حتى في العرض الضيق. */
body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-cave-movement .rallyHeadlineMission .rallyHeadlineCoordinates {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-inline-start: 3px;
    direction: ltr;
    white-space: nowrap;
}

body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .trav47RallyDesktopSourceCoordinates {
    display: none;
}

body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlinePrimaryLineCompact {
    gap: 0 !important;
}

body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlinePrimaryLineCompact .rallyHeadlineAction {
    margin-inline-end: 2px !important;
}

@media screen and (max-width: 1024px) {
    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-cave-movement .rallyHeadlinePrimaryLineCompact {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
}

@media screen and (min-width: 1025px) {
    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.troop_details {
        width: 100% !important;
        table-layout: fixed !important;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.troop_details thead td.rallyHeadlineCell {
        padding: 0 !important;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent col.trav47RallyUnitLabelColumn,
    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent col.trav47RallyUnitValueColumn {
        width: var(--trav47-rally-desktop-width) !important;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadline {
        display: grid;
        grid-template-columns: minmax(0, 20%) minmax(0, 80%);
        align-items: stretch;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        direction: rtl;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineVillage,
    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineMission {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        height: 25px;
        min-height: 25px;
        min-width: 0;
        padding: 6px 2px 3px;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineVillage {
        grid-column: 1;
        padding-right: 2px;
        padding-left: 2px;
        border-left: 1px solid rgba(94, 118, 76, .32);
        font-weight: 400;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineMission {
        grid-column: 2;
        font-weight: 400;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlinePrimaryLine {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
        overflow-wrap: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineCoordinates {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        color: inherit;
        font-size: inherit;
        font-weight: 400;
        line-height: inherit;
        direction: ltr;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineVillage .rallyHeadlineCoordinates {
        display: none;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .trav47RallyDesktopSourceCoordinates {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        white-space: nowrap;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineCoordinates > a,
    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineCoordinates .coordinates {
        display: inline-flex;
        margin: 0;
        padding: 0;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        direction: ltr;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineCoordinates .coordinateX,
    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineCoordinates .coordinatePipe,
    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineCoordinates .coordinateY {
        display: inline !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: inherit !important;
        white-space: nowrap !important;
    }

    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlinePrimaryLine > a,
    body.rtl div#build.gid16.trav47-rally-overview .trav47RallyOverviewContent .rallyHeadlineAction {
        display: inline;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }
}
form.trav47AttackConfirmation .trav47AttackConfirmNatureTarget {
    color: #111 !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* Desktop Rally Point confirmation: the village is a real table cell in the
   same column as "القوات" and "وصول"; the mission spans the unit columns. */
@media screen and (min-width: 1025px) {
    body.rtl form.trav47AttackConfirmation .trav47AttackConfirmTargetLabel::after {
        content: ":";
    }

    body.rtl div#build.gid16.trav47-attack-confirmation form.trav47AttackConfirmation .trav47AttackConfirmHeadlineCell {
        max-width: none !important;
        padding: 0 3px !important;
        font-weight: 400;
        line-height: 17px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    body.rtl div#build.gid16.trav47-attack-confirmation form.trav47AttackConfirmation .trav47AttackConfirmSourceVillageCell {
        width: 13% !important;
        max-width: 13% !important;
    }

    body.rtl div#build.gid16.trav47-attack-confirmation form.trav47AttackConfirmation .trav47AttackConfirmMissionCell {
        width: auto !important;
    }

    body.rtl div#build.gid16.trav47-attack-confirmation form.trav47AttackConfirmation .trav47AttackConfirmMission {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1px;
        min-width: 0;
        font-weight: 400;
        white-space: nowrap;
    }

    body.rtl div#build.gid16.trav47-attack-confirmation form.trav47AttackConfirmation .trav47AttackConfirmTargetLocation {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        min-width: 0;
        white-space: nowrap;
    }

    body.rtl div#build.gid16.trav47-attack-confirmation form.trav47AttackConfirmation .trav47AttackConfirmMission .coordinates {
        flex: 0 0 auto;
        margin: 0;
        font-weight: 400;
    }
}

/* Desktop residence/palace/command-centre culture and loyalty tabs. */
@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] body.build #content #build .trav47ResidenceCulturePanel,
    html[data-trav47-layout="desktop"] body.build #content #build .trav47ResidenceLoyaltyPanel {
        width: calc(100% - 20px) !important;
        margin: 12px 10px 18px !important;
        box-sizing: border-box !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47ResidenceCulturePanel {
        overflow: hidden !important;
        border: 1px solid #a1bc79 !important;
        border-radius: 5px !important;
        background: #fbfcf8 !important;
        box-shadow: 0 1px 2px rgba(63, 82, 42, .12) !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47ResidenceCultureIntro {
        margin: 0 !important;
        padding: 9px 12px !important;
        border-bottom: 1px solid #bdcca7 !important;
        background: linear-gradient(90deg, #f8faf4 0%, #dce9ca 100%) !important;
        color: #3f5035 !important;
        font: 700 13px/20px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build table.trav47ResidenceCultureTable {
        width: calc(100% - 20px) !important;
        margin: 10px !important;
        overflow: hidden !important;
        border: 1px solid #d2d8c8 !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[data-trav47-layout="desktop"] body.build #content #build table.trav47ResidenceCultureTable th,
    html[data-trav47-layout="desktop"] body.build #content #build table.trav47ResidenceCultureTable td {
        height: 34px !important;
        padding: 7px 11px !important;
        border: 0 !important;
        border-bottom: 1px dotted #c6c6bd !important;
        background: #fff !important;
        color: #49483f !important;
        font: 400 12px/19px Tahoma, Arial, sans-serif !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build table.trav47ResidenceCultureTable tr:last-child > * {
        border-bottom: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build table.trav47ResidenceCultureTable th {
        width: 42% !important;
        background: #f2f6ec !important;
        color: #4b5f3e !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build table.trav47ResidenceCultureTable td {
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build table.trav47ResidenceCultureTable td > b {
        color: #4f772d !important;
        font-size: 13px !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47ResidenceCultureSummary {
        margin: 0 10px 10px !important;
        padding: 9px 11px !important;
        border: 1px solid #c6d8ad !important;
        border-radius: 4px !important;
        background: #edf4e4 !important;
        color: #434a3c !important;
        font: 400 12px/20px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47ResidenceCultureSummary > b {
        color: #4b7429 !important;
        font-size: 13px !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47ResidenceLoyaltyValue {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 42px !important;
        margin: 0 0 9px !important;
        padding: 8px 13px !important;
        border: 1px solid #a1bc79 !important;
        border-radius: 5px !important;
        background: linear-gradient(90deg, #f8faf4 0%, #dce9ca 100%) !important;
        color: #3f5035 !important;
        font: 700 13px/20px Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47ResidenceLoyaltyValue > strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 66px !important;
        padding: 4px 10px !important;
        border: 1px solid #95ad73 !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: #4b7429 !important;
        direction: ltr !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionCard {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 11px !important;
        overflow: hidden !important;
        border: 1px solid #a1bc79 !important;
        border-radius: 5px !important;
        background: #fbfcf8 !important;
        box-shadow: 0 1px 2px rgba(63, 82, 42, .12) !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionCard > h4 {
        min-height: 34px !important;
        margin: 0 0 10px !important;
        padding: 0 12px !important;
        border-bottom: 1px solid #bdcca7 !important;
        border-radius: 0 !important;
        background: linear-gradient(90deg, #f8faf4 0%, #dce9ca 100%) !important;
        color: #3f5035 !important;
        font: 700 13px/34px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionCard > .notice,
    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionDescription {
        margin: 0 12px 9px !important;
        padding: 0 !important;
        color: #59594f !important;
        font: 400 12px/19px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionCard > .notice {
        padding: 7px 9px !important;
        border: 1px solid #c6d8ad !important;
        border-radius: 4px !important;
        background: #edf4e4 !important;
        color: #4b7429 !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionForm {
        margin: 0 12px !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionOption {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 7px 10px !important;
        border: 1px solid #d4d9ca !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #4f4e46 !important;
        font: 400 12px/20px Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionOption > input[type="checkbox"] {
        flex: 0 0 auto !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        accent-color: #6c972e !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .trav47LoyaltyProtectionForm > .submitButtonContainer {
        display: flex !important;
        justify-content: center !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build button.trav47LoyaltySave {
        position: relative !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 86px !important;
        height: 27px !important;
        min-height: 27px !important;
        margin: 0 !important;
        padding: 5px 14px !important;
        border: 1px solid #283308 !important;
        border-radius: 5px !important;
        background: linear-gradient(to bottom, #7cb029, #587c1e) !important;
        box-shadow: inset 0 3px 1px -1px #b5e251,
                    inset 0 -3px 1px -1px rgba(44, 75, 12, .6) !important;
        color: #f2f2f2 !important;
        font: 700 12px/15px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) !important;
        appearance: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build button.trav47LoyaltySave > .button-container,
    html[data-trav47-layout="desktop"] body.build #content #build button.trav47LoyaltySave .button-content {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build button.trav47LoyaltySave .button-background {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build button.trav47LoyaltySave:is(:hover, :focus-visible) {
        color: #283308 !important;
        background: #7cb029 none !important;
        box-shadow: inset 0 20px 25px -10px rgba(255, 255, 255, .7) !important;
        text-shadow: none !important;
    }
}

/* Desktop building upgrades: match the official Travian V1 action button.
   The legacy nested button skin used inline negative margins, which made the
   otherwise-correct 25px button look cramped and uneven. */
@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] body.build #content #build > .roundedCornersBox.big {
        width: calc(100% - 20px) !important;
        margin-right: 10px !important;
        margin-left: 10px !important;
        box-sizing: border-box !important;
    }

    /* شريط اكتمال الترقية: يملأ عرض نافذة المبنى مع 3px فقط من كل جانب. */
    html[data-trav47-layout="desktop"] body.build #content #build > .roundedCornersBox.big.headlineOnly {
        width: calc(100% - 6px) !important;
        margin-right: 3px !important;
        margin-left: 3px !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1 {
        display: block !important;
        position: relative !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 0 !important;
        height: 27px !important;
        min-height: 27px !important;
        margin: 0 auto 8px !important;
        padding: 5px 10px !important;
        border-radius: 5px !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1 > .button-container {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.green.build > .button-container,
    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.green.build .button-content {
        display: contents !important;
    }

    /* The master-builder action keeps its gold skin, but sheds the old
       nested image-button layout and aligns like the modern upgrade action. */
    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.builder > .button-container {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.builder .button-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 15px !important;
        min-height: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 15px !important;
        direction: rtl !important;
        color: inherit !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.builder .goldValue {
        display: inline-flex !important;
        align-items: center !important;
        order: 1 !important;
        height: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 15px !important;
        direction: ltr !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.builder .goldIcon {
        display: inline-block !important;
        order: 2 !important;
        box-sizing: border-box !important;
        width: 14px !important;
        min-width: 14px !important;
        height: 14px !important;
        margin: 0 3px 0 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.green {
        color: #f2f2f2 !important;
        border: 1px solid #283308 !important;
        background-color: #7cb029 !important;
        background-image: linear-gradient(to bottom, #7cb029, #587c1e) !important;
        box-shadow: inset 2px 0 1px -1px #4b6f19,
                    inset -2px 0 1px -1px #4b6f19,
                    inset 0 3px 1px -1px #b5e251,
                    inset 0 -3px 1px -1px rgba(44, 75, 12, 0.6) !important;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.green:hover,
    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.green:focus {
        color: #283308 !important;
        border-color: #506030 !important;
        background-color: #7cb029 !important;
        background-image: none !important;
        box-shadow: inset 0 20px 25px -10px rgba(255, 255, 255, 0.7) !important;
        text-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.green:active {
        color: #506030 !important;
        background-image: linear-gradient(to top, #7cb029, #587c1e) !important;
        box-shadow: inset 2px 0 1px -1px #4b6f19,
                    inset -2px 0 1px -1px #4b6f19 !important;
        text-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.green.disabled,
    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.green:disabled {
        color: #506030 !important;
        border-color: #9fa38a !important;
        background: #89917b none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Use the official "faster upgrade" purple skin for the max-level action. */
    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel {
        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, 0.6) !important;
        text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5) !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel .button-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 15px !important;
        min-height: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 15px !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel .goldValue {
        display: inline-flex !important;
        align-items: center !important;
        order: 1 !important;
        height: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 15px !important;
        direction: ltr !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel .goldIcon {
        display: inline-block !important;
        order: 2 !important;
        box-sizing: border-box !important;
        width: 14px !important;
        min-width: 14px !important;
        height: 14px !important;
        margin: 0 3px 0 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel:hover,
    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel:focus {
        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, 0.7) !important;
        text-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .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[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel.disabled,
    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer button.textButtonV1.upgradeToMaxLevel:disabled {
        color: #333 !important;
        border-color: #665a6f !important;
        background: #7c7182 none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build .upgradeButtonsContainer .section2 .trav47MaxLevelInstant {
        display: inline-grid !important;
        margin: 0 !important;
        direction: rtl !important;
    }
}

/* Desktop main building: modernize the separate "demolish completely" gold
   action as well; it is not the green submit action above. */
@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] body.build #content #build.gid15 form.demolishForm .demolishNow > button.textButtonV1.gold {
        position: relative !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        margin: 0 !important;
        padding: 5px 10px !important;
        overflow: visible !important;
        border: 1px solid #704c0e !important;
        border-radius: 5px !important;
        background-color: #b87e1c !important;
        background-image: linear-gradient(180deg, #f7dc83 0%, #dfb547 50%, #b87e1c 100%) !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;
        color: #392706 !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 15px !important;
        text-align: center !important;
        text-shadow: 0 1px 0 rgba(255, 248, 206, .72) !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        appearance: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid15 form.demolishForm .demolishNow > button.textButtonV1.gold > .button-container {
        position: static !important;
        display: contents !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid15 form.demolishForm .demolishNow > button.textButtonV1.gold .button-content {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: auto !important;
        height: 15px !important;
        min-height: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        font: inherit !important;
        line-height: 15px !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid15 form.demolishForm .demolishNow > button.textButtonV1.gold :is(.button-background, .buttonStart, .buttonEnd, .buttonMiddle) {
        display: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid15 form.demolishForm .demolishNow > button.textButtonV1.gold .goldValue {
        display: inline-flex !important;
        align-items: center !important;
        order: 1 !important;
        height: 15px !important;
        margin: 0 3px 0 0 !important;
        padding: 0 !important;
        line-height: 15px !important;
        direction: ltr !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid15 form.demolishForm .demolishNow > button.textButtonV1.gold .goldIcon {
        display: inline-block !important;
        order: 2 !important;
        box-sizing: border-box !important;
        width: 14px !important;
        min-width: 14px !important;
        height: 14px !important;
        margin: 0 3px 0 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid15 form.demolishForm .demolishNow > button.textButtonV1.gold:is(:hover, :focus-visible) {
        border-color: #68470e !important;
        background-image: linear-gradient(180deg, #fff0aa 0%, #f4d56a 48%, #ca9429 100%) !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[data-trav47-layout="desktop"] body.build #content #build.gid15 > p.demolishDescription {
        box-sizing: border-box !important;
        padding-right: 10px !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid15 form.demolishForm > select#demolish.demolish {
        box-sizing: border-box !important;
        width: auto !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        margin-right: 8px !important;
        padding: 3px 10px 3px 24px !important;
        border: 1px solid #aebaa6 !important;
        border-radius: 4px !important;
        background-color: #fff !important;
        color: #333 !important;
        font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif !important;
        font-size: 12px !important;
        line-height: 19px !important;
        vertical-align: middle !important;
    }
}
/* Cache revision: refresh all clients after correcting first-visit layout detection. */

/* Production boost countdown: keep the status sentence mounted and update only
   a fixed-width numeric fragment so the line cannot blink on second ticks. */
.dialog.trav47ProductionBoostDialog .trav47BoostStatus,
.dialog.trav47ProductionBoostDialog .trav47BoostCountdown,
.dialog.trav47ProductionBoostDialog .trav47BoostCountdownPrefix,
.dialog.trav47ProductionBoostDialog .trav47BoostCountdownValue {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
}

.dialog.trav47ProductionBoostDialog .trav47BoostCountdownValue {
    display: inline-block !important;
    min-width: 60px !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-variant-numeric: tabular-nums !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* Desktop rally returns: present bounty, resources and carrying load as one
   native-height table row instead of stacking the load beneath the loot. */
@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return tr.rallyBountyRow > td.rallyBountyCell {
        position: relative !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-top: 1px solid #c9c9c9 !important;
        border-bottom: 1px solid #c9c9c9 !important;
        background: #e7e7e7 !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountyGrid {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        width: auto !important;
        height: 26px !important;
        margin: 0 104px 0 155px !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountyResource {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: #292929 !important;
        font: 400 12px/26px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountyResource > i {
        flex: 0 0 auto !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountySummaryBar {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: auto !important;
        height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        pointer-events: none !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountyTitle {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 104px !important;
        height: 26px !important;
        padding: 0 4px !important;
        border-left: 1px solid #c4c4c4 !important;
        color: #292929 !important;
        font: 400 12px/26px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountySummary {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 155px !important;
        height: 26px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        border-right: 1px solid #c4c4c4 !important;
        color: #292929 !important;
        font: 400 12px/26px Tahoma, Arial, sans-serif !important;
        direction: ltr !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountySummary .rallyBountyCapacity { order: 1 !important; }
    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountySummary .rallyBountySeparator { order: 2 !important; }
    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountySummary .rallyBountyTaken { order: 3 !important; }
    html[data-trav47-layout="desktop"] body.build #content #build.gid16.trav47-rally-overview .trav47RallyOverviewContent table.rally-return .rallyBountySummary > img.carry {
        order: 4 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: none !important;
        vertical-align: middle !important;
    }
}
/* Every small unit icon uses the same 16px frame inside a 19px sprite step.
   Enforce the real frame once so no view can expose pixels from its neighbour. */
html#mainLayout img.unit {
    display: inline-block !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: content-box !important;
    background-repeat: no-repeat !important;
}

/* Palace capital action: centered button and compact confirmation card. */
html#mainLayout body.build #content #build.gid26 .changeCapitalAction {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 12px 0 !important;
    text-align: center !important;
}

html#mainLayout body.build #content #build.gid26 button.trav47CapitalButton {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 132px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #4e791f !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #9dca52 0%, #76a936 52%, #5f9027 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 1px 2px rgba(55, 67, 30, .28) !important;
    color: #fff !important;
    font: 700 13px/20px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
    text-shadow: 0 1px 1px rgba(36, 62, 14, .65) !important;
    cursor: pointer !important;
}

html#mainLayout body.build #content #build.gid26 button.trav47CapitalButton:hover,
html#mainLayout body.build #content #build.gid26 button.trav47CapitalButton:focus {
    background: linear-gradient(180deg, #abd663 0%, #83b842 52%, #699c2d 100%) !important;
}

html#mainLayout body.build #content #build.gid26 button.trav47CapitalButton .button-container,
html#mainLayout body.build #content #build.gid26 button.trav47CapitalButton .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: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 5px 14px !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 20px !important;
    text-align: center !important;
    text-shadow: inherit !important;
    white-space: nowrap !important;
}

html#mainLayout body.build #content #build.gid26 button.trav47CapitalButton .button-container {
    padding: 0 !important;
}

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

html#mainLayout body.build #content #build.gid26 .changeCapitalConfirm {
    box-sizing: border-box !important;
    width: min(100%, 460px) !important;
    margin: 12px auto !important;
    padding: 0 12px 14px !important;
    overflow: hidden !important;
    border: 1px solid #b1bd9d !important;
    border-radius: 6px !important;
    background: #f7f9f2 !important;
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(62, 72, 43, .18) !important;
    color: #333 !important;
    text-align: center !important;
}

html#mainLayout body.build #content #build.gid26 .changeCapitalConfirm > h3 {
    margin: 0 -12px 11px !important;
    padding: 7px 10px !important;
    border-bottom: 1px solid #b8c5a4 !important;
    background: linear-gradient(180deg, #e9f1de, #d9e7ca) !important;
    color: #3b5526 !important;
    font: 700 14px/20px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
}

html#mainLayout body.build #content #build.gid26 .changeCapitalConfirm > p {
    margin: 5px 0 !important;
    padding: 0 !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

html#mainLayout body.build #content #build.gid26 .changeCapitalConfirm .changeCapitalWarning {
    color: #a12d22 !important;
    font-weight: 700 !important;
}

html#mainLayout body.build #content #build.gid26 .changeCapitalConfirm .error {
    color: #b11f16 !important;
    font-weight: 700 !important;
}

html#mainLayout body.build #content #build.gid26 .changeCapitalForm {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
}

html#mainLayout body.build #content #build.gid26 .changeCapitalForm label {
    flex: 0 0 100% !important;
    margin: 0 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

html#mainLayout body.build #content #build.gid26 .changeCapitalForm input#capital_confirmation_26 {
    box-sizing: border-box !important;
    width: 150px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border: 1px solid #aebaa6 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #2d2d2d !important;
    font: 400 13px/20px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
}

@media screen and (max-width: 1024px) {
    html#mainLayout body.build #content #build.gid26 .changeCapitalConfirm {
        width: 100% !important;
        margin: 8px 0 !important;
    }

    html#mainLayout body.build #content #build.gid26 .changeCapitalForm {
        flex-direction: column !important;
    }

    html#mainLayout body.build #content #build.gid26 .changeCapitalForm input#capital_confirmation_26 {
        width: min(100%, 190px) !important;
    }
}

/* Game-themed viewport scrollbar — desktop only. */
@media screen and (min-width: 1025px) {
    html#mainLayout,
    html#mainLayout body {
        scrollbar-width: thin;
        scrollbar-color: #728f43 #e7ddc7;
    }

    html#mainLayout::-webkit-scrollbar,
    html#mainLayout body::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    html#mainLayout::-webkit-scrollbar-track,
    html#mainLayout body::-webkit-scrollbar-track {
        background: linear-gradient(90deg, #d9cdb5 0%, #f1ead9 48%, #d9cdb5 100%);
        border-right: 1px solid #b8aa8c;
        border-left: 1px solid #b8aa8c;
        box-shadow: inset 0 0 3px rgba(78, 61, 37, .18);
    }

    html#mainLayout::-webkit-scrollbar-thumb,
    html#mainLayout body::-webkit-scrollbar-thumb {
        min-height: 42px;
        border: 2px solid #e7ddc7;
        border-radius: 8px;
        background: linear-gradient(90deg, #597b2e 0%, #86a851 50%, #597b2e 100%);
        box-shadow: inset 0 0 0 1px rgba(52, 79, 28, .55), 0 1px 2px rgba(61, 48, 29, .28);
    }

    html#mainLayout::-webkit-scrollbar-thumb:hover,
    html#mainLayout body::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, #4e7027 0%, #94b85a 50%, #4e7027 100%);
    }

    html#mainLayout::-webkit-scrollbar-thumb:active,
    html#mainLayout body::-webkit-scrollbar-thumb:active {
        background: linear-gradient(90deg, #416221 0%, #769b42 50%, #416221 100%);
    }

    html#mainLayout::-webkit-scrollbar-corner,
    html#mainLayout body::-webkit-scrollbar-corner {
        background: #e7ddc7;
    }
}
/* Alliance attack/defence report filter: compact desktop toolbar. */
@media screen and (min-width: 1025px) {
    html[data-trav47-layout="desktop"] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceReportFilter {
        position: relative !important;
        display: table !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 2px auto 7px !important;
        padding: 3px !important;
        border: 0 !important;
        border-radius: 4px !important;
        background: #e7e7e7 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceReportFilter > :not(.boxes-contents) {
        display: none !important;
    }

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

    html[data-trav47-layout="desktop"] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceReportFilter button.iconFilter,
    html[data-trav47-layout="desktop"] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceReportFilter button.iconFilter:hover {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 3px !important;
        line-height: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="desktop"] body.alliance.trav47AlliancePage #content.alliance .trav47AllianceReportFilter button.iconFilter > img {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
        margin: 0 !important;
    }
}