@charset "UTF-8";
/* ============================================
   mobile.css — التصميم الجوالي (المرحلة أ: التأسيس)
   يُحمّل بعد compact.css و rtl.css
   ============================================ */

@media screen and (max-width: 768px) {

  /* تصحيح موضع صورة الإسطبل بعرض الجوال — تفادي التراكب مع الجدول */
  div#build.gid20 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid20 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة الثكنة بعرض الجوال — تفادي التراكب مع الجدول */
  div#build.gid19 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid19 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة الورشة بعرض الجوال — تفادي التراكب مع الجدول */
  div#build.gid21 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid21 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة الأكاديمية بعرض الجوال — تفادي التراكب مع الجدول */
  div#build.gid22 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid22 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة الحداد بعرض الجوال — تفادي التراكب مع الجدول */
  div#build.gid12 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid12 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة المخزن بعرض الجوال */
  div#build.gid10 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid10 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة مخزن الحبوب بعرض الجوال */
  div#build.gid11 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid11 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة ساحة البطولة بعرض الجوال */
  div#build.gid14 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid14 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة المبنى الرئيسي بعرض الجوال */
  div#build.gid15 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid15 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة المكتب التجاري بعرض الجوال */
  div#build.gid28 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid28 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة الثكنة الكبيرة بعرض الجوال */
  div#build.gid29 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid29 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة الإسطبل الكبير بعرض الجوال */
  div#build.gid30 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid30 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة نقابة البنّاء بعرض الجوال */
  div#build.gid34 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid34 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة المستودع الكبير بعرض الجوال */
  div#build.gid38 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid38 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصحيح موضع صورة المصانع الحربية الكبيرة بعرض الجوال */
  div#build.gid42 a.build_logo {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    transform: translateY(-40px);
  }
  div#build.gid42 a.build_logo img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0 auto !important;
  }

  /* تصفير العرض الثابت: كل الحاويات الرئيسية بعرض كامل */
  html, body, div.wrapper, div#dynamic_header,
  div#header, div#mid, div#footer, div#res {
    width: 100% !important;
    min-width: 0 !important;
  }
	    #mid {
    display: flex !important;
    flex-direction: column !important;
  }
  #dynamic_header {
    background-size: cover !important;
    background-position: center top !important;
    height: 80px !important;
  }



  /* المحتوى بعرض كامل + تمرير أفقي للجداول العريضة (شريط مخفي) */
  div#content {
    width: 99% !important;
    min-width: 0 !important;
    padding-right: 2px !important;
    padding-left: 2px !important;
    padding-bottom: 50px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  div#content::-webkit-scrollbar { display: none; }

  /* الهيدر: شريط التنقّل في المنتصف بعرض كامل */
  div#mtop {
    width: 100% !important;
    position: relative !important;
    right: auto !important;
    margin-right: 0 !important;
    display: flex;
    justify-content: center;
  }
  div#mtop a, div#mtop div {
    float: none !important;
  }

  /* القائمتان الجانبيتان: تُكدَّسان مؤقتاً تحت المحتوى (تتحوّلان لمنزلقة في المرحلة ب) */
  div#side_navi, div#side_info {
    width: 100% !important;
    float: none !important;
    position: static !important;
    margin: 10px 0 !important;
  }

  /* إخفاء عناصر سطح المكتب غير المفيدة على الجوال */
  div#ltime, .time_of_day { display: none; }

  /* ===== شريط الموارد الجوالي ===== */
  #res {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  /* عكس ترتيب شريط الموارد على الجوال: خشب|طين|حديد|قمح من اليمين لليسار */
  /* على جدول الموارد نفسه لا على #res (direction على #res يسبب اختفاء الشريط) */
  div#res table:nth-of-type(1) { direction: rtl !important; }
  #resWrap {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }
  /* جدول الموارد: يتوزّع بعرض كامل */
  #res table {
    width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  #res td {
    width: 25% !important;
    padding: 0 1px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* تصغير البار ليتّسع على الشاشة الضيقة */
  div#res td .barWrapper {
    min-width: 0 !important;
    width: 100% !important;
    height: 22px !important;
    line-height: 22px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  div#res td .barWrapper .resval {
    font-size: 10px !important;
    padding: 0 16px 0 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;
  }
  div#res td .barWrapper .resicon {
    width: 14px !important;
    height: 14px !important;
  }
  /* إخفاء جدول الذهب كاملاً على الجوال (سيُنقل لمكان آخر لاحقاً) */
  div#res table:nth-of-type(2) { display: none !important; }
  /* إخفاء خلية استهلاك القمح (r5) وخلية عدّاد pop/crop المجاورة (ستُنقل لاحقاً) */
  div#res table:nth-of-type(1) td:has(img.r5),
  div#res table:nth-of-type(1) td:has(img.r5) + td { display: none !important; }

  /* ===== ضبط الهيدر #mtop ===== */
  #mtop a#plus { display: none !important; }
  #mtop #wrapper, #mtop #container, #mtop .dayNightIcon { display: none !important; }
  #mtop {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    right: auto !important;
    left: auto !important;
    position: relative !important;
  }
  #mtop a#n1, #mtop a#n2, #mtop a#n3, #mtop a#n4, #mtop #n5 {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
  }
  #mtop #n5 {
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
    flex-direction: row !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  #mtop #n5.i4 { background-image: url(img/vip/inbox0.jpg) !important; }
  #mtop #n5.i3 { background-image: url(img/vip/inbox1.jpg) !important; }
  #mtop #n5.i2 { background-image: url(img/vip/inbox2.jpg) !important; }
  #mtop #n5.i1 { background-image: url(img/vip/inbox3.jpg) !important; }
  #mtop #n5 a {
    display: block !important;
    width: 50% !important;
    height: 100% !important;
    float: none !important;
  }
  #mtop #n5 a img.l, #mtop #n5 a img.r {
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: none !important;
  }
  #mtop > .clear { display: none !important; }
  #mtop a#n1 img, #mtop a#n2 img, #mtop a#n3 img, #mtop a#n4 img {
    width: 70px !important;
    height: 70px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  #mtop a#n1 img { background-image: url(img/vip/villageMap.jpg) !important; }
  #mtop a#n2 img { background-image: url(img/vip/villageCenter.jpg) !important; }
  #mtop a#n3 img { background-image: url(img/vip/kap.jpg) !important; }
  #mtop a#n4 img { background-image: url(img/vip/stats.jpg) !important; }
  /* أيقونة day/night المعقّدة: إخفاء على الجوال (غير ضرورية) */
  div#wrapper #container, div.dayNightIcon { display: none !important; }

  /* ===== إصلاح طفح الفوتر و side_info ===== */
  /* الفوتر: عناصر بعرض ثابت ~905px تمدّ الصفحة */
  div#mfoot, div#footer ul.menu, div.footer-menu, div.copyright,
  div#footer, div#mfoot * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  div.copyright {
    font-size: 10px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  div.footer-menu, div#footer ul.menu {
    text-align: center !important;
  }
  /* side_info: عرض ثابت 679px */
  div#side_info {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  div#side_info table, div#side_info td {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* ضمان أخير: منع أي طفح أفقي على مستوى body */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* ===== إعادة ترتيب العناصر بـ Flexbox ===== */
  div.wrapper {
    display: flex;
    flex-direction: column;
  }
  #msfilter        { display: none; }
  #UBar            { order: -1 !important; }
  #dynamic_header  { order: 1 !important; }
  #header          { order: 2 !important; }
    #res             { order: 3 !important; }
  #content         { order: 4 !important; }
  #mid             { order: 4 !important; }
  .footer-stopper, .clear { order: 5; }
  #footer          { order: 5 !important; }
  #stime           { order: 6 !important; }
  #ce              { order: 7 !important; }

  /* ===== UBar ===== */
  #UBar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 0 6px !important;
    gap: 12px !important;
    background-image: linear-gradient(to top, #fdfdfde6, #e5e5e5, #fdfdfde6) !important;
    border-bottom: 1px solid silver !important;
    z-index: 10000 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
    direction: rtl !important;
  }
  #UBar::-webkit-scrollbar { display: none !important; }
  #UBar a {
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }
  #UBar a#villagesToggle {
    position: relative !important;
  }
  #UBar a#villagesToggle::after {
    content: attr(off) !important;
    position: absolute !important;
    top: -7px !important;
    left: -3px !important;
    font-size: 11px !important;
    color: red !important;
    font-weight: bold !important;
  }

  #UBar a#goldLink {
    position: relative !important;
    top: 0 !important;
    padding: 3px 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #5a3d00 !important;
    border-radius: 6px !important;
    background-image: linear-gradient(to bottom, #ffd97a, #f0a500) !important;
  }
  #UBar a#goldLink .Gold1 {
    display: flex !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
    font-weight: 700 !important;
  }
  #UBar a#goldLink .Gold2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff !important;
    border-radius: 9999px !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 4px !important;
    box-shadow: 0 2px 4px rgba(255,255,255,255.15) !important;
  }
  #UBar a#goldLink .Gold2 img {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
  }
  #UBar a#goldLink .goldNum {
    color: #5a3d00 !important;
    text-shadow: none !important;
  }

  #UBar a#logoutLink {
    margin-left: 8px !important;
    padding-left: 4px !important;
  }

  /* ===== قائمة القرى المنزلقة ===== */
  #villagesPanel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: fit-content !important;
    min-width: 45% !important;
    max-width: 65% !important;
    height: 100% !important;
    max-height: 100% !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    background: linear-gradient(270deg, #ffffff, rgba(255,255,255,0.55)) !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-shadow: 2px 0 15px rgba(0,0,0,0.3) !important;
  }
  #villagesBackdrop {
    display: none;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9998 !important;
  }
  #villagesBackdrop.vpOpen {
    display: block !important;
  }
    #villagesPanel.vpOpen {
    transform: translateX(0) !important;
  }
  #mid > br {
    display: none !important;
  }
  #villagesPanelInner { padding: 40px 8px 8px !important; }
  #villagesPanelInner h6 { color: #FF8000 !important; font-size: 14px !important; margin: 0 0 10px !important; }
  .vpRow {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 7px 2px !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  }
  .vpRow .vpName { color: #000 !important; font-size: 10px !important; font-weight: bold !important; text-decoration: none !important; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .vpRow .vpName .vpCap { font-weight: 300 !important; font-size: 9px !important; color: gray !important; }
  .vpRow.vpHl .vpName { color: #FF8000 !important; }
  .vpRow .vpCoords { flex: 0 0 60px !important; font-size: 10px !important; color: #555 !important; text-align: center !important; white-space: nowrap !important; }
  .vpRow .vpActions { flex: 0 0 44px !important; display: inline-flex !important; gap: 4px !important; align-items: center !important; justify-content: flex-end !important; }
  .vpRow .vpActions img { vertical-align: middle !important; }

  /* حشو لمنع الـ UBar من تغطية المحتوى */
  .wrapper { padding-top: 36px !important; }

  /* إخفاء القوائم الجانبية القديمة على الجوال */
  div#side_navi, div#side_info { display: none !important; }

  /* إخفاء نص Plus من شريط الأيقونات */
  #mtop .plus_text, #mtop a#plus .plus_text { display: none !important; }

  /* ===== dorf2: خريطة المباني ===== */
    div.village2 div#village_map {
    transform: scale(0.80) !important;
    transform-origin: top right !important;
    margin: 0 auto !important;
    margin-top: 30px !important;
    margin-bottom: -100px !important;
  }

  /* ===== تصميم صورة المبنى بجانب النص  /* ===== تصميم صفحة المبنى (مخزن/مخزن حبوب) ===== */
      div#build {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    padding: 0 !important;
  }
  div#build .build_logo {
    position: absolute !important;
    top: 15px !important;
    left: 13px !important;
    float: none !important;
    margin: 0 !important;
    width: 75px !important;
    height: 100px !important;
    z-index: 1;
  }
  div#build .build_logo img.building {
    width: 75px !important;
    height: 100px !important;
  }
  div#build h1 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    overflow: visible;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: right;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    box-sizing: border-box;
  }
  div#build p.build_desc {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 0 0 70px !important;
    margin: 14px 0 !important;
    overflow: visible;
    font-size: 13px !important;
    line-height: 1.6 !important;
    box-sizing: border-box;
  }
  div#build table#build_value {
    width: 100% !important;
    max-width: 100% !important;
    clear: both;
  }

  /* ===== صفحة السوق (gid17): عرض كامل +  /* ===== صفحة السوق (gid17): تصميم عمودين مطابق tatarw ===== */
  div#build.gid17 .build_logo {
    float: none !important;
    position: static !important;
    display: block !important;
    margin: 0 auto 10px auto !important;
  }
  div#build.gid17 > p {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 8px 0 !important;
    font-size: 13px !important;
  }
    div#build.gid17 #contract form {
    display: flex !important;
    flex-direction: row-reverse !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  div#build.gid17 table.send_res {
    flex: 0 0 58% !important;
  }
  div#build.gid17 table#target_select {
    flex: 0 0 38% !important;
  }
    div#build.gid17 table.send_res {
    
    width: 58% !important;
    table-layout: auto !important;
    font-size: 12px !important;
  }
  div#build.gid17 table.send_res td {
    padding: 3px 2px !important;
    white-space: nowrap !important;
  }
  div#build.gid17 table.send_res td.ico img {
    width: 18px !important;
    height: 18px !important;
  }
  div#build.gid17 table.send_res td.val input.text {
    width: 50px !important;
    font-size: 12px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
  }
  div#build.gid17 table.send_res td.max {
    font-size: 11px !important;
    color: #64cf18 !important;
  }
    div#build.gid17 table#target_select {
    
    width: 40% !important;
    table-layout: auto !important;
    font-size: 10px !important;
  }
  div#build.gid17 table#target_select td {
    padding: 2px 1px !important;
    text-align: right !important;
  }
  div#build.gid17 table#target_select td.mer {
    white-space: nowrap !important;
    font-size: 10px !important;
  }
  div#build.gid17 table#target_select td.vil *,
  div#build.gid17 table#target_select td.coo * {
    float: none !important;
  }
  div#build.gid17 table#target_select td.vil span {
    font-size: 10px !important;
  }
  div#build.gid17 table#target_select td.vil input.text {
    width: 100% !important;
    max-width: 100px !important;
    box-sizing: border-box !important;
    margin: 2px 0 !important;
  }
  div#build.gid17 table#target_select td.or {
    text-align: center !important;
    font-size: 10px !important;
  }
  div#build.gid17 table#target_select td.coo {
    white-space: nowrap !important;
  }
  div#build.gid17 table#target_select td.coo span {
    font-size: 10px !important;
  }
  div#build.gid17 table#target_select td.coo input.text {
    width: 30px !important;
    margin: 0 1px !important;
    box-sizing: border-box !important;
    padding: 1px !important;
  }

  div#build.gid17 .clear {
    clear: both !important;
  }
  div#build.gid17 #btn_ok {
    display: block !important;
    margin: 10px auto 0 !important;
  }

	  div#content.map {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 43px 8px 0 !important;
    overflow-x: hidden !important;
  }
  

    div#content.map img#detailed_map {
    width: 65% !important;
    height: auto !important;
    aspect-ratio: 300 / 264 !important;
    margin-bottom: 10px !important;
  }

              div#content.map #map_details {
    width: auto !important;
    float: left !important;
    margin: 0 5px 0 0 !important;
    position: static !important;
  }
  div#content.map table#village_info,
  div#content.map table#troop_info,
  div#content.map table#distribution {
    width: auto !important;
  }
  div#content.map table#village_info tbody th,
  div#content.map table#village_info tbody td {
    padding: 1px 3px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

            #map_details {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #prod_troops_wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #prod_troops_wrap table#production {
    order: 1 !important;
  }
  #prod_troops_wrap table#troops {
    order: 2 !important;
  }



  #prod_troops_wrap table#production {
    width: auto !important;
    text-align: right !important;
  }
  #prod_troops_wrap table#troops {
    width: auto !important;
    text-align: right !important;
  }
    table#production td.ico,
  table#production td.num {
    text-align: right !important;
    padding: 3px 8px !important;
  }

  /* شبكة Top10: تبقى صفّين × عمودين (2×2) حتى على الجوال، بجداول أضيق
     بدل التراص الكامل لعمود واحد — تصحيح 2026-07-04 */
  div.statistics div.top10-row {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
  }
  div.statistics div.top10-row table.top10 {
    table-layout: fixed !important;
  }
  div.statistics div.top10-row table.top10 th,
  div.statistics div.top10-row table.top10 td {
    padding: 1px 2px !important;
  }
  div.statistics div.top10-row table.top10 td.pla {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  div.statistics div.top10-row table.top10 td.pla a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
  }

  /* ===== تصميم السوق على الجوال - gid17 ===== */
  div.gid17 { padding-left: 0 !important; padding-right: 0 !important; }
  div#build.gid17 { padding: 0 !important; }
  div#build.gid17 table.res_target { width: 40% !important; margin-right: 5px !important; }
  div#build.gid17 table#target_select td.coo input.text { margin: 0 2px !important; }
  div#build.gid17 div#textmenu { width: 100% !important; }

  /* ===== شريط التنقل العائم (دوائر مطابقة tatarw/utatar) ===== */
  #bottomNav {
    display: flex !important;
    position: fixed !important;
    bottom: 10px !important;
    left: 0 !important; right: 0 !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 5px !important;
    z-index: 5000 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
  }
  #bottomNav a {
    display: block !important;
    text-decoration: none !important;
  }
  #bottomNav .bnLabel { display: none !important; }
  #bottomNav img {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid black !important;
    background: beige !important;
    border-radius: 90px !important;
    box-sizing: border-box !important;
    padding: 6px !important;
  }

}


/* إخفاء عناصر الجوال على سطح المكتب فقط */
@media screen and (min-width: 769px) {
  #UBar { display: none !important; }
  #villagesPanel { display: none !important; }
  #bottomNav { display: none !important; }

  /* عكس ترتيب شريط الموارد لسطح المكتب: خشب|طين|حديد|قمح من اليمين لليسار */
  div#res table:nth-of-type(1) { direction: rtl !important; }

  /* إخفاء خانة استهلاك القمح (r5) والخانة المجاورة (pop/crop) على سطح المكتب فقط */
  div#res table:nth-of-type(1) td:has(img.r5),
  div#res table:nth-of-type(1) td:has(img.r5) + td { display: none !important; }

  /* إخفاء جدول الذهب بالكامل على سطح المكتب فقط */
  div#res table:nth-of-type(2) { display: none !important; }
}


/* ===== Top10: حجم خط 13.5px مطابق للمصدر الأصلي — 2026-07-05 (نسخة نهائية) ===== */
@media screen and (max-width: 768px) {
  div.statistics table.top10 td.pla,
  div.statistics table.top10 td.pla a,
  div.statistics table.top10 td.val {
    font-size: 13.5px !important;
  }
}

/* ===== توزيع نقاط البطل (37_hero.tpl) على الجوال — 2026-07-06 ===== */
@media screen and (max-width: 768px) {
  #distribution .heroBarWrapper {
    min-width: 70px !important;
    height: 18px !important;
    line-height: 18px !important;
  }
  #distribution .heroBarVal {
    font-size: 10px !important;
  }
  #distribution .heroArrowBtn {
    width: 22px !important;
    height: 18px !important;
  }
  #distribution .heroArrowIcon {
    width: 12px !important;
    height: 12px !important;
  }
  #heroConfirmBtn {
    width: 100%;
    padding: 10px !important;
    font-size: 14px !important;
  }
  #heroCancelLink {
    display: inline-block;
    margin-top: 8px !important;
  }
}

/* ===== جدول ترتيب الأبطال (heroes.tpl) — 8 أعمدة، تصغير على الجوال — 2026-07-06 ===== */
@media screen and (max-width: 768px) {
  div.statistics table#heroes {
    table-layout: fixed !important;
  }
  div.statistics table#heroes th,
  div.statistics table#heroes td {
    /* 2px عمودياً كما طُلب حرفياً؛ الجانبي خُفِّض لـ1px عمداً (بدل 2px
       الكاملة) كإجراء وقائي استباقي — 15px بدل 10px عبر 8 أعمدة بعرض
       390px يترك هامشاً ضيقاً جداً، وهذا أحد الحلين المقترَحين صراحة
       بالمهمة عند خطر كسر التخطيط (تصغير الحشو الجانبي)، طُبِّق مسبقاً
       بدل الانتظار لكسر فعلي يتعذّر رصده بلا متصفح حقيقي بهذه البيئة */
    padding: 2px 1px !important;
    font-size: 15px !important;
  }
  div.statistics table#heroes td.ra {
    width: 20px !important;
    white-space: nowrap;
  }
  div.statistics table#heroes td.hero {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  div.statistics table#heroes td.hero a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
  }
  #xpTooltipBox {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}