/**
 * Travian SS — progressive responsive layer.
 * Mobile ≤979px: stacked full-bleed shell. Desktop polish lives in travian-ss-layout.css.
 */

/* ========== Shared helpers ========== */
.tss-nav-toggle {
    display: none !important;
}

.tss-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
}

body.v35,
body.mod1,
body.mod2,
body.mod3,
div#side_navi,
div#header,
div#res,
div#content,
div#side_info,
div#footer {
    font-family: "Tajawal", Tahoma, Arial, sans-serif;
}

/* ========== ≤979px — full-width stacked shell, visible side nav ========== */
@media (max-width: 979px) {
    /*
     * Critical: legacy gpack sets html/body { height:100% }. Combined with
     * overflow-x:hidden that creates a fixed viewport scrollport and traps
     * content below the fold (login form unreachable). Unlock height.
     */
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        background: #eeeeed;
    }

    .wrapper {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    div#header,
    div#mid,
    div#dynamic_header,
    body.mod2 div#dynamic_header,
    body.mod2 div#dynamic_header div.dyn1 {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    div#dynamic_header {
        height: 72px !important;
    }

    div#dynamic_header .tss-brand .name {
        font-size: 1.25rem;
        letter-spacing: 0.04em;
    }

    div#dynamic_header .tss-brand .tagline {
        font-size: 0.65rem;
    }

    div#dynamic_header .tss-brand .ornament {
        width: 28px;
    }

    div#mid {
        float: none !important;
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        padding: 0 0 16px !important;
        position: relative;
        background: transparent;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    div#mid > .clear {
        display: none !important;
    }

    /* Never show hamburger / drawer chrome */
    .tss-nav-toggle,
    body.tss-nav-open::after {
        display: none !important;
    }

    /* Visible side menu — always on, full width, clean list */
    div#side_navi {
        float: none !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 6px 8px 8px !important;
        box-sizing: border-box;
        overflow: visible !important;
        background: var(--color-tss-stone-50, #f8f8f7);
        border: 0;
        border-bottom: 1px solid var(--color-tss-stone-line, #3c414733);
        box-shadow: none;
        text-align: inherit;
        z-index: auto;
        order: 1;
    }

    html[dir="rtl"] div#side_navi,
    html:not([dir="rtl"]) div#side_navi,
    html[dir="ltr"] div#side_navi {
        float: none !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        text-align: inherit;
    }

    /* Banner already carries brand — hide duplicate logo sprite */
    div#side_navi a#logo {
        display: none !important;
    }

    div#side_navi .tss-nav-group {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    div#side_navi .tss-nav-label {
        padding: 0 4px 2px;
        font-size: 10px;
    }

    div#side_navi p {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 0;
        margin: 0 0 6px !important;
        padding: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    div#side_navi p a {
        display: inline-block;
        flex: 1 1 46%;
        min-height: 36px;
        line-height: 36px;
        margin: 0 !important;
        padding: 0 8px !important;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Top nav — flex chrome already in layout; tighten for mobile */
    div#header {
        height: auto !important;
        min-height: 56px;
        min-width: 0 !important;
        position: relative;
        z-index: 40;
        width: 100% !important;
    }

    div#mtop,
    html[dir="rtl"] div#mtop,
    html[dir="ltr"] div#mtop {
        position: relative !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 8px 6px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .tss-mtop-gold {
        order: 1;
        width: 100%;
        justify-content: center;
    }

    .tss-mtop-nav {
        order: 2;
        width: 100%;
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 2px;
    }

    .tss-mtop-tools {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-inline-start: 0;
    }

    a.tss-gold-chip,
    #goldHeader.tss-gold-chip {
        width: auto;
        max-width: 100%;
    }

    /* Resource bar — always one horizontal row, never clipped/hidden */
    #tss_res_strip {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 40px !important;
        height: auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        float: none !important;
        overflow: visible !important;
        z-index: 30 !important;
    }

    div#res,
    body.mod1 div#res,
    body.mod2 div#res,
    body.mod3 div#res {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        box-sizing: border-box;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        text-align: center;
        -webkit-overflow-scrolling: touch;
        z-index: 31 !important;
    }

    div#resWrap {
        width: auto !important;
        margin: 0 auto !important;
        left: auto !important;
    }

    /*
     * The four resource chips WRAP below the shell width.
     *
     * They used to be an `inline-table` with `white-space: nowrap` and
     * `display: table-row` on the tr, which is a row that cannot break. Four
     * 140px chips need ~570px, so at a 320-414px layout viewport two of them
     * sat at left: -144px and -292px — entirely off-canvas, and invisible
     * rather than merely awkward because `html, body { overflow-x: hidden }`
     * above clips them instead of letting the page scroll to them. A player
     * on a narrow window could not see their wood or clay at all. Measured in
     * the live game at 320 and 390.
     *
     * (A phone does not hit this: head_assets.tpl pins the layout viewport to
     * 980 so a phone renders the desktop shell zoomed out. This is the narrow
     * DESKTOP window, which is the only way a sub-980 layout viewport
     * happens.)
     *
     * Flex rather than table display, because a table row is the one layout
     * that has no way to wrap. The chips keep their own widths and the
     * chrome layer's gradients; only the container changes.
     */
    div#res table,
    div#res table tbody,
    div#res table tr {
        display: block !important;
        white-space: normal !important;
        margin: 0 auto !important;
    }

    div#res table tr {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    div#res table td {
        display: flex !important;
        float: none !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .tss-res-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .tss-res-card {
        flex: 0 0 auto !important;
        min-width: 120px;
        max-width: none;
    }

    /* Clock + world selector: below the icon row, full width, centred. */
    .tss-mtop-tools {
        margin-inline-start: 0 !important;
        flex: 1 1 100%;
        justify-content: center;
    }

    .tss-headinfo {
        font-size: 11px;
    }

    /* Content + side info stacked — edge to edge */
    html[dir="rtl"] div#content,
    html[dir="ltr"] div#content,
    div#content,
    body.mod1 div#content,
    body.mod2 div#content,
    body.mod3 div#content,
    html[dir="rtl"] div#side_info,
    html[dir="ltr"] div#side_info,
    div#side_info {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        grid-column: auto !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    div#content {
        order: 2;
        padding-top: 12px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html[dir="rtl"] div#side_info,
    div#side_info {
        clear: both;
        margin-top: 12px !important;
        text-align: inherit;
        order: 3;
    }

    html[dir="rtl"] div#side_info div.news,
    div#side_info div.news {
        width: auto !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Kill desktop footer 980px lock from new_layout_ltr.css */
    div#footer,
    div#footer div#mfoot,
    div#footer div#cfoot,
    div#footer .footer-menu,
    div#footer .copyright {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box;
    }

    div#footer {
        position: relative !important;
        height: auto !important;
        margin-top: 16px !important;
        padding: 8px 0 12px !important;
    }

    div#footer div#mfoot {
        height: auto !important;
        margin: 0 auto !important;
        padding: 8px 10px !important;
        text-align: center !important;
        background: none !important;
        background-image: none !important;
    }

    div#footer a.logo,
    div#footer .logo_traviangames {
        display: none !important;
    }

    div#footer .copyright {
        text-align: center !important;
        position: static !important;
        float: none !important;
    }

    /*
     * Title sprites are 1×1 spacer GIFs with background-image (468×60).
     * Never use height:auto with width:100% — that becomes a huge square.
     */
    img.img_login,
    img.anmelden,
    div.login h1 img,
    div.signup h1 img {
        display: block !important;
        width: 100% !important;
        max-width: 468px !important;
        height: 60px !important;
        margin: 0 auto 10px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    /* Login / signup forms — usable on phones */
    div.login table,
    div.signup table,
    div.login table#login_form,
    div.signup table#sign_input {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }

    div.login table td,
    div.signup table td {
        display: table-cell !important;
        float: none !important;
        box-sizing: border-box;
        word-wrap: break-word;
    }

    div.login input.text,
    div.signup input.text,
    div.login input[type="text"],
    div.login input[type="password"],
    div.signup input[type="text"],
    div.signup input[type="password"],
    div.login input#user,
    div.login input#pw,
    div.login input#captcha {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px;
        box-sizing: border-box;
        font-size: 16px !important; /* avoid iOS focus zoom */
    }

    div.login p.btn,
    div.signup p.btn,
    div.login .btn,
    div.signup .btn {
        text-align: center;
        margin: 12px 0;
    }

    div.login p.btn input,
    div.signup p.btn input,
    div.login button,
    div.signup button {
        min-height: 44px;
        padding: 8px 18px;
        font-size: 15px;
    }

    /* Village map shells — JS adds .tss-map-shell */
    .tss-map-shell {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 8px;
        overflow: hidden;
        position: relative;
    }

    div.village1 div#village_map,
    div.village2 div#village_map {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* World map — CSS-only horizontal scroll (no DOM wrap) */
    div.map {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    div#mbig,
    div.popup_map {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    div.village1 div#map_details {
        float: none !important;
        width: auto !important;
        max-width: 100%;
        margin-top: 8px !important;
    }

    .footer-stopper {
        float: none !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Stats day boxes — stack instead of 2×2 desktop floats */
    div.statistics table.top10,
    div.statistics div.top10 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        box-sizing: border-box;
    }

    div.village1 table#building_contract,
    div.village2 table#building_contract {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Build / send-troops dense UIs */
    div#build,
    div.a2b {
        overflow-x: visible;
    }

    div#build table,
    div.a2b table {
        max-width: 100%;
    }

    div#build img.building,
    div#build img.unit,
    div.a2b img.unit {
        max-width: none; /* keep sprite hit sizes */
    }

    div.map div#map {
        max-width: 100%;
    }

    div.universal,
    div.login,
    div.logout,
    div.signup,
    div.activate,
    div.reports,
    div.messages,
    div.statistics,
    div.player,
    div.alliance,
    div.plus,
    div.forum,
    div.a2b,
    div.village1,
    div.village2,
    div.village3,
    div.map,
    div.build,
    div.error_site,
    div.support,
    div.warsim {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ========== ≤768px — tablet refinements ========== */
@media (max-width: 768px) {
    div#dynamic_header {
        height: 64px !important;
    }

    div#dynamic_header .tss-brand .name {
        font-size: 1.05rem;
    }

    div#dynamic_header .tss-brand .tagline {
        display: none;
    }

    div#mtop {
        padding-top: 6px;
        padding-bottom: 2px;
    }

    div#mtop a#n1,
    div#mtop a#n2,
    div#mtop a#n3,
    div#mtop a#n4,
    div#side_navi a,
    div#textmenu a {
        min-width: 44px;
        min-height: 44px;
    }

    div#mtop div#n5 {
        min-width: 70px;
        min-height: 67px;
        direction: ltr;
    }

    div#mtop div#n5 a {
        min-width: 35px;
        min-height: 67px;
    }

    /* Stack legacy floats */
    div#side_info,
    div#side_navi,
    div#map_details,
    .floatLeft,
    .floatRight {
        float: none !important;
        max-width: 100% !important;
    }

    div.statistics table.top10 {
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 0 12px !important;
    }

    div.alliance table.dipl {
        float: none !important;
        width: 100% !important;
    }

    div.messages div#block,
    div.messages div.msg_head,
    div.messages div.msg_content,
    div.messages div.msg_foot,
    div.messages div.message,
    div.messages #write_content textarea {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    div.statistics div.graph {
        width: auto !important;
        max-width: 100%;
    }

    div.alliance div.chatHeader {
        width: auto !important;
        max-width: 100%;
    }

    /* Data tables — prevent blowout */
    div#content table,
    div.statistics table,
    div.reports table,
    div.alliance table,
    div.messages table,
    table.rate_table,
    table.traders,
    table#overview,
    table#member,
    table#player {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    div#content,
    div.statistics,
    div.reports,
    div.alliance,
    div.messages,
    div.plus,
    div.player {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    html[dir="rtl"] div#content table td,
    html[dir="rtl"] div#content table th {
        text-align: right;
    }

    html[dir="rtl"] div#content table td.ra,
    html[dir="rtl"] div#content table th.ra,
    html[dir="rtl"] div#content table .centered,
    html[dir="rtl"] div.statistics table td,
    html[dir="rtl"] div.statistics table th {
        text-align: center;
    }

    div.village1 div#village_map,
    div.village2 div#village_map,
    div.village1 div#village_map img,
    div.village2 div#village_map img {
        max-width: 100%;
        height: auto;
    }

    h1,
    div#content h1 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
    }

    /* compact.css puts an 80px side padding and an absolute drag handle on the
       map popup, both far too wide for a tablet. */
    div.popup_map {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 12px !important;
    }

    div.popup_map div#drag {
        width: auto !important;
        max-width: 100%;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
    }
}

/* ========== ≤480px — compact mobile ========== */
@media (max-width: 480px) {
    div.signup input.text,
    div.login input.text {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Registration wizard cards stack */
    #regwiz .rw-card {
        width: 100% !important;
        max-width: 100%;
        margin: 0 0 8px !important;
    }

    #regwiz .rw-cards {
        flex-wrap: wrap;
    }

    #regwiz .rw-hdr {
        padding-left: 16px !important;
        padding-right: 16px !important;
        height: auto !important;
        min-height: 56px;
    }

    #regwiz .rw-panel {
        height: auto !important;
        min-height: 160px;
    }

    /* Touch-friendly text nav links */
    div#side_navi p a {
        min-height: 40px;
        line-height: 40px;
        font-size: 13px;
        flex: 1 1 100%;
    }

    div#side_info a,
    div#textmenu a {
        min-height: 36px;
        display: inline-block;
        line-height: 36px;
        padding: 0 4px;
    }

    /* ---------- Village list on small screens ----------
     * The touch-target rule above turns every side-column link into a 36px
     * line box. Applied to the village list's icon shortcuts it stretched the
     * rows to 43px and pushed the last action icon out of its fixed-width
     * column, so the icon links opt out and only the village name — the link
     * people actually aim for — keeps a comfortable tap height.
     */
    /* Full-width side column here, so the icons go back to their native size. */
    /* Native 16px icons here, so the row needs more room than the desktop
       column: crop finder (18 + 4) + three markers (3 x 17) = 73px. The old
       72px column left 70px of content box and clipped the last marker. */
}

/* ========== Portal / index (main.css) ========== */
@media (max-width: 979px) {
    body.indexPage,
    body.indexpage,
    body.contentPage,
    body.contentpage,
    body.presto {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body.indexPage .wrapper,
    body.indexpage .wrapper,
    body.contentPage .wrapper,
    body.contentpage .wrapper,
    body.presto .wrapper {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body.indexPage #header,
    body.indexpage #header,
    body.contentPage #header,
    body.contentpage #header,
    body.presto #header {
        position: relative !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    #country_select {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: none !important; /* unused flags strip */
    }

    #navigation {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        left: auto !important;
        top: auto !important;
        height: auto !important;
        min-height: 48px;
        box-sizing: border-box;
    }

    #navigation table.menu {
        position: relative !important;
        width: 100% !important;
        max-width: 100%;
        right: auto !important;
        top: auto !important;
        margin: 0;
    }

    #navigation a.home {
        position: relative !important;
        display: block !important;
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 220px !important;
        height: 64px !important;
        margin: 0 auto 4px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    body.indexpage #content,
    body.indexPage #content,
    body.contentpage #content,
    body.contentPage #content {
        padding-top: 12px !important;
        padding-bottom: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: visible !important;
        height: auto !important;
    }

    /* Hero artwork — shorter on phones, in normal flow */
    body.indexpage #header,
    body.indexPage #header {
        height: 150px !important;
        min-height: 130px !important;
        max-height: 180px !important;
        background-size: cover !important;
        background-position: center top !important;
        overflow: hidden !important;
    }

    #player_counter,
    #player_counter table {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 8px 0 !important;
    }

    .grit .infobox div,
    #what_is_travian,
    #about_the_game {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #footer {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        bottom: auto !important;
        margin-top: 16px !important;
        padding: 12px 8px !important;
    }

    body.indexpage #content .grit,
    body.indexPage #content .grit,
    body.contentpage #content .grit,
    body.contentPage #content .grit,
    .grit,
    #footer .container,
    #screenshots,
    #screenshots_preview,
    #screenshot_list,
    #player_counter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
    }

    #screenshot_list,
    ul#screenshot_list,
    ul#screenshot_list.c1 {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        overflow: hidden;
        width: 100% !important;
        max-width: 100% !important;
    }

    #screenshot_list li {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }

    #screenshot_list img {
        max-width: 100%;
        height: auto !important;
    }

    .grit .infobox,
    .grit .secondarybox,
    #newsbox .news {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        box-sizing: border-box;
    }

    #register_now {
        position: relative !important;
        margin: 12px auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
        top: auto !important;
        max-width: 100%;
    }

    #t4play img {
        max-width: 100%;
        height: auto !important;
    }

    body.contentpage #content .characteristics,
    body.contentPage #content .characteristics,
    body.contentpage #content p,
    body.contentPage #content p,
    body.contentpage #content table,
    body.contentPage #content table,
    body.contentpage #content form,
    body.contentPage #content form {
        margin-left: 8px !important;
        margin-right: 8px !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.contentpage table.table_data,
    body.contentPage table.table_data {
        width: 100% !important;
        max-width: 100%;
    }

    .world_list li.w_big,
    .world_list li.w_small {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    #login_layer .overlay_content,
    #signup_layer .overlay_content {
        width: auto !important;
        max-width: calc(100% - 16px);
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 8px;
        right: 8px;
    }
}

/* Portal hero and logo, second tier. Was its own @media (max-width: 845px);
   moved onto the shared 768px step so the project has one breakpoint scale
   (480 / 768 / 979 / 980+). The tier itself is kept: the 979 block above still
   pins the hero to 150px between 769px and 979px. */
@media (max-width: 768px) {
    body.indexpage #header,
    body.indexPage #header,
    body.contentpage #header,
    body.contentPage #header {
        height: auto !important;
        min-height: 120px;
        background-size: cover;
    }

    #navigation a.home {
        width: auto !important;
        max-width: 100%;
    }
}

/* Farm list add + message icons (stats / profile / villages) */
img.addFarm {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../gpack/travian_default/img/a/att_all.gif") no-repeat center center;
    background-size: 14px 14px;
    vertical-align: middle;
    cursor: pointer;
}
img.messageStatus {
    display: inline-block;
    width: 16px;
    height: 12px;
    background:
        linear-gradient(135deg, transparent 42%, #c45a12 42%, #c45a12 58%, transparent 58%),
        linear-gradient(45deg, transparent 42%, #c45a12 42%, #c45a12 58%, transparent 58%),
        #f0a050;
    border: 1px solid #a04510;
    border-radius: 2px;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
}
td.farm,
td.msg {
    text-align: center;
    width: 28px;
}

/* Protected player name colors */
a.playerProtected,
span.playerProtected {
    color: #1b7a34 !important;
    font-weight: bold;
}
a.playerProtectedGold,
span.playerProtectedGold {
    color: #b8860b !important;
    font-weight: bold;
}
a.playerProtected:hover,
a.playerProtectedGold:hover {
    text-decoration: underline;
}