/**
 * Travian SS — map village view styled after Saudi Travian (travianksa).
 * Layout: info + reports on the start side, circular field map + options on the end.
 */

/* Soft page wash closer to Saudi Travian */
body.v35.mod1,
body.v35.mod2,
body.v35.mod3 {
    background-color: #eeeeed;
    background-image:
        linear-gradient(180deg, #f4f4f3 0%, #eaeae9 100%);
}

/* ==========================================================================
   Village list — moved out
   --------------------------------------------------------------------------
   The widget used to be a <table> whose column widths lived here, held
   inside the 250px column by table-layout: fixed. It is now a grid list and
   its layout and skin live together in css/tailwind-chrome.src.css (built to
   css/travian-ss-chrome.css). Nothing about it belongs in this file any more.
   ========================================================================== */

div#side_info,
body.mod1 div#side_info,
body.mod2 div#side_info,
body.mod3 div#side_info {
    align-self: start;
}

/* —— Map village detail (Saudi row) —— */
div#content.map.saudi-vilview {
    background: #fff;
    border: 1px solid #dedfe1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 14px 16px 18px;
    box-sizing: border-box;
}

div.map.saudi-vilview h1 {
    text-align: center;
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    float: none !important;
    position: static !important;
    left: auto !important;
}

div.map.saudi-vilview div#dmain {
    text-align: center;
    color: var(--tssui-ink-soft, #6b7178);
    font-size: 12px;
    margin: 0 0 12px;
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto;
}

div.map.saudi-vilview .saudi-vil-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 18px 24px;
    direction: ltr; /* keep map sprite coords stable */
}

/* Info column first (visual left) — matches Saudi screenshot */
div.map.saudi-vilview #map_details {
    float: none !important;
    margin: 0 !important;
    width: 200px;
    max-width: 100%;
    flex: 0 1 200px;
    text-align: right;
}

html[dir="ltr"] div.map.saudi-vilview #map_details {
    text-align: left;
}

div.map.saudi-vilview #map_details table {
    margin-bottom: 10px;
    width: 100%;
}

div.map.saudi-vilview #map_details table thead th,
div.map.saudi-vilview #map_details table#village_info th {
    color: #333;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 4px;
    white-space: nowrap;
}

div.map.saudi-vilview #map_details table#village_info td,
div.map.saudi-vilview #map_details table.rep td {
    font-size: 12px;
    padding: 3px 4px;
}

div.map.saudi-vilview #map_details a {
    color: #2d6b1f;
    font-weight: 600;
}

div.map.saudi-vilview .saudi-vil-mapcol {
    flex: 0 0 auto;
    width: 300px;
    max-width: 100%;
}

div.map.saudi-vilview img#detailed_map,
div.map.saudi-vilview div#village_map {
    float: none !important;
    left: auto !important;
    margin: 0 0 10px !important;
    position: relative !important;
    display: block;
    height: 264px;
    width: 300px;
    max-width: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* Reuse village1 field backgrounds when levels are shown on the map page */
div.map.saudi-vilview.village1 div#village_map {
    float: none !important;
    margin: 0 0 10px !important;
}

div.map.saudi-vilview table#options {
    clear: none !important;
    margin: 0 !important;
    width: 100%;
}

div.map.saudi-vilview table#options thead th {
    font-weight: 700;
    font-size: 12px;
    color: #333;
    text-align: right;
    padding: 2px 0 6px;
}

html[dir="ltr"] div.map.saudi-vilview table#options thead th {
    text-align: left;
}

div.map.saudi-vilview table#options tbody td,
div.map.saudi-vilview table#options tbody td.none {
    padding: 3px 0;
    font-size: 12px;
    text-align: right;
}

html[dir="ltr"] div.map.saudi-vilview table#options tbody td,
html[dir="ltr"] div.map.saudi-vilview table#options tbody td.none {
    text-align: left;
}

div.map.saudi-vilview table#options a {
    color: #2d6b1f;
    font-weight: 600;
    text-decoration: none;
}

div.map.saudi-vilview table#options a:hover {
    text-decoration: underline;
}

div.map.saudi-vilview table#options tbody td.none {
    color: var(--tssui-ink-soft, #6b7178);
}

/* Side nav — flatter Saudi-like green links */
html[dir="rtl"] div#side_navi p a,
html[dir="rtl"] div#side_navi .tss-nav-group a {
    color: #2d6b1f;
}

div#side_navi .tss-nav-label {
    color: #666;
    font-size: 13px;
    font-weight: 700;
}

div#side_navi a[href*="plus"],
div#side_navi a.tss-nav-gold {
    color: #c45a00 !important;
}

/* ==========================================================================
   Large map popup — keep it inside the 980px shell
   --------------------------------------------------------------------------
   The page is laid out at a fixed 980px (the viewport is pinned to that width
   in Templates/head_assets.tpl, so a phone renders the desktop shell and zooms
   it to fit). The world-map popup predates that and is wider than the page in
   three separate places:

     - PopupMap() in unx.js writes a 1000px <iframe> and centres it with
       `left: (documentWidth - 1000) / 2`, which is negative at 980px, so the
       frame starts off the left edge;
     - the Arabic branch pins the close button at `right: 968px` inline;
     - the document inside the frame draws div#mbig at 997px, with a 979px
       #lightframe, a 975px #darkframe / #map and a 971px #map_content
       (gpack/travian_default/lang/<lang>/compact.css - <lang> is spelled out
       rather than globbed, because a glob written with a star and a slash ends
       the comment right there, and every rule after it is parsed as garbage.
       That is not hypothetical: it is what silently killed div.popup_map below
       for as long as this comment has existed).

   Rather than patch the graphic pack, the popup is constrained here and the
   map that genuinely needs the extra pixels scrolls inside its own box.
   ========================================================================== */
/* karte2.php renders these frames directly in the page, not inside the popup
   iframe. compact.css insets #lightframe with `left: 7px` because it was drawn
   inside a 997px #mbig; here #mbig is full width and centres its child, so the
   offset only pushes the frame past the right edge - measured 6px over on both
   the desktop and the 980px phone shell. A margin insets it without moving it. */
div#map_content div#lightframe {
    left: 0;
    margin: 7px auto;
    max-width: 100%;
}

div.popup_map {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/*
 * compact.css sizes #drag2 as a 20x20 drag handle, but the markup PopupMap()
 * writes puts the whole popup inside it. That only worked because the iframe
 * was absolutely positioned and so ignored its parent's width; once the frame
 * is laid out in flow it needs a full-width container.
 */
div.popup_map div#drag2 {
    position: relative;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
}

/* Take the frame out of absolute positioning entirely: that is where the
   inline `left: (documentWidth - 1000) / 2` came from, and it is negative at
   980px. In flow it simply fills the popup, and the map inside it scrolls. */
div.popup_map iframe#Frame {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
    border: 0;
}

/* …and the inline `right: 968px` on the Arabic close button. */
div.popup_map a#map_popclose {
    position: absolute !important;
    inset-inline-end: 4px !important;
    inset-inline-start: auto !important;
    top: 4px;
    z-index: 40;
}

/* Inside the frame: the map keeps its real pixel size, the frame scrolls. */
div#mbig {
    box-sizing: border-box;
    width: auto !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    div.map.saudi-vilview .saudi-vil-row {
        flex-direction: column;
        align-items: center;
    }

    div.map.saudi-vilview #map_details {
        width: 100%;
        flex-basis: auto;
        text-align: center;
    }

    div.map.saudi-vilview table#options thead th,
    div.map.saudi-vilview table#options tbody td,
    div.map.saudi-vilview table#options tbody td.none {
        text-align: center;
    }
}