/**
 * Travian SS — full-bleed fluid shell, header chrome, resource strip.
 * Desktop ≥980px: CSS Grid mid + flex header. Mobile: travian-responsive.css.
 */

/* ========== Page foundation ========== */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/*
 * The page must never scroll sideways. This is the outer net only — clipping
 * alone would make anything wider than the shell unreachable, so genuinely
 * wide content is given its own horizontal scroller instead: .tss-scroll,
 * attached by js/travian-responsive.js to any table that outgrows its column,
 * and the explicit overflow-x on the map popup in css/saudi-map.css.
 */
html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

body.v35,
body.mod1,
body.mod2,
body.mod3 {
    background-color: #eeeeed;
    background-image: linear-gradient(180deg, #f4f4f3 0%, #e8e8e7 100%);
    background-attachment: fixed;
    font-family: "Tajawal", Tahoma, Arial, sans-serif;
}

.wrapper {
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Beat legacy compact/new_layout 980px locks globally */
div#header,
div#mid,
div#dynamic_header,
div#footer,
div#ltime,
body.mod1 div#ltime,
body.mod2 div#ltime,
body.mod3 div#ltime {
    min-width: 0 !important;
}

/* Remove Travian Games footer logo (legacy gpack background + sprite links) */
div#footer div#mfoot,
div#footer #mfoot,
#footer #mfoot {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

div#footer a.logo,
div#footer .logo_traviangames,
#footer .logo_traviangames,
div#footer img.logo_traviangames {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

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

div#mid {
    width: 100% !important;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    float: none !important;
}

div#resWrap {
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

/* ========== Resource chips — top bar, four green boxes like the reference ========== */
#tss_res_strip {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 930px !important;
    min-height: 0;
    height: auto !important;
    margin: 6px auto 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box;
    clear: both;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    float: none !important;
    z-index: 30 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

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

div#resWrap {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    float: none !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

div#res table {
    display: inline-table !important;
    background-color: transparent !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: none !important;
    border-collapse: separate;
    border-spacing: 8px 0;
    white-space: nowrap !important;
}

div#res table tbody,
div#res table tr {
    display: table-row !important;
    white-space: nowrap !important;
}

div#res table td,
div#res table td.tss-res-chip {
    display: table-cell !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    float: none !important;
    position: relative;
    overflow: hidden;
    background: #5cb85c !important;
    border: 1px solid #449d44 !important;
    border-radius: 4px;
    box-shadow: none;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    font-family: Tahoma, Arial, sans-serif !important;
    min-width: 140px;
    padding: 6px 14px !important;
    text-align: center !important;
}

/*
 * Chip states:
 *   default  green — every resource, all the time
 *   .is-neg  red   — crop only, and only as a warning: the granary is below
 *                    zero or net production is negative
 *
 * There is no "full" colour any more. How full a store is now reads off the
 * fill below, which says it continuously instead of only at the very top, so a
 * colour change for it would be saying the same thing twice — and worse, in a
 * colour that competes with the crop warning.
 */
div#res table td.tss-res-chip.is-neg {
    background: linear-gradient(180deg, #f47769 0%, #df4e43 100%) !important;
    border-color: #a33 !important;
    color: #fff !important;
}

div#res table td.tss-res-chip.is-neg span {
    color: #fff !important;
}

/*
 * Fullness fill: a darker band across the chip, as wide as the store is full.
 *
 * Drawn as a translucent darkening rather than a fixed colour so it works on
 * whatever the chip is painted — dark green on the green chips, dark red on a
 * crop warning — without a second palette to keep in sync. The percentage is
 * the only part that varies, and it arrives as --tss-fill: set server-side in
 * Templates/game_res_bar.tpl and kept current by tssResState() in unx.js as the
 * counter ticks. inset-inline-start makes it fill from the leading edge in both
 * RTL and LTR; the chip's overflow:hidden clips it to the rounded corners.
 */
div#res table td.tss-res-chip::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: var(--tss-fill, 0%);
    max-width: 100%;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
    z-index: 0;
    transition: width 0.4s linear;
}

/* Keep the icon and the number above the fill. */
div#res table td.tss-res-chip img,
div#res table td.tss-res-chip span {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    div#res table td.tss-res-chip::before {
        transition: none;
    }
}

div#res table img.r1,
div#res table img.r2,
div#res table img.r3,
div#res table img.r4,
div#res table img.r5 {
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
    margin-inline-end: 6px !important;
}

div#res table td.tss-res-chip span {
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 0.02em;
}

/* Legacy card classes (if any cached HTML) — keep horizontal */
.tss-res-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
}
.tss-res-card {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #2f6e20;
    border-radius: 3px;
}

/* ========== Header chrome (all viewports) ========== */
div#header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 72px;
    position: relative;
    background: linear-gradient(180deg, #4a4e54 0%, #272a2e 100%);
    border-bottom: 1px solid #1d1f22;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

div#mtop,
body.mod1 div#mtop,
body.mod2 div#mtop,
body.mod3 div#mtop,
html[dir="rtl"] div#mtop {
    position: relative !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 1400px;
    height: auto !important;
    min-height: 72px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    padding: 8px 12px;
    box-sizing: border-box;
    font-size: 13px !important;
    direction: ltr; /* gold stays left of nav icons, matching the reference */
}

.tss-mtop-gold,
.tss-mtop-nav,
.tss-mtop-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tss-mtop-nav {
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 0;
    overflow: visible;
    font-size: 0; /* keep sprite icons tight */
    direction: rtl; /* n1 starts from the right */
}

html[dir="ltr"] .tss-mtop-nav {
    direction: ltr;
}

div#mtop a#n1 { order: 1; }
div#mtop a#n2 { order: 2; }
div#mtop a#n3 { order: 3; }
div#mtop a#n4 { order: 4; }
div#mtop div#n5 { order: 5; }

.tss-mtop-gold {
    flex: 0 0 auto;
    order: 1;
}

.tss-mtop-nav {
    order: 2;
}

.tss-mtop-tools {
    flex: 0 0 auto;
    order: 3;
    margin-inline-start: auto;
}

div#mtop a#plus,
.tss-mtop-tools a#plus {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: inline-block;
    vertical-align: middle;
}

/* Natural 70×67 header icons — one row, no overlap, no sprite scaling. */
div#mtop a#n1,
div#mtop a#n2,
div#mtop a#n3,
div#mtop a#n4 {
    float: none !important;
    position: relative;
    display: block !important;
    flex-shrink: 0;
    overflow: hidden;
    width: 70px !important;
    height: 67px !important;
    min-width: 70px !important;
    min-height: 67px !important;
    margin: 0 !important;
    padding: 0 !important;
}

div#mtop a#n1 img,
div#mtop a#n2 img,
div#mtop a#n3 img,
div#mtop a#n4 img {
    display: block !important;
    width: 70px !important;
    height: 67px !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-position: 0 -21px !important;
}

div#mtop a#n1:hover img,
div#mtop a#n2:hover img,
div#mtop a#n3:hover img,
div#mtop a#n4:hover img {
    background-position: 0 -121px !important;
}

/*
 * #n5 sprite is drawn LTR: left half = reports, right half = messages.
 * i2 lights messages, i3 lights reports. Lock LTR so RTL never swaps hits.
 */
div#mtop div#n5,
html[dir="rtl"] div#mtop div#n5 {
    float: none !important;
    position: relative;
    flex-shrink: 0;
    direction: ltr !important;
    unicode-bidi: isolate;
    width: 70px !important;
    height: 67px !important;
    min-width: 70px !important;
    min-height: 67px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-position: 0 -21px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    overflow: visible !important;
}

div#mtop div#n5 a,
div#mtop div#n5 a.reports,
div#mtop div#n5 a.messages,
html[dir="rtl"] div#mtop div#n5 a,
html[dir="rtl"] div#mtop div#n5 a.reports,
html[dir="rtl"] div#mtop div#n5 a.messages {
    float: none !important;
    position: relative;
    display: block !important;
    width: 35px !important;
    height: 67px !important;
    min-width: 35px !important;
    min-height: 67px !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: ltr;
}

div#mtop div#n5 img,
div#mtop div#n5 img.l,
div#mtop div#n5 img.r {
    display: block !important;
    width: 35px !important;
    height: 67px !important;
}

div#mtop div#n5 .tss-unread-badge {
    position: absolute;
    top: 2px;
    z-index: 6;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    background: #5cb85c;
    color: #fff !important;
    font: bold 10px/16px Tahoma, Arial, sans-serif;
    border-radius: 8px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

div#mtop div#n5 a.reports .tss-unread-badge {
    right: -1px;
    left: auto;
}

div#mtop div#n5 a.messages .tss-unread-badge {
    right: -1px;
    left: auto;
}

a.tss-gold-chip,
#goldHeader.tss-gold-chip {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    direction: ltr;
    min-width: 0;
    width: auto;
    height: 30px;
    min-height: 30px;
    padding: 0 12px 0 14px !important;
    line-height: 30px !important;
    text-align: center;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: Tahoma, Arial, sans-serif !important;
    color: #333 !important;
    text-decoration: none !important;
    background: var(--color-tss-gold-pill-top, #fde68a) !important;
    border: 2px solid var(--color-tss-gold-pill-mid, #f59e0b) !important;
    border-radius: 20px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    z-index: 50;
    white-space: nowrap;
}

a.tss-gold-chip:hover,
#goldHeader.tss-gold-chip:hover {
    filter: brightness(1.06);
}

#goldHeader img,
.tss-gold-chip img,
#goldHeader img.gold,
.tss-gold-chip img.gold {
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.tss-gold-amount {
    color: #333 !important;
    font-weight: 700;
}

#silverHeader {
    display: inline-block !important;
    white-space: nowrap;
    line-height: 1.2;
    margin-top: 0;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #444 !important;
}

#silverHeader img {
    vertical-align: middle;
    margin-inline-end: 4px;
    width: 12px;
    height: 12px;
}

/* ========== Header clock + world selector ==========
 * Sits at the far edge of the grey strip, left of the day/night icon:
 *   line 1  "calculated in N ms"
 *   line 2  "server time HH:MM:SS   World 1 ▽"
 * #mtop is forced to LTR so the gold chip stays left of the icons, so the
 * block re-establishes the reading direction for its own text.
 */
.tss-headinfo {
    direction: ltr;
    text-align: right;
    line-height: 15px;
    font: 11px/15px Tahoma, Arial, sans-serif;
    color: #4a4a4a;
    white-space: nowrap;
}

html[dir="rtl"] .tss-headinfo {
    direction: rtl;
    text-align: right;
}

.tss-headinfo b,
.tss-headinfo .b {
    font-weight: bold;
    color: #333;
}

.tss-headinfo-line {
    display: block;
}

/* The dropdown is anchored to this span, hence the positioning context. */
.tss-world {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    margin-inline-end: 6px;
}

button.tss-world-toggle {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: bold 12px/15px Tahoma, Arial, sans-serif;
    color: #111;
}

button.tss-world-toggle:hover {
    color: #00a000;
}

.tss-world-caret {
    margin-inline-start: 3px;
    font-size: 10px;
    color: #333;
}

ul.tss-world-menu {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    z-index: 60;
    min-width: 120px;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #b6b9bd;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    text-align: start;
}

ul.tss-world-menu[hidden] {
    display: none;
}

ul.tss-world-menu li {
    margin: 0;
    padding: 0;
}

ul.tss-world-menu a,
ul.tss-world-menu .tss-world-current {
    display: block;
    padding: 4px 12px;
    font: 12px/16px Tahoma, Arial, sans-serif;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
}

ul.tss-world-menu a:hover {
    background: #eef7e6;
    color: #00a000;
}

ul.tss-world-menu .tss-world-current {
    font-weight: bold;
    color: #777;
    cursor: default;
}

.day_image {
    background-image: url("../gpack/travian_default/img/l/day.gif");
    width: 18px;
    height: 18px;
}

.night_image {
    background-image: url("../gpack/travian_default/img/l/night.gif");
    width: 18px;
    height: 18px;
}

.dayNightIcon {
    margin: 0;
    text-align: center;
    line-height: 0;
}

.dayNightIcon img {
    width: 18px;
    height: 18px;
    display: inline-block;
}

div#mtop > #wrapper,
div#mtop #container {
    width: auto !important;
    height: auto !important;
    position: static !important;
    display: block !important;
}

div#mtop #container div {
    position: static !important;
    top: auto !important;
}

/* ========== Side menu groups ========== */
div#side_navi {
    font-family: "Tajawal", Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

div#side_navi .tss-nav-group {
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(120, 100, 70, 0.22);
}

div#side_navi .tss-nav-group:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

div#side_navi .tss-nav-label {
    display: block;
    margin: 0 0 4px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-tss-stone-label, #5b6169);
    opacity: 0.9;
}

html[dir="rtl"] div#side_navi .tss-nav-label {
    padding-left: 0;
    padding-right: 12px;
}

div#side_navi .tss-nav-group a {
    display: block;
    font-size: 13px;
    font-weight: bold;
}

/* ---------- Reference side-nav accents ---------- */

/* Friends counter: dark green pill after the label, orange while requests
   are waiting for confirmation. */
div#side_navi .tss-nav-count {
    display: inline-block;
    min-width: 14px;
    margin-inline-start: 4px;
    padding: 0 4px;
    background: #0a7d00;
    border-radius: 3px;
    color: #fff !important;
    font: bold 11px/15px Tahoma, Arial, sans-serif;
    text-align: center;
    vertical-align: 1px;
}

div#side_navi .tss-nav-count.has-requests {
    background: #d97300;
}

div#side_navi .tss-nav-on {
    text-decoration: underline;
}

div#side_navi a.tss-nav-gold {
    color: #f07800 !important;
}

div#side_navi a.tss-nav-support {
    color: #1a4fd8 !important;
}

div#side_navi a.tss-nav-admin {
    color: #c00 !important;
}

div#side_navi a.tss-nav-mh {
    color: #06c !important;
}

div#side_navi .tss-nav-highlight {
    margin-top: 14px;
}

div#side_navi .tss-nav-links {
    margin-top: 14px;
}

/* plus.gif is a 13px-wide three-state strip: normal, hover, disabled. */
div#side_navi a.tss-nav-addlink img.tss-nav-addlink-icon {
    display: inline-block;
    width: 13px;
    height: 19px;
    margin-inline-end: 4px;
    vertical-align: -5px;
    background-image: url("../gpack/travian_default/img/a/plus.gif");
    background-repeat: no-repeat;
    background-position: 0 0;
}

div#side_navi a.tss-nav-addlink:hover img.tss-nav-addlink-icon {
    background-position: 0 -20px;
}

/* ---------- Village title ---------- */

/* "(Capital)" belongs on the title line, greyed and one size down. */
div.village1 h1 #cap {
    margin-inline-start: 8px;
    color: #999;
    font-size: 12px;
    font-weight: normal;
}

/* Village overview tables: production, troops, movements */
div.village1 table#production,
div.village1 table#troops,
div.village1 table#movements,
div.village1 table#production td,
div.village1 table#production th,
div.village1 table#troops td,
div.village1 table#troops th,
div.village1 table#movements td,
div.village1 table#movements th {
    font-size: 14px;
    font-weight: bold;
}

/* ========== Village list (multivillage.tpl) ==========
   Moved: the widget is a grid list now, and its layout, icon sizing and
   sprite offsets live together in css/tailwind-chrome.src.css. ========== */

/* ========== Crop finder (/cropfinder) ========== */

/* The coordinate pair. Pinned to ltr because "X 6  Y 8" is data, and each
   label is its own inline-flex box so the bidi algorithm can never move an
   axis letter away from its field - which is what printed "X:" on top of the
   input before (measured: the Y label's box spanned the X field entirely). */
.cf-coords {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    direction: ltr;
}

.cf-coords .cf-coord {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.cf-coords .cf-axis {
    color: var(--color-tss-stone-label, #5b6169);
    font-weight: 700;
}

.cf-coords input.text {
    width: 58px;
    text-align: center;
}

/* ========== Friends page (/friends) ========== */

div#content.friends h2 {
    margin: 18px 0 6px;
}

table.friends-table {
    width: 100%;
    border-collapse: collapse;
}

table.friends-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

table.friends-table td.on {
    width: 20px;
}

table.friends-table td.ali {
    width: 90px;
}

table.friends-table td.act {
    white-space: nowrap;
    text-align: end;
}

form.friends-inline {
    display: inline;
    margin: 0 0 0 6px;
}

html[dir="rtl"] form.friends-inline {
    margin: 0 6px 0 0;
}

.friends-btn {
    padding: 3px 12px;
    background: #eee;
    border: 1px solid #999;
    border-radius: 2px;
    font: bold 11px/1.4 Tahoma, Arial, sans-serif;
    color: #333;
    cursor: pointer;
}

.friends-btn:hover {
    background: #e4e4e4;
}

.friends-btn-ok {
    background: #71d000;
    border-color: #5bb000;
    color: #fff;
}

.friends-btn-ok:hover {
    background: #5bb000;
}

form.friends-add {
    margin: 6px 0;
}

form.friends-add input.text {
    padding: 3px 6px;
    border: 1px solid var(--color-tss-stone-line, #3c414733);
    font: 12px Tahoma, Arial, sans-serif;
}

.friends-ok {
    color: #2f7d00;
    font-weight: bold;
}

.friends-err {
    color: #b3261e;
    font-weight: bold;
}

.friends-empty,
.friends-hint {
    color: #777;
}

/* ========== Alliance chat widget (chat.php) ==========
 * Lifted verbatim out of chat.tpl's old inline styles so travian-rtl.css can
 * reach it. Geometry (content flush right, scrollbar hugging the left) is the
 * existing/default look — unchanged for LTR. RTL mirrors it, see
 * travian-rtl.css section 16.
 * ========================================================================== */

div.tss-chat-container {
    position: relative;
    height: 220px;
    width: 500px;
    overflow: hidden;
    background: #FFF;
    border: 1px solid #C0C0C0;
}

div.tss-chat-messages {
    position: absolute;
    top: 0;
    right: 5px;
    width: 470px;
    background: #FFF;
}

div.tss-chat-scrollbar-track {
    position: absolute;
    top: 0;
    right: 481px;
    width: 17px;
    height: 198px;
}

div.tss-chat-scrollbar-line {
    position: absolute;
    top: 0;
    right: 489px;
    width: 1px;
    height: 198px;
    border: 1px solid #71D000;
    background: #FFF;
}

div.tss-chat-scrollbar-thumb {
    position: absolute;
    top: 0;
    right: 481px;
    width: 17px;
    height: 198px;
    border: 1px solid #71D000;
    background: #F0FFF0;
}

input.tss-chat-scrollbar-checkbox {
    position: absolute;
    top: 200px;
    right: 481px;
}

/* Flexbox instead of float:left on the send button — direction-aware for
   free, so no RTL override is needed for this row at all. */
div.tss-chat-send-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 10px 0;
}

input.tss-chat-input {
    width: 415px;
}

/* input#btn_ok gets its sprite (width + background-image) from lang.css but
   no border reset; without it browsers draw a default button bezel around
   the OK sprite. */
input#btn_ok {
    border: 0;
}

/* ========== Alliance "to the forum" link ==========
 * Was a glyph baked into the string (» to the forum). CSS-generated instead,
 * so RTL can point it the other way without touching the translation.
 * ========================================================================== */

a.forum-link::after {
    content: " \00BB";
}

/* ========== Desktop ≥980px — classic reference theme ==========
 * Single block on purpose. This file previously carried TWO
 * @media (min-width: 980px) blocks: an earlier one describing a fluid
 * 1400px CSS Grid, and a later one pinning the classic fixed 980px shell.
 * The later block overrode every shared selector, so the fluid layout never
 * rendered. The competing declarations were dropped and the rules that were
 * unique to the first block were merged in here.
 */
@media (min-width: 980px) {
    body.mod2 div#mid {
        margin-top: 0;
        padding-top: 12px;
    }

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

    /* The gamepack floats these three left. #mid is a grid container so floats
       on its items are ignored, but the reset keeps the intent explicit and
       protects the columns if #mid ever falls back to block layout. */
    div#side_navi,
    div#content,
    div#side_info,
    body.mod1 div#content,
    body.mod2 div#content,
    body.mod3 div#content,
    body.mod1 div#side_info,
    body.mod2 div#side_info,
    body.mod3 div#side_info {
        float: none !important;
        grid-row: 1;
        height: auto !important;
        min-height: 0;
    }

    div#content.village1 {
        padding: 12px 0 0;
        width: auto !important;
    }

    div#content.village2 {
        padding: 12px 0 0;
        width: auto !important;
    }

    div#content.village1,
    div#content.village2,
    div#content.build,
    div#content.reports,
    div#content.messages,
    div#content.statistics,
    div#content.player,
    div#content.alliance,
    div#content.plus,
    div#content.a2b,
    div#content.map,
    div.village1,
    div.village2,
    div.build,
    div#build {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    div#side_info,
    body.mod1 div#side_info,
    body.mod2 div#side_info,
    body.mod3 div#side_info {
        margin: 0 !important;
        z-index: 3;
    }

    /* The gamepack gives #side_info a physical padding-left: 10px. */
    html[dir="rtl"] div#side_info {
        padding-left: 0 !important;
        text-align: right;
    }
    div.village1 div#village_map {
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 300px 264px;
    }

    div.village1 div#map_details {
        float: right;
        margin-right: 1px;
        margin-top: -29px;
        width: 229px;
        max-width: 100%;
    }

    html[dir="rtl"] div.village1 div#map_details {
        float: left;
        margin-left: 1px;
        margin-right: 0;
    }

    .footer-stopper {
        float: none;
        clear: both;
        margin-bottom: 40px;
        width: 100%;
    }

    div#footer {
        min-width: 0 !important;
        font-size: 11px;
        line-height: 19px;
    }

    div#footer div#mfoot {
        height: auto;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: center;
        /* compact.css paints btm.gif on the footer. */
        background: none !important;
    }

    /* ---------- classic fixed 980px shell ---------- */

    /*
     * Two declarations came out of this rule, both of which were overriding
     * the design system from inside the project's own stylesheet:
     *
     *   font-family: Tahoma !important — this file already sets
     *   `body.v35 { font-family: "Tajawal", ... }` at line 39, and this beat
     *   it above 980px. The result was a game that rendered in the Arabic
     *   face on a phone and in Tahoma on a desktop. Tahoma carries Arabic
     *   badly at small sizes, which is the reason the self-hosted faces were
     *   added in the first place.
     *
     *   background: #fff !important — this painted the whole viewport white,
     *   so the page background in the palette never showed. `.wrapper` below
     *   keeps its white, which is what makes the 980px shell read as a sheet
     *   laid on the page rather than as the page; the stone now visible
     *   around it is the margin the centred layout is supposed to sit in.
     *
     * `color` stays: it is the inherited fallback for anything outside
     * #content, and the UI layer sets #content's own ink.
     */
    html,
    body {
        color: #333;
        font-size: 11px;
    }

    .wrapper {
        width: 980px !important;
        max-width: 980px !important;
        min-width: 980px !important;
        margin: 0 auto !important;
        background: #fff;
    }

    div#dynamic_header,
    body.mod1 div#dynamic_header,
    body.mod2 div#dynamic_header {
        width: 980px !important;
        max-width: 980px !important;
        height: 100px !important;
        margin: 0 auto !important;
    }

    div#header {
        width: 980px !important;
        max-width: 980px !important;
        min-width: 980px !important;
        min-height: 72px;
        height: auto !important;
        margin: 0 auto;
        overflow: visible !important;
        background-color: #f1f1ef !important;
        background-image: linear-gradient(180deg, #fbfbfa 0%, #e2e2df 100%) !important;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #bbb;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    }

    div#mtop,
    body.mod1 div#mtop,
    body.mod2 div#mtop,
    body.mod3 div#mtop,
    html[dir="rtl"] div#mtop {
        width: 720px !important;
        max-width: 720px !important;
        min-height: 72px;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        font-family: Tahoma, Arial, sans-serif !important;
        overflow: visible !important;
        direction: ltr;
    }

    .tss-mtop-nav {
        order: 2;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 0;
        justify-content: center;
    }

    .tss-mtop-gold {
        order: 1;
        flex: 0 0 auto;
        margin-inline-end: 8px;
    }

    .tss-mtop-tools {
        order: 3;
        flex: 0 0 auto;
        margin-inline-start: 5px;
        gap: 3px;
    }

    a.tss-gold-chip,
    #goldHeader.tss-gold-chip {
        min-width: 0;
        min-height: 28px;
        height: 28px;
        padding: 0 10px 0 12px !important;
        gap: 6px;
        border: 2px solid var(--color-tss-gold-pill-mid, #f59e0b) !important;
        border-radius: 18px !important;
        background: var(--color-tss-gold-pill-top, #fde68a) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
        color: #333 !important;
        font: bold 13px/26px Tahoma, Arial, sans-serif !important;
    }

    #goldHeader img,
    .tss-gold-chip img,
    #goldHeader img.gold,
    .tss-gold-chip img.gold {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }

    #silverHeader {
        display: none !important;
    }

    #tss_res_strip {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 980px !important;
        max-width: 980px !important;
        min-height: 36px !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
        z-index: 30 !important;
        overflow: visible !important;
        background: linear-gradient(180deg, #6fc244 0%, #4f9a32 55%, #458a2c 100%) !important;
        border: 0 !important;
        border-bottom: 1px solid #326e22 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    #tss_res_strip {
        max-width: 930px !important;
        margin: 8px auto 0 !important;
        padding: 0 !important;
        background: transparent !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: 930px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        z-index: 31 !important;
        background: transparent !important;
        text-align: center;
    }

    div#resWrap {
        display: block !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        float: none !important;
        margin: 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    div#res table {
        display: inline-table !important;
        height: auto;
        border-spacing: 8px 0;
        font-family: Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
        margin: 0 auto !important;
    }

    div#res table td,
    div#res table td.tss-res-chip {
        display: table-cell !important;
        float: none !important;
        position: relative;
        overflow: hidden;
        height: auto;
        min-width: 140px;
        padding: 6px 14px !important;
        font: bold 13px/18px Tahoma, Arial, sans-serif !important;
        vertical-align: middle !important;
        text-align: center !important;
        color: #fff !important;
        background: #5cb85c !important;
        border: 1px solid #449d44 !important;
        border-radius: 4px;
        box-shadow: none;
    }

    /* Same two states as the base rules above: green everywhere, red only to
       warn about a crop deficit. Kept in sync deliberately. */
    div#res table td.tss-res-chip.is-neg {
        border-color: #a33 !important;
        background: linear-gradient(180deg, #f47769, #df4e43) !important;
        color: #fff !important;
    }

    div#res table td.tss-res-chip.is-neg span {
        color: #fff !important;
    }

    /* The fullness fill, as in the base rules. */
    div#res table td.tss-res-chip::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: var(--tss-fill, 0%);
        max-width: 100%;
        background: rgba(0, 0, 0, 0.22);
        pointer-events: none;
        z-index: 0;
    }

    div#res table td.tss-res-chip img,
    div#res table td.tss-res-chip span {
        position: relative;
        z-index: 1;
    }

    div#res table img.r1,
    div#res table img.r2,
    div#res table img.r3,
    div#res table img.r4,
    div#res table img.r5 {
        display: inline-block !important;
        margin: 0 6px 0 0 !important;
        vertical-align: middle !important;
        float: none !important;
        transform: none;
    }

    html[dir="rtl"] div#res table img.r1,
    html[dir="rtl"] div#res table img.r2,
    html[dir="rtl"] div#res table img.r3,
    html[dir="rtl"] div#res table img.r4,
    html[dir="rtl"] div#res table img.r5 {
        margin: 0 0 0 6px !important;
    }

    div#mid {
        direction: rtl;
        display: grid !important;
        grid-template-columns: 130px 552px 250px !important;
        column-gap: 14px !important;
        width: 960px !important;
        max-width: 960px !important;
        min-width: 960px !important;
        margin: 0 auto !important;
        padding: 16px 0 24px !important;
        background: #fff !important;
    }

    div#side_navi {
        direction: rtl;
        grid-column: 1;
        width: 130px !important;
        padding: 0 !important;
        color: #222;
        font: bold 13px/20px Tahoma, Arial, sans-serif !important;
    }

    div#side_navi .tss-nav-group {
        margin: 0 0 12px;
        padding: 0;
        border: 0;
    }

    div#side_navi .tss-nav-label {
        margin: 0 0 2px;
        padding: 0 !important;
        color: #777;
        font: bold 13px/20px Tahoma, Arial, sans-serif;
        letter-spacing: 0;
        text-transform: none;
    }

    div#side_navi p {
        margin: 0 !important;
        line-height: 20px;
    }

    div#side_navi p a,
    div#side_navi .tss-nav-group a {
        padding: 0 !important;
        color: #222 !important;
        font: bold 13px/20px Tahoma, Arial, sans-serif;
        text-decoration: none;
    }

    div#side_navi p a:hover,
    div#side_navi .tss-nav-group a:hover {
        color: #00a000 !important;
        text-decoration: underline;
    }

    /*
     * Geometry only. The type used to be set here too — `color: #333` and
     * `font-family: Tahoma !important` on #content, and a second rule giving
     * h1/h2 Tahoma at 18px/15px — and because of the !important and the
     * `body.mod2 div#content` specificity, those beat the type scale in
     * css/tailwind-ui.src.css on every desktop page. The scale documented
     * there (13/14/15/18/24, Cairo for headings, Tajawal for body) was
     * therefore never what a player saw above 980px: measured in a browser,
     * h1 resolved to Tahoma 18px rather than Cairo 24px, and body text to
     * #333 rather than the palette ink.
     *
     * One owner per concern: this block sizes and places the column, and
     * css/tailwind-ui.src.css decides what the text in it looks like.
     *
     * `div#content a { color: #159b00 }` went with them — a green link
     * inherited from the reference theme, already dead (the UI layer's own
     * `div#content a` has equal specificity and loads later), and misleading
     * to leave sitting next to the rules that were not dead.
     */
    div#content,
    body.mod1 div#content,
    body.mod2 div#content,
    body.mod3 div#content {
        direction: rtl;
        grid-column: 2;
        width: 552px !important;
        max-width: 552px !important;
        min-width: 0;
        min-height: 450px;
        padding-top: 12px !important;
    }

    div#content table {
        font-family: Tahoma, Arial, sans-serif;
        font-size: 11px;
    }

    div.village1 table#production,
    div.village1 table#troops,
    div.village1 table#movements,
    div.village1 table#production td,
    div.village1 table#production th,
    div.village1 table#troops td,
    div.village1 table#troops th,
    div.village1 table#movements td,
    div.village1 table#movements th {
        font-size: 14px;
        font-weight: bold;
    }

    div#content table thead th,
    div#content table thead td {
        background-color: #eee !important;
        color: #333;
    }

    div#content table tbody tr:nth-child(even) td {
        background-color: #f6f6f6;
    }

    /*
     * Geometry, and a size — not a family. The `font:` shorthand here was
     * `10px/17px Tahoma !important`, and because `body.mod2 div#side_info`
     * outranks the chrome layer's `div#side_info`, it won: the whole right
     * column rendered in Tahoma, so the villages widget never got the Cairo
     * that css/tailwind-chrome.src.css assigns it. Family now comes from
     * there; only the inherited size is set here.
     *
     * 12px rather than the old 10px. Every component in this column states
     * its own size (#vlist is 11-13px), so this reaches the sidebar text
     * that does not — the news box, the h5s — and 10px Arabic is below the
     * size at which the diacritics survive.
     */
    div#side_info,
    body.mod1 div#side_info,
    body.mod2 div#side_info,
    body.mod3 div#side_info {
        direction: rtl;
        grid-column: 3;
        width: 250px !important;
        max-width: 270px !important;
        padding: 0 !important;
        color: #555;
        font-size: 12px;
        line-height: 17px;
        align-self: start;
    }

    div#footer {
        width: 980px !important;
        max-width: 980px !important;
        min-height: 30px;
        margin: 30px auto 0;
        padding: 8px 0 !important;
        background: #f1f1f1 !important;
        border-top: 1px solid #ddd;
        box-shadow: none !important;
    }

    div#footer div#mfoot {
        width: 812px !important;
        max-width: 812px !important;
        padding: 0 !important;
        color: #888;
        font: 10px/16px Tahoma, Arial, sans-serif;
    }
}