@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-Medium.woff") format("woff"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
#mvsel { display: none; }
#mbar, #mprot { display: none; }
/* عناصر يضيفها mobile.js وقت التحميل: تُخفى على الكمبيوتر (821px فأكثر) */
@media (min-width: 821px) { #mvil-pop, #mvil-ov, .mn-ic, #mbar, #mprot, #mvsel, #mvil, #m-menu-btn, #m-drawer-head, #m-drawer-overlay { display: none !important; } }
/* ===== تعديلات عامة (الكمبيوتر والجوال) ===== */
/* قائمة "خريطة القرى" أُزيلت: عدد القرى صار في الشريط العلوي ويفتح صفحة القرى (village4.php) */
#side_info #vlist { display: none !important; }
#vcount { position: absolute; left: 145px; top: 20px; display: inline-flex; align-items: center; gap: 4px; height: 30px; margin: 0; padding: 0 12px;
          border-radius: 15px; background: #fff; border: 1px solid #c9c9c9; color: #333 !important; font: bold 13px tahoma, sans-serif; text-decoration: none; }
#vcount b { color: #71a400; }
/* قائمة البناء: خط أصغر ومحاذاة متناسقة */
@media (max-width: 820px) {
  #building_contract { width: 100% !important; max-width: 100%; table-layout: auto; font-size: 12px; border-collapse: collapse; margin-top: 8px; }
  #building_contract th { font-size: 13px; padding: 4px 6px !important; text-align: right; }
  #building_contract td { font-size: 12px; padding: 3px 6px !important; vertical-align: middle; white-space: nowrap; }
  #building_contract td.ico { width: 18px; }
  #building_contract td.ico img { width: 12px; height: 12px; }
  #building_contract td:last-child { text-align: left; color: #666; }
  #building_contract img.clock { vertical-align: middle; }
}

/*
 * mobile.css - واجهة مناسبة للجوال (تُحمَّل بعد ملفات التصميم الأصلية)
 * لا تغيّر شيئاً على الكمبيوتر: كل القواعد داخل @media للشاشات الصغيرة فقط.
 */
@media (max-width: 820px) {
  /* ===== تصغير وتنسيق عام للجوال (بدون تغيير صور اللعب) ===== */
  #mid, #content, #side_info, #side_navi, .wrapper { background-image: none !important; border: 0 !important; box-shadow: none !important; }
  #dynamic_header { height: 50px !important; }
  #mtop { zoom: .78; }
  #resWrap td.res { font-size: 13px !important; padding: 2px 2px !important; }
  #resWrap td:has(> img) img { width: 14px; height: 14px; }
  #ltimeWrap { font-size: 11px !important; line-height: 1.4; padding: 2px 6px 6px !important; }
  #ltimeWrap br { display: none; }
  #ltime, #ltimeWrap, #ltimeWrap * { height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
  #ltimeWrap > * { display: inline !important; }
  #content { font-size: 13px; }
  #content h1 { font-size: 18px !important; margin: 4px 0 6px !important; }
  #content .level { font-size: 13px; }
  #content table { font-size: 12px; }
  #content th, #content td { padding: 3px 4px !important; }
  #content #production td, #content #troops td { padding: 2px 4px !important; }
  #content a.build_logo { position: static !important; float: left; margin: 0 0 4px 8px; }
  #content a.build_logo img.building { position: static !important; }
  #content table td input.text, #content table td input[type=text] { max-width: 100%; min-height: 44px; font-size: 16px !important; padding: 6px 8px; }
  #content > *:first-child { margin-top: 0 !important; }
  #ltime { margin-bottom: 0 !important; }
  #content .build_desc { min-height: 0 !important; }
  #content p { margin: 6px 0; }
  /* ===== شريط الجوال العلوي ===== */

  #mbar { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 60; height: 56px; padding: 0 10px;
          background: #f7f7f5; border-bottom: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0,0,0,.08); direction: rtl; }
  #mbar-burger { flex: none; width: 40px; height: 40px; border: 0; background: none; padding: 9px; cursor: pointer; }
  #mbar-burger span, #mbar-burger span::before, #mbar-burger span::after { display: block; position: relative; width: 22px; height: 2px; background: #444; content: ""; border-radius: 2px; }
  #mbar-burger span::before { position: absolute; top: -7px; } #mbar-burger span::after { position: absolute; top: 7px; }
  #mbar-nav { flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  #mbar-nav::-webkit-scrollbar { display: none; }
  #mbar-nav a { position: relative; flex: none; padding: 8px 7px; color: #333 !important; font: 600 15px tahoma, sans-serif; text-decoration: none; white-space: nowrap; }
  #mbar-nav sup { position: absolute; top: 0; left: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #d80000; color: #fff; font: bold 10px/16px tahoma; text-align: center; }
  #mbar-nav sup.n { background: none; color: #555; font-size: 11px; }
  #mbar-gold { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 16px; background: #f5b82e; color: #fff !important; font: bold 14px tahoma; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
  #mbar-gold img { width: 16px; height: auto; }
  #mbar-out { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #444 !important; font-size: 22px; text-decoration: none; }
  #dynamic_header { position: relative !important; }
  #mprot { display: inline-flex; align-items: center; gap: 6px; position: absolute; top: 9px; left: 8px; z-index: 3; height: 30px; padding: 0 10px; border-radius: 9px;
           background: #4aa3df; color: #fff; font: bold 13px tahoma; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
  #mprot .dove { font-size: 16px; }
  /* بما أن الشريط فيه كل الروابط: نخفي زر القائمة القديم والبلاس وزر القرى والحماية المكررة */
  #m-menu-btn, #mtop > a#plus, #vcount { display: none !important; }
  /* الموارد: الأربعة في صف واحد بدون سعة المخازن واستهلاك القمح */
  #resWrap td:has(> img.warehouse), #resWrap #warehouse, #resWrap td:has(> img.granary), #resWrap #granary,
  #resWrap td:has(> img.r5), #resWrap td:has(> img.r5) + td { display: none !important; }
  #resWrap tr.res { flex-wrap: nowrap !important; gap: 4px; padding: 6px 4px; }
  #resWrap td.res { min-width: 0 !important; flex: 1 1 0; font-size: 14px !important; }
  #resWrap td:has(> img) { padding: 0 !important; width: auto !important; }
  #vcount { float: none !important; margin: 0 !important; height: 34px; }
  #building_contract { font-size: 12px !important; margin: 8px 0 0 !important; left: auto !important; right: auto !important; }
  #building_contract td { white-space: normal; width: auto !important; }
  #building_contract td:last-child { white-space: nowrap; font-size: 11px !important; }
  #building_contract.wide-scroll { display: table !important; }
  html { overflow-x: hidden; height: auto !important; }
  body { height: auto !important; overflow: visible !important; }
  html, body { width: 100% !important; min-width: 0 !important; -webkit-text-size-adjust: 100%; }
  body { font-size: 14px; }
  .wrapper { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  #dynamic_header, #header, #mtop, #mid, #side_navi, #content, #side_info, #footer, #mfoot, #cfoot, #res, #resWrap, #ltime, #ltimeWrap, .footer-menu, .copyright {
    min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  #dynamic_header, #header, #mid, #footer, #res, #ltime { width: 100% !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* ===== الترويسة وأيقونات التنقل ===== */
  #dynamic_header { height: 52px !important; background-size: cover !important; background-position: center !important; }
  #header { height: auto !important; min-height: 0 !important; background-size: cover; }
  #mtop { position: relative !important; left: auto !important; right: auto !important; top: auto !important;
          width: 100% !important; height: auto !important; margin: 0 auto !important; padding: 2px 0 !important;
          display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; }
  #mtop > a, #mtop > div { float: none !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; margin: 0 !important; }
  #mtop .clear { display: none; }
  #plus { order: 9; }
  #header { padding-bottom: 2px !important; }
  #mtop > a#plus { height: 34px !important; }

  /* ===== شريط الموارد والوقت ===== */
  #res { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; }
  #resWrap { position: relative !important; left: auto !important; right: auto !important; width: 100% !important; margin: 0 !important; height: auto !important; }
  #resWrap table { width: 100% !important; }
  #resWrap tr.res { display: flex !important; flex-wrap: wrap; justify-content: center; }
  #resWrap td.res { width: auto !important; min-width: 30%; padding: 3px 2px !important; white-space: nowrap; font-size: 13px; text-align: center; }
  #ltime { position: relative !important; top: auto !important; width: 100% !important; height: auto !important; }
  #ltimeWrap { width: 100% !important; margin: 0 !important; padding: 2px 6px !important; height: auto !important; box-sizing: border-box; text-align: center; font-size: 12px; }

  /* ===== الأعمدة: القائمة ثم المحتوى ثم القرى ===== */
  #mid { width: 100% !important; display: flex !important; flex-direction: column; min-height: 0 !important; padding: 0 !important; background-size: 100% auto; }
  #side_navi { order: 1; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important;
               padding: 4px 6px !important; box-sizing: border-box; text-align: center; }
  #side_navi #logo, #side_navi .time_of_day { display: none !important; }
  #side_navi p { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 !important; padding: 0 !important; }
  #side_navi p a, #side_navi > a { display: inline-block !important; padding: 8px 12px !important; margin: 0 !important;
               background: #f3f0e2; border: 1px solid #d8d2b8; border-radius: 18px; line-height: 1.2; font-size: 14px; }
  #side_navi br { display: none; }
  #side_navi img[src$="admin.jpg"] { max-width: 160px; height: auto; }

  #content { order: 2; float: none !important; width: 100% !important; min-height: 0 !important; height: auto !important;
             padding: 6px 8px 12px !important; margin: 0 !important; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch;
             background-size: 100% auto !important; }
  #content > div.top { display: none; }
  #content h1 { font-size: 20px !important; }

  #side_info { order: 3; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important;
               padding: 6px 8px !important; box-sizing: border-box; }
  #side_info #qge { float: none !important; text-align: center; height: auto !important; }
  #side_info #qgei { width: 90px; height: auto; }
  #vlist { width: 100% !important; font-size: 15px; }
  #vlist td { padding: 7px 4px !important; }
  #vlist td.link div { width: auto !important; max-width: none !important; overflow: visible !important; }
  #vlist td.link a { display: block; padding: 4px 0; }

  /* ===== الخرائط (القرية، الحقول، الخريطة) تتصغّر تلقائياً عبر mobile.js ===== */
  #village_map, #map { margin-left: auto !important; margin-right: auto !important; float: none !important; }
  #content.village1 #village_map { float: none !important; margin: 0 auto 8px !important; }
  #content.village1 #map_details { float: none !important; width: 100% !important; }
  #content.village1 #map_details table { width: 100% !important; }

  /* لا شيء داخل المحتوى أعرض من الشاشة (ما عدا الخرائط اللي تتصغّر بالكامل) */
  #content div:not(#village_map):not(#map):not(#map_content), #content p, #content form, #content img:not(.building):not(.iso) { max-width: 100% !important; }
  #content div:not([id^="i_"]):not(#village_map):not(#map):not(#map_content) { box-sizing: border-box; }
  #content #village_map div, #content #map div { max-width: none !important; }
  #content .build_desc, #content #build, #content .gid { width: auto !important; }
  #content img.building.big, #content #build img.building { float: none !important; display: block; margin: 0 auto 6px !important; }

  /* القائمة الجانبية تنطوي بزر على الجوال (mobile.js) */
  #m-menu-btn { display: inline-block; padding: 9px 18px; margin: 2px auto 4px; background: #71a400; color: #fff; border: 0; border-radius: 20px; font: bold 15px tahoma, sans-serif; cursor: pointer; }

  /* ===== الجداول والنماذج ===== */
  #content table { max-width: 100%; }
  #content table.wide-scroll { display: block; overflow-x: auto; }
  input[type=text], input[type=password], input[type=email], input[type=number], input.text, select, textarea {
    font-size: 16px !important; /* يمنع التكبير التلقائي في الآيفون */
    min-height: 34px; box-sizing: border-box; max-width: 100%;
  }
  textarea { width: 100% !important; }
  input[type=submit], input[type=button], button { min-height: 40px; padding: 6px 14px; font-size: 15px; }
  input[type=image].dynamic_img { transform: scale(1.15); transform-origin: center; margin: 6px; }
  #content a { touch-action: manipulation; }

  /* ===== النوافذ المنبثقة والتذييل ===== */
  #_pwin, .popup3 { position: fixed !important; left: 2.5vw !important; right: 2.5vw !important; top: 60px !important;
                    width: 95vw !important; max-height: 80vh; overflow: auto; z-index: 9999; }
  #_pwin, .popup3 { margin: 0 !important; box-sizing: border-box !important; }
  #_pwin #drag, #_pwin #qstd, #_pwin .popup4 { width: auto !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
  #_pwin #qstd { padding: 8px !important; }
  #_pwin * { max-width: 100%; }
  #_pwin #qstbg { display: none; }
  #anm { display: none !important; }
  #footer { position: relative !important; top: auto !important; width: 100% !important; height: auto !important; }
  #mfoot, .footer-menu, .copyright { width: 100% !important; height: auto !important; }
  #footer ul.menu { position: static !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px !important; }
  #footer img { max-width: 60%; height: auto; }

  /* ===== الصفحة الرئيسية (index.php) ===== */
  #navigation { position: relative !important; left: 0 !important; top: auto !important; width: 100% !important; height: auto !important; margin-top: 52px; text-align: center; }
  #navigation a.home { position: relative !important; left: auto !important; top: auto !important; display: block; margin: 0 auto !important; max-width: 100%; }
  #navigation table.menu { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; }
  #navigation table.menu td { display: inline-block; padding: 6px 8px !important; }
  #register_now { position: relative !important; left: auto !important; top: auto !important; margin: 8px auto !important; }
  .grit, .infobox, .secondarybox, #what_is_travian, #about_the_game, #screenshots, #newsbox, #player_counter { width: 100% !important; max-width: 100% !important; float: none !important; left: auto !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
  #screenshots_preview { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; overflow-x: auto; }
  /* ===== خطوط أوضح ===== */
  body, #content, #side_navi, #mbar, #resWrap, #ltimeWrap { font-family: "Plex Arabic", Tahoma, sans-serif !important; }

  /* ===== الشريط العلوي (نسخة أفخم) ===== */
  #mbar { height: 52px !important; background: linear-gradient(#ffffff, #f1f1ee) !important; }
  #mbar-nav a { font: 600 16px "Plex Arabic", Tahoma, sans-serif !important; padding: 8px 8px !important; color: #2b2b2b !important; }
  #mbar-nav sup.n { top: -2px; left: -4px; color: #8a1c1c; font: 700 11px "Plex Arabic", Tahoma; }
  #mbar-gold { height: 32px !important; padding: 0 4px 0 12px !important; gap: 6px !important; border-radius: 16px !important;
               background: linear-gradient(180deg, #ffc94d, #f29a0e) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(150,80,0,.35);
               font: 700 15px "Plex Arabic", Tahoma !important; direction: ltr; text-shadow: 0 1px 1px rgba(120,60,0,.45) !important; }
  #mbar-gold img { width: 18px !important; padding: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); order: 2; }

  /* ===== الترويسة: الحماية يسار وقائمة القرى يمين ===== */
  #dynamic_header { height: 74px !important; background-size: cover !important; background-position: center 30% !important; }
  #mprot { top: 30px !important; left: 6px !important; height: 30px !important; font: 700 15px "Plex Arabic", Tahoma !important; border-radius: 0 8px 8px 0 !important;
           background: linear-gradient(180deg, #5cc0f0, #2f8fd0) !important; direction: ltr; }
  #mvsel { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 8px; right: 8px; z-index: 3; height: 36px; padding: 0 10px;
           border-radius: 9px; background: rgba(225,225,225,.92); box-shadow: 0 1px 3px rgba(0,0,0,.25); font: 700 16px "Plex Arabic", Tahoma; color: #8a1c1c; }
  #mvsel::after { content: ""; width: 9px; height: 9px; border: solid #333; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-3px); margin-right: 4px; }
  #mvsel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; }
  #mtop { zoom: .82 !important; }

  /* ===== الموارد: مربع لكل مورد يتعبّى بالأخضر حسب امتلاء المخزن ===== */
  #resWrap tr.res { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 5px !important; padding: 6px 5px !important; }
  #resWrap tr.res > td { grid-row: 1; }
  #resWrap td:has(> img.r1), #resWrap #l4 { grid-column: 1; }
  #resWrap td:has(> img.r2), #resWrap #l3 { grid-column: 2; }
  #resWrap td:has(> img.r3), #resWrap #l2 { grid-column: 3; }
  #resWrap td:has(> img.r4), #resWrap #l1 { grid-column: 4; }
  #resWrap td:has(> img.r1), #resWrap td:has(> img.r2), #resWrap td:has(> img.r3), #resWrap td:has(> img.r4) {
    justify-self: start; align-self: center; z-index: 2; pointer-events: none; padding: 0 5px 0 0 !important; line-height: 0; }
  #resWrap td:has(> img) img { width: 16px !important; height: 16px !important; }
  #resWrap #l1, #resWrap #l2, #resWrap #l3, #resWrap #l4 {
    display: flex !important; align-items: center; justify-content: center; height: 28px; padding: 0 20px 0 3px !important; box-sizing: border-box;
    border: 1.5px solid #4f9d2d; border-radius: 7px; color: #1d3410 !important; font: 600 13px "Plex Arabic", Tahoma !important;
    font-variant-numeric: tabular-nums; direction: ltr; white-space: nowrap; overflow: hidden; letter-spacing: -.2px;
    background: linear-gradient(to left, #a6e07f var(--p), #ffffff var(--p)) !important; transition: --p 1s linear; }

  /* ===== الحقول + الإنتاج والوحدات بجانبها ===== */
  #content.village1 #village_map { float: right !important; margin: 0 0 8px !important; }
  #content.village1 #map_details { float: left !important; width: 37% !important; margin: 26px 0 0 !important; }
  #content.village1 #map_details table { width: 100% !important; border: 0 !important; background: none !important; margin: 0 0 12px !important; }
  #content.village1 #production thead th, #content.village1 #troops thead th { background: none !important; border: 0 !important; font: 700 15px "Plex Arabic", Tahoma !important; padding: 0 0 4px !important; color: #222; }
  #content.village1 #production thead th { font-size: 0 !important; }
  #content.village1 #production thead th::before { content: "الإنتاج كل ساعة:"; font: 700 15px "Plex Arabic", Tahoma; }
  #content.village1 #production td.res, #content.village1 #production td.per { display: none !important; }
  #content.village1 #production td, #content.village1 #troops td { border: 0 !important; background: none !important; padding: 2px 0 !important; }
  #content.village1 #production td.ico, #content.village1 #troops td.ico { width: 22px; text-align: right; }
  #content.village1 #production td.num { font: 600 14px "Plex Arabic", Tahoma !important; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; white-space: nowrap; }
  #content.village1 #troops td { font: 600 14px "Plex Arabic", Tahoma !important; white-space: nowrap; }
  #content.village1 #troops td.un { display: none; }
  #content.village1 #building_contract, #content.village1 > table#movements { clear: both; }


  /* ===== عداد الموارد (تصميم محسّن): أيقونة داخل دائرة + رقم عريض + تعبئة خضراء تتحرك مع الرقم ===== */
  #resWrap tr.res { gap: 6px !important; padding: 8px 6px !important; }
  #resWrap #l1, #resWrap #l2, #resWrap #l3, #resWrap #l4 {
    height: 34px !important; border: 2px solid #3e7c27 !important; border-radius: 10px !important; padding: 0 25px 0 3px !important;
    font: 700 14px "Plex Arabic", Tahoma !important; color: #111 !important; letter-spacing: 0;
    background: linear-gradient(to left, #8fd66f var(--p), #ffffff var(--p)) !important; transition: none !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
  #resWrap td:has(> img.r1), #resWrap td:has(> img.r2), #resWrap td:has(> img.r3), #resWrap td:has(> img.r4) { padding: 0 4px 0 0 !important; }
  #resWrap #l1, #resWrap #l2, #resWrap #l3, #resWrap #l4 { padding: 0 23px 0 1px !important; }
  #resWrap #l1[data-len="l"], #resWrap #l2[data-len="l"], #resWrap #l3[data-len="l"], #resWrap #l4[data-len="l"] { font-size: 11.5px !important; letter-spacing: -.4px !important; }
  #resWrap #l1[data-len="xl"], #resWrap #l2[data-len="xl"], #resWrap #l3[data-len="xl"], #resWrap #l4[data-len="xl"] { font-size: 10px !important; letter-spacing: -.5px !important; }
  #resWrap #l1[data-len="xxl"], #resWrap #l2[data-len="xxl"], #resWrap #l3[data-len="xxl"], #resWrap #l4[data-len="xxl"] { font-size: 8.5px !important; letter-spacing: -.5px !important; }
  #resWrap td:has(> img.r1), #resWrap td:has(> img.r2), #resWrap td:has(> img.r3), #resWrap td:has(> img.r4) { padding: 0 4px 0 0 !important; background: none !important; border: 0 !important; }
  #resWrap td:has(> img) img { width: 20px !important; height: 20px !important; border-radius: 50%; box-sizing: border-box; padding: 3px;
    background-color: #d8f2c8 !important; background-clip: padding-box; box-shadow: 0 0 0 1px rgba(62,124,39,.3); }

  /* ===== شريط الأيقونات: خلفية بيضاء بظل خفيف والأيقونات أكبر ===== */
  #header { background: linear-gradient(#ffffff 0, #ffffff 70%, #f1f1f1 100%) !important; box-shadow: 0 3px 6px -3px rgba(0,0,0,.25); padding: 2px 0 4px !important; }
  #mtop { zoom: .92 !important; justify-content: center !important; gap: 0 !important; }


  /* ===== v9: مطابقة الترتيب والمقاسات من الفيديو ===== */
  /* الشريط العلوي أنحف */
  #mbar { height: 36px !important; padding: 0 4px 0 8px !important; gap: 4px !important; }
  #mbar-burger { width: 30px !important; height: 30px !important; padding: 6px !important; background: #e4e4e4 !important; border-radius: 4px; }
  #mbar-burger span, #mbar-burger span::before, #mbar-burger span::after { width: 18px !important; height: 2.5px !important; background: #222 !important; }
  #mbar-burger span::before { top: -6px !important; } #mbar-burger span::after { top: 6px !important; }
  #mbar-nav a { font: 500 15px "Plex Arabic", Tahoma, sans-serif !important; padding: 6px 6px !important; color: #222 !important; }
  #mbar-gold { height: 24px !important; padding: 0 3px 0 8px !important; gap: 5px !important; border-radius: 7px !important;
               background: linear-gradient(180deg, #f9b233, #ee9a12) !important; font: 700 14px "Plex Arabic", Tahoma !important; text-shadow: none !important; }
  #mbar-gold img { width: 15px !important; padding: 2px !important; }
  #mbar-out { width: 30px !important; height: 30px !important; font-size: 21px !important; }

  /* الترويسة: الحماية تحت يسار (الوقت ثم الحمامة) وقائمة القرى فوق يمين */
  #dynamic_header { height: 84px !important; }
  #mprot { top: auto !important; bottom: 6px !important; left: 4px !important; height: 32px !important; padding: 0 8px !important; gap: 5px !important;
           flex-direction: row-reverse; border-radius: 10px !important; background: linear-gradient(180deg, #28c6ea, #0fa6d0) !important;
           font: 600 15px "Plex Arabic", Tahoma !important; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  #mvsel { top: 7px !important; right: 6px !important; height: 33px !important; padding: 0 6px !important; border-radius: 9px !important;
           flex-direction: row-reverse; background: rgba(200,204,208,.95) !important; font: 700 15px "Plex Arabic", Tahoma !important; }
  #mvsel::after { margin: 0 2px 0 0 !important; }

  /* شريط الوقت مخفي على الجوال (وقت الحماية ظاهر في الترويسة) */
  #ltime { display: none !important; }

  /* عدادات الموارد: مستطيل أبيض بإطار أخضر رفيع، الرقم بالوسط والأيقونة يمين، والتعبئة الخضراء تتحرك من اليمين */
  #resWrap tr.res { gap: 2px !important; padding: 6px 1px 4px !important; }
  #resWrap #l1, #resWrap #l2, #resWrap #l3, #resWrap #l4 {
    height: 21px !important; padding: 0 20px 0 1px !important; border: 1px solid #0b730b !important; border-radius: 7px !important;
    font: 500 14px "Plex Arabic", Tahoma !important; color: #111 !important; letter-spacing: 0 !important;
    background: linear-gradient(to left, #4cd47a var(--p), #ffffff var(--p)) !important;
    box-shadow: inset 0 0 0 1.5px #fff !important; }
  #resWrap #l1[data-len="l"], #resWrap #l2[data-len="l"], #resWrap #l3[data-len="l"], #resWrap #l4[data-len="l"] { font-size: 12.5px !important; letter-spacing: -.2px !important; }
  #resWrap #l1[data-len="xl"], #resWrap #l2[data-len="xl"], #resWrap #l3[data-len="xl"], #resWrap #l4[data-len="xl"] { font-size: 11px !important; letter-spacing: -.3px !important; }
  #resWrap #l1[data-len="xxl"], #resWrap #l2[data-len="xxl"], #resWrap #l3[data-len="xxl"], #resWrap #l4[data-len="xxl"] { font-size: 9.5px !important; letter-spacing: -.4px !important; }
  #resWrap td:has(> img.r1), #resWrap td:has(> img.r2), #resWrap td:has(> img.r3), #resWrap td:has(> img.r4) { padding: 0 3px 0 0 !important; }
  #resWrap td:has(> img) img { width: 16px !important; height: 16px !important; padding: 0 !important; background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; }

  /* عنوان القرية و(العاصمة) بنفس السطر */
  #content.village1 h1, #content.village2 h1 { font: 700 22px "Plex Arabic", Tahoma !important; margin: 4px 0 2px !important; }
  #content.village1 h1 > br { display: none; }
  #content.village1 h1 > font { display: inline !important; font-size: 13px !important; font-weight: 400 !important; color: #999 !important; margin-right: 8px; }
  #header { padding: 0 0 3px !important; }
  #content.village1 #map_details { margin-top: 2px !important; }
  #mprot { height: 29px !important; bottom: 8px !important; font-size: 14px !important; }
}
/* شاشات الجوال العريضة (430 مثل Pro Max): الأرقام الطويلة تاخذ خط أكبر لأن المربع أوسع */
@media (min-width: 400px) and (max-width: 820px) {
  #resWrap #l1[data-len="l"], #resWrap #l2[data-len="l"], #resWrap #l3[data-len="l"], #resWrap #l4[data-len="l"] { font-size: 13.5px !important; }
  #resWrap #l1[data-len="xl"], #resWrap #l2[data-len="xl"], #resWrap #l3[data-len="xl"], #resWrap #l4[data-len="xl"] { font-size: 12px !important; }
}

/* ===== مدير المهام والنوافذ المنبثقة: بطاقة صغيرة بالوسط تطلع من الزعيم وترجع له ===== */
@media (max-width: 820px) {
  #ce #_pwin, #ce .popup3 { position: fixed !important; inset: 0 !important; margin: auto !important;
    width: min(92vw, 400px) !important; height: fit-content !important; max-height: 74vh !important; overflow: hidden !important;
    padding: 40px 0 0 !important; box-sizing: border-box !important;
    background: #fffdf7 !important; border: 1px solid #d9cfae; border-radius: 14px !important;
    box-shadow: 0 0 0 100vmax rgba(20,20,10,.38), 0 12px 32px rgba(0,0,0,.35) !important; z-index: 9999 !important;
    font-family: "Plex Arabic", Tahoma, sans-serif; }
  #ce #_pwin.m-pop-in { animation: mpopin .26s cubic-bezier(.2,.9,.3,1.15) both; }
  #ce #_pwin.m-pop-out { animation: mpopout .2s ease-in both; pointer-events: none; }
  @keyframes mpopin { from { opacity: 0; transform: scale(.15); box-shadow: 0 0 0 100vmax rgba(20,20,10,0); } to { opacity: 1; transform: none; } }
  @keyframes mpopout { to { opacity: 0; transform: scale(.15); box-shadow: 0 0 0 100vmax rgba(20,20,10,0); } }
  /* رأس البطاقة */
  #ce #_pwin #drag { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 40px !important;
    background: linear-gradient(180deg, #8bbf3a, #6a9f22) !important; border-radius: 13px 13px 0 0; cursor: default !important;
    display: flex; align-items: center; justify-content: center; }
  #ce #_pwin #drag::after { content: ""; }
  #ce #_pwin.quest #drag::after { content: "المهام"; font: 700 15px "Plex Arabic", Tahoma, sans-serif; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
  #ce #_pwin > a { position: absolute !important; top: 6px; left: 8px; z-index: 5; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
  #ce #_pwin > a::after { content: "\2715"; font: 700 13px Tahoma, sans-serif; color: #4a6a12; }
  #ce #_pwin > a img.popup4 { display: none !important; }
  /* المحتوى: خط أصغر وجدول مضغوط، ويتمرر داخل البطاقة لو طال */
  #ce #_pwin #qstd { width: auto !important; max-height: calc(74vh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 10px 12px !important; box-sizing: border-box; font-size: 12.5px; line-height: 1.5; }
  #ce #_pwin #qstd h1 { font: 700 16px "Plex Arabic", Tahoma !important; margin: 0 0 8px !important; }
  #ce #_pwin #qstd h1 img { vertical-align: middle; }
  #ce #_pwin #qstd table { width: 100% !important; font-size: 11.5px !important; border-collapse: collapse; }
  #ce #_pwin #qstd table td, #ce #_pwin #qstd table th { padding: 3px 2px !important; line-height: 1.35; }
  #ce #_pwin #qstd table img { width: 13px; height: auto; }
  #ce #_pwin #qstd img { max-width: 100%; }
  #ce #_pwin div[class] { background-size: contain; background-repeat: no-repeat; background-position: center; max-width: 100%; }
  #ce #_pwin #qstbg { display: none !important; }
  #ce #_pwin > img { display: block; margin: 24px auto 30px; }
  #ce #_pwin iframe { display: block; width: 100% !important; height: calc(74vh - 40px) !important; border: 0; }

  /* ===== القائمة الجانبية (☰): درج ينزلق من اليمين فوق الصفحة ===== */
  #side_navi { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: min(78vw, 290px) !important; height: auto !important; max-height: none !important; z-index: 1001 !important; order: 0;
    margin: 0 !important; padding: 0 0 20px !important; overflow-y: auto !important; text-align: right !important;
    background: linear-gradient(180deg, #fbf8ee 0, #f3eedc 100%) !important; box-shadow: -8px 0 28px rgba(0,0,0,.3) !important;
    transform: translateX(105%); visibility: hidden; transition: none; }
  /* القائمة مخفية افتراضياً، وما تظهر إلا لما تنفتح بزر ☰ (بدون وميض عند تحميل الصفحة) */
  body.m-drawer-ready #side_navi { transition: transform .25s ease-in, visibility 0s .25s; }
  body.m-drawer-open #side_navi { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  #m-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 14px 0 10px;
    background: linear-gradient(180deg, #8bbf3a, #6a9f22); color: #fff; font: 700 17px "Plex Arabic", Tahoma, sans-serif; position: sticky; top: 0; z-index: 2; }
  #m-drawer-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #4a6a12; font: 700 15px Tahoma; cursor: pointer; }
  #side_navi p { display: block !important; margin: 0 !important; padding: 0 !important; }
  #side_navi p:empty { display: none !important; }
  #side_navi p a, #side_navi > a:not(#logo) { display: flex !important; align-items: center; min-height: 48px; padding: 0 18px !important; margin: 0 !important;
    background: none !important; border: 0 !important; border-bottom: 1px solid rgba(120,100,50,.13) !important; border-radius: 0 !important;
    font: 600 15.5px "Plex Arabic", Tahoma, sans-serif !important; color: #2c2c22; text-decoration: none !important; position: relative; }
  #side_navi p a::after { content: "\2039"; position: absolute; left: 16px; font-size: 22px; color: #b0a57f; font-weight: 400; }
  #side_navi p a:active { background: rgba(139,191,58,.18) !important; }
  #side_navi p a font, #side_navi p a b { font-weight: 700; }
  #side_navi p:last-of-type { padding: 12px 14px !important; font-size: 13px; color: #6b6450; line-height: 1.6; }
  #side_navi div[style*="text-align"] { padding: 10px 14px; }
  #m-drawer-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(20,20,10,.42); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
  body.m-drawer-open #m-drawer-overlay { opacity: 1; visibility: visible; transition: opacity .25s; }
  body.m-drawer-open { overflow: hidden; }

  /* ===== القائمة الجانبية: زجاج شفاف مائل للبياض + أزرار بأيقونات ===== */
  #side_navi { background: rgba(255,255,255,.01) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); width: min(60vw, 224px) !important;
    border-left: 1px solid rgba(255,255,255,.7) !important; box-shadow: -10px 0 30px rgba(30,40,10,.22) !important; }
  #m-drawer-head { height: 42px; padding: 0 10px 0 8px; font-size: 14.5px; background: rgba(255,255,255,.14); color: #4a6a12; border-bottom: 1px solid rgba(106,159,34,.25);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  #m-drawer-close { width: 26px; height: 26px; font-size: 12px; background: rgba(106,159,34,.14); color: #4a6a12; }
  #m-drawer-overlay { background: rgba(20,25,10,.28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  #side_navi p.mn { padding: 4px 8px 0 !important; }
  #side_navi p.mn:first-of-type { padding-top: 10px !important; }
  #side_navi p.mn a.mn-btn { display: flex !important; align-items: center; gap: 8px; min-height: 46px; margin: 0 0 7px !important; padding: 5px 8px !important;
    background: rgba(255,255,255,.62) !important; border: 1px solid rgba(106,159,34,.28) !important; border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(60,70,20,.10), inset 0 1px 0 rgba(255,255,255,.9); color: #2c3a14 !important; transition: transform .12s, background .12s; }
  #side_navi p.mn a.mn-btn:active { transform: scale(.97); background: rgba(139,191,58,.22) !important; }
  #side_navi p.mn a.mn-btn::after { content: "\2039"; position: static; margin-right: auto; font-size: 17px; color: #9aae6a; }
  #side_navi p.mn .mn-ic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 38px; height: 36px; padding: 0 4px;
    border-radius: 10px; background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(106,159,34,.18); }
  #side_navi p.mn .mn-ic svg { display: block; height: 26px; width: auto; }
  #side_navi p.mn .mn-shop .mn-ic { min-width: 62px; }
  #side_navi p.mn .mn-shop .mn-ic svg { height: 22px; }
  #side_navi p.mn .mn-tx { font: 700 12.5px "Plex Arabic", Tahoma, sans-serif; line-height: 1.3; }
}

/* ===== v12: الوحدات بجانب أيقونتها + صفحة الإحصائيات (أفضل 10) شبكة 2×2 ===== */
@media (max-width: 820px) {
  #content.village1 #troops { width: auto !important; }
  #content.village1 #troops td.ico { width: 22px !important; padding-left: 6px !important; }
  #content.village1 #troops td.num { width: auto !important; text-align: right !important; direction: ltr; font: 600 15px "Plex Arabic", Tahoma !important; white-space: nowrap; }

  /* أزرار القوائم (أفضل 10 / دفاع / هجوم) داخل شريط العنوان بدل ما تنزل تحت */
  #content.statistics th:has(> #submenu), #content.statistics th:has(> #submenu2),
  #content.alliance th:has(> #submenu) { position: relative !important; height: 40px; vertical-align: middle; }
  #content.statistics #submenu, #content.alliance #submenu { position: absolute !important; left: 4px !important; top: 50% !important; transform: translateY(-50%); right: auto !important; display: flex; gap: 3px; direction: ltr; }
  #content.statistics #submenu2 { position: absolute !important; right: 4px !important; top: 50% !important; transform: translateY(-50%); left: auto !important; display: flex; gap: 3px; }
  #content.statistics #submenu img, #content.statistics #submenu2 img, #content.alliance #submenu img { float: none !important; margin: 0 !important; display: block; }
  #content.statistics #submenu a, #content.statistics #submenu2 a { display: block; line-height: 0; }

  /* جداول أفضل 10: جدولين في كل صف */
  #content.statistics table.top10 { width: calc(50% - 3px) !important; margin: 6px 0 4px !important; font-size: 12.5px; table-layout: auto; }
  #content.statistics table#top10_offs, #content.statistics table#top10_climbers { float: right !important; clear: right; }
  #content.statistics table#top10_defs, #content.statistics table#top10_raiders { float: left !important; clear: left; }
  #content.statistics table.top10 th, #content.statistics table.top10 td { padding: 3px 2px !important; white-space: nowrap; }
  #content.statistics table.top10 td.pla { max-width: 0; width: 100% !important; overflow: hidden; text-overflow: ellipsis; }
  #content.statistics table.top10 td.val { width: 1% !important; text-align: center; direction: ltr; font-variant-numeric: tabular-nums; }
  #content.statistics table.top10 td.ra { width: 1% !important; }
  #content.statistics table.top10 thead th { font-size: 12.5px; }
  #content.statistics table.top10 thead tr:first-child th { font-size: 14.5px; font-weight: 700; }
  #content.statistics table.top10 td.empty { display: none; }
  #content.statistics table.top10 + br { display: none; }
  #content.statistics:after { content: ""; display: table; clear: both; }
}

/* بطاقة معلومات الحقل (التلميح الأسود) ما تطلع على الجوال - الضغط على الحقل يفتح صفحته مباشرة */
@media (max-width: 820px) {
  p.tooltip, .tooltip { display: none !important; visibility: hidden !important; }
}

/* ===== نافذة "أختر السيرفر" + زر رقم السيرفر + قائمة القرى في الشريط ===== */
#msrv-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(30,30,25,.45); display: flex; align-items: center; justify-content: center; padding: 12px;
  animation: msrvfade .18s ease-out; font-family: "Plex Arabic", Tahoma, sans-serif; direction: rtl; }
#msrv-ov.out { animation: msrvfade .18s ease-in reverse both; }
@keyframes msrvfade { from { opacity: 0; } to { opacity: 1; } }
#msrv { width: min(94vw, 440px); max-height: 84vh; display: flex; flex-direction: column; background: #fff; border: 2px solid #222; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: msrvpop .22s cubic-bezier(.2,.9,.3,1.15); }
@keyframes msrvpop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
#msrv-head { position: relative; padding: 12px 44px; text-align: center; border-bottom: 2px dashed #bbb; }
#msrv-head b { font: 700 19px "Plex Arabic", Tahoma, sans-serif; color: #111; }
#msrv-x { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; color: #aaa; font: 700 24px Tahoma, sans-serif; cursor: pointer; }
#msrv-list { overflow-y: auto; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
#msrv-list a.srv { position: relative; display: flex; align-items: center; justify-content: space-between; height: 74px; padding: 0 8px 0 10px;
  background-size: cover; background-position: center 35%; border-radius: 10px; text-decoration: none !important; overflow: hidden;
  box-shadow: inset 0 0 14px 6px rgba(255,255,255,.9); filter: grayscale(1); opacity: .8; }
#msrv-list a.srv.here { filter: none; opacity: 1; }
#msrv-list a.srv.off { pointer-events: none; opacity: .45; }
#msrv-list a.srv:active { transform: scale(.98); }
#msrv-list .srv-info { order: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 104px; height: 54px; padding: 0 8px;
  background: rgba(255,255,255,.78); border-radius: 4px; color: #222; font-size: 13.5px; line-height: 1.3; text-align: right; }
#msrv-list .srv-info b { font-weight: 600; }
#msrv-list .srv-info em { font-style: normal; color: #e06a5a; font-size: 11.5px; }
#msrv-list .srv-info .acc { font-size: 11.5px; font-weight: 700; }
#msrv-list .srv-info .acc.yes { color: #2f8a1a; } #msrv-list .srv-info .acc.no { color: #b0742a; }
#msrv-list .srv-name { order: 3; direction: ltr; font: 900 30px/1 "Arial Black", Impact, Tahoma, sans-serif; color: #7ed321; letter-spacing: -1px;
  -webkit-text-stroke: 1.2px #fff; text-shadow: 0 2px 3px rgba(0,0,0,.45); }
#msrv-list .srv-name i { font-style: normal; color: #f7941d; font-size: 38px; margin-left: 2px; }
#msrv-list .srv-here { order: 2; font: 900 24px "Plex Arabic", Tahoma, sans-serif; color: #f8d000; -webkit-text-stroke: 1px #3a2a00;
  text-shadow: 0 2px 2px rgba(0,0,0,.5); white-space: nowrap; }
#msrv-list .msrv-load { height: 74px; border-radius: 10px; background: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%); background-size: 200% 100%; animation: msrvsh 1s linear infinite; }
@keyframes msrvsh { to { background-position: -200% 0; } }
#msrv-list .msrv-err { text-align: center; color: #a33; padding: 16px; }
#mvil { display: none; }
@media (max-width: 820px) {
  #mvsel { border: 0 !important; cursor: pointer; color: #8a1c1c; }
  #mvsel b { font: 700 16px "Plex Arabic", Tahoma !important; color: #8a1c1c; }
  #mvil { position: relative; display: inline-flex; align-items: center; flex: none; padding: 6px 6px; color: #222; font: 500 15px "Plex Arabic", Tahoma, sans-serif; cursor: pointer; }
  #mvil sup.n { position: absolute; top: -2px; left: -4px; color: #8a1c1c; font: 700 11px "Plex Arabic", Tahoma; background: none; }
  #mvil select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; }
}

/* ===== دفتر الرسائل: نفس شكل الدفتر لكن متناسق مع الجوال وحدود الكتابة واضحة ===== */
@media (max-width: 820px) {
  #content.messages .msg_head, #content.messages .msg_content, #content.messages .msg_foot { width: 100% !important; box-sizing: border-box; background-size: 100% 100% !important; }
  #content.messages .msg_head { height: 34px !important; background-size: 100% 100% !important; }
  #content.messages .msg_content { background-size: 100% auto !important; padding: 10px 14px 6px 12px !important; }
  #content.messages .msg_foot { height: 14px !important; }
  /* المستلم والموضوع */
  #content.messages .msg_content img#label { float: right; margin: 2px 0 0 8px !important; }
  #content.messages .msg_content div#heading { float: none !important; overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
  #content.messages .msg_content div#heading br { display: none; }
  #content.messages .msg_content div#heading * { height: auto !important; }
  #content.messages #write_content div#heading input, #content.messages #read_content div#heading div {
    width: 100% !important; box-sizing: border-box; height: 34px !important; padding: 0 10px !important; margin: 0 !important;
    background: #fff !important; border: 1px solid #c9dfa9 !important; border-radius: 8px; font: 500 16px "Plex Arabic", Tahoma, sans-serif; color: #222; line-height: 32px; }
  #content.messages #write_content div#heading input:focus, #content.messages #write_content textarea:focus {
    outline: none; border-color: #71a400 !important; box-shadow: 0 0 0 3px rgba(113,164,0,.18); }
  #content.messages #write_content div#heading input::placeholder { color: #a9b99a; }
  #content.messages #write_content a#adbook { float: left; margin: 6px 0 0 !important; }
  #content.messages .msg_content div#line { width: 100% !important; height: 14px !important; background-size: 100% auto !important; }
  #content.messages div#time { float: none !important; display: flex; justify-content: space-between; padding: 6px 2px 0 !important; color: #7a8a66; }
  /* شريط الأدوات */
  #content.messages #message_toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; height: auto !important; padding: 4px 0 8px !important; }
  #content.messages #message_toolbar > a { float: none !important; margin: 0 !important; }
  #content.messages #message_toolbar .clear { display: none; }
  #content.messages #message_toolbarWindows { flex-basis: 100%; }
  #content.messages .bbLine { display: none; }
  /* مساحة الكتابة: أسطر الدفتر تمشي مع النص + إطار واضح */
  #content.messages #write_content textarea, #content.messages #write_content textarea.write {
    display: block; width: 100% !important; box-sizing: border-box; min-height: 300px; height: 300px !important; margin: 0 !important; padding: 0 10px !important; resize: vertical;
    font: 400 16px/28px "Plex Arabic", Tahoma, sans-serif !important; color: #1d2a10;
    background: #fffef9 repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #dbe8ca 27px, #dbe8ca 28px) !important; background-attachment: local !important;
    border: 1px solid #c9dfa9 !important; border-radius: 8px; }
  #content.messages .msg_content div.message, #content.messages #message_preview {
    width: 100% !important; box-sizing: border-box; min-height: 160px; padding: 0 10px !important; margin: 0 !important; overflow-wrap: anywhere;
    font: 400 16px/28px "Plex Arabic", Tahoma, sans-serif; background: #fffef9 repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #dbe8ca 27px, #dbe8ca 28px);
    border: 1px solid #e3eed5; border-radius: 8px; }
  #content.messages .msg_content p.btn { text-align: center; margin: 12px 0 4px !important; }
  #content.messages #adressbook { width: 100% !important; box-sizing: border-box; }
}
@media (max-width: 820px) {
  body.m-msg-labels #content.messages img#label { display: none !important; }
  #content.messages label.m-field { display: flex !important; align-items: center; gap: 8px; height: auto !important; }
  #content.messages label.m-field span { flex: none; width: 58px; font: 600 14px "Plex Arabic", Tahoma, sans-serif; color: #6a9f22; }
  #content.messages label.m-field input, #content.messages label.m-field div { flex: 1; min-width: 0; }
}
@media (max-width: 820px) {
  #content.messages .msg_content div.message { background-attachment: local; padding: 0 10px 6px !important; }
  #content.messages .msg_content div.message * { line-height: 28px !important; }
}

/* ===== الخريطة: قطع جديدة عالية الجودة (296px تُعرض 74px) — قرى صغيرة/متوسطة/كبيرة + واحات + أرض هادئة ===== */
div#map div#map_content div.b00 { background-image: url(default/img/mg/d00.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b01 { background-image: url(default/img/mg/d01.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b02 { background-image: url(default/img/mg/d02.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b03 { background-image: url(default/img/mg/d03.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b04 { background-image: url(default/img/mg/d04.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b05 { background-image: url(default/img/mg/d05.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b06 { background-image: url(default/img/mg/d06.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b07 { background-image: url(default/img/mg/d07.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b08 { background-image: url(default/img/mg/d08.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b09 { background-image: url(default/img/mg/d09.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b10 { background-image: url(default/img/mg/d10.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b11 { background-image: url(default/img/mg/d11.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b12 { background-image: url(default/img/mg/d12.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b13 { background-image: url(default/img/mg/d13.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b14 { background-image: url(default/img/mg/d14.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b15 { background-image: url(default/img/mg/d15.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b16 { background-image: url(default/img/mg/d16.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b17 { background-image: url(default/img/mg/d17.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b18 { background-image: url(default/img/mg/d18.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b19 { background-image: url(default/img/mg/d19.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b20 { background-image: url(default/img/mg/d20.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b21 { background-image: url(default/img/mg/d21.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b22 { background-image: url(default/img/mg/d22.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b23 { background-image: url(default/img/mg/d23.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b24 { background-image: url(default/img/mg/d24.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b25 { background-image: url(default/img/mg/d25.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b26 { background-image: url(default/img/mg/d26.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b27 { background-image: url(default/img/mg/d27.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b28 { background-image: url(default/img/mg/d28.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b29 { background-image: url(default/img/mg/d29.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b30 { background-image: url(default/img/mg/d30.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b31 { background-image: url(default/img/mg/d31.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b32 { background-image: url(default/img/mg/d32.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b33 { background-image: url(default/img/mg/d33.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b34 { background-image: url(default/img/mg/d34.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.b35 { background-image: url(default/img/mg/d35.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o0 { background-image: url(default/img/mg/o0.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o1 { background-image: url(default/img/mg/o1.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o2 { background-image: url(default/img/mg/o2.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o3 { background-image: url(default/img/mg/o3.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o4 { background-image: url(default/img/mg/o4.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o5 { background-image: url(default/img/mg/o5.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o6 { background-image: url(default/img/mg/o6.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o7 { background-image: url(default/img/mg/o7.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o8 { background-image: url(default/img/mg/o8.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o9 { background-image: url(default/img/mg/o9.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o10 { background-image: url(default/img/mg/o10.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o11 { background-image: url(default/img/mg/o11.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o12 { background-image: url(default/img/mg/o12.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.o99 { background-image: url(default/img/mg/o99.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t0 { background-image: url(default/img/mg/t0.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t1 { background-image: url(default/img/mg/t1.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t2 { background-image: url(default/img/mg/t2.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t3 { background-image: url(default/img/mg/t3.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t4 { background-image: url(default/img/mg/t4.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t5 { background-image: url(default/img/mg/t5.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t6 { background-image: url(default/img/mg/t6.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t7 { background-image: url(default/img/mg/t7.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t8 { background-image: url(default/img/mg/t8.png) !important; background-size: 74px 74px !important; }
div#map div#map_content div.t9 { background-image: url(default/img/mg/t9.png) !important; background-size: 74px 74px !important; }

div#map div#map_content div.t0::after, div#map div#map_content div.t1::after, div#map div#map_content div.t2::after, div#map div#map_content div.t3::after, div#map div#map_content div.t4::after, div#map div#map_content div.t5::after, div#map div#map_content div.t6::after, div#map div#map_content div.t7::after, div#map div#map_content div.t8::after, div#map div#map_content div.t9::after { display: none !important; }

/* ===== صفحة الواحة / القرية على الخريطة: الصورة يمين والمعلومات يسار والخيارات تحت ===== */
@media (max-width: 820px) {
  #content.map h1 { margin-bottom: 8px !important; }
  #content.map img#detailed_map { float: right !important; width: 60% !important; height: auto !important; aspect-ratio: 300 / 264;
    background-size: contain !important; background-repeat: no-repeat; background-position: center top; margin: 0 0 10px 2% !important; position: static !important; }
  #content.map #map_details { float: left !important; width: 37% !important; margin: 0 !important; position: static !important; }
  #content.map #map_details table { width: 100% !important; margin: 0 0 12px !important; border: 0 !important; background: none !important; }
  #content.map #map_details th { background: none !important; border: 0 !important; padding: 0 0 3px !important; text-align: right; font: 700 15px "Plex Arabic", Tahoma !important; color: #222; }
  #content.map #map_details td { border: 0 !important; background: none !important; padding: 1px 0 !important; font: 500 14px "Plex Arabic", Tahoma; white-space: nowrap; }
  #content.map #map_details td.ico { width: 20px; }
  #content.map #map_details td.val { width: 1%; padding: 0 4px !important; font-weight: 600; direction: ltr; text-align: right; }
  #content.map #map_details td.desc { width: auto; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
  #content.map #map_details ul { margin: 0 !important; padding: 0 !important; list-style: none; white-space: normal; font-size: 13.5px; }
  #content.map #map_details table th:only-child, #content.map #map_details table th[colspan] { text-align: right; }
  #content.map #map_details td a { white-space: normal; }
  #content.map table#options { clear: both; float: none !important; width: 100% !important; margin: 6px 0 0 !important; }
  #content.map table#options th { text-align: right; background: none !important; border: 0 !important; font: 700 15px "Plex Arabic", Tahoma !important; padding: 0 4px 3px !important; }
  #content.map table#options td { border: 0 !important; background: none !important; padding: 3px 4px !important; font: 600 15px "Plex Arabic", Tahoma; text-align: right; }
}

/* ===== صفحة التحالف: جدول التفاصيل يمين والوصف يسار، النص الطويل ينلف ولا يطلع برا ===== */
@media (max-width: 820px) {
  #content.alliance table#profile { width: 100% !important; table-layout: fixed; border-collapse: collapse; }
  #content.alliance table#profile > thead > tr > td, #content.alliance table#profile > thead > tr > th { text-align: center; }
  #content.alliance table#profile td.empty { display: none !important; }
  #content.alliance table#profile td.details { width: 52% !important; padding: 0 !important; vertical-align: top; }
  #content.alliance table#profile td.desc1 { width: 48% !important; vertical-align: top; padding: 8px 8px !important; }
  #content.alliance table#profile td.desc1, #content.alliance table#profile td.desc2 {
    white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; font: 400 13.5px/1.6 "Plex Arabic", Tahoma, sans-serif; text-align: right; }
  #content.alliance table#profile td.desc2 { padding: 8px 6px !important; border-top: 1px solid #e3e3e3 !important; }
  #content.alliance table#profile td.details table { width: 100% !important; table-layout: fixed; border-collapse: collapse; margin: 0 !important; }
  #content.alliance table#profile td.details th, #content.alliance table#profile td.details td:not(.desc2) {
    padding: 6px 6px !important; border: 0 !important; border-bottom: 1px solid #ececec !important; background: none !important;
    font: 500 14px "Plex Arabic", Tahoma, sans-serif !important; text-align: right; vertical-align: middle; overflow-wrap: anywhere; }
  #content.alliance table#profile td.details th { width: 46%; color: #333; font-weight: 600 !important; }
  #content.alliance table#profile td.details td a { font-weight: 700; }
  /* جدول الأعضاء */
  #content.alliance table#member { width: 100% !important; table-layout: auto; }
  #content.alliance table#member th, #content.alliance table#member td { padding: 5px 3px !important; font-size: 13.5px; white-space: nowrap; }
  #content.alliance table#member td.pla { width: 100%; white-space: normal; overflow-wrap: anywhere; }
  #content.alliance table#member th:empty, #content.alliance table#member th:has(> br:only-child) { padding: 0 !important; }
}
@media (max-width: 820px) {
  #content.alliance table#profile td.details tr:has(> th:only-child:empty), #content.alliance table#profile td.details tr:has(> th:only-child:not(:has(*)):empty) { display: none !important; }
  #content.alliance table#member td:has(img), #content.alliance table#member th:empty { width: 24px !important; min-width: 24px; padding: 4px 2px !important; text-align: center; }
  #content.alliance table#member td img { max-width: none !important; }
}

/* ===== الواجهة الرئيسية (الجوال فقط) ===== */
#mland { display: none; }
#anav { display: none; }
@media (max-width: 820px) {
  body.indexPage { min-width: 0 !important; width: auto !important; background: #fff !important; margin: 0; overflow-x: hidden; }
  body.indexPage > .wrapper, body.indexPage > .overlay { display: none !important; }
  #mland { display: block; direction: rtl; font-family: "Plex Arabic", Tahoma, sans-serif; color: #222; }
  #mland .ml-top { height: 84px; background: url(default/img/vip/header-rtl-2x.png) center top / cover no-repeat; }
  #mland .ml-hero { height: 220px; background: #bfe3f7 url(../index_files/artwork0.jpg) 31% 100% / auto 168% no-repeat; }
  #mland .ml-card { position: relative; margin: -26px 10px 16px; padding: 14px 14px 16px; background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.14); }
  #mland h2 { margin: 0 0 6px; font: 700 19px "Plex Arabic", Tahoma, sans-serif; color: #2b2b2b; }
  #mland p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.75; color: #333; }
  #mland .ml-cta { display: block; margin: 0 auto 8px; padding: 11px 10px; max-width: 320px; text-align: center; border-radius: 10px; text-decoration: none;
    background: linear-gradient(180deg, #e2463a, #b5221a); color: #fff !important; font: 700 18px "Plex Arabic", Tahoma, sans-serif; box-shadow: 0 3px 0 #861710, 0 6px 12px rgba(181,34,26,.3); }
  #mland .ml-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #861710; }
  #mland .ml-login { display: block; text-align: center; margin: 6px 0 14px; color: #555 !important; font-size: 14.5px; text-decoration: none; }
  #mland .ml-login b { color: #5f9a12; }
  #mland h3 { margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 1px dashed #cfcfcf; font: 700 16px "Plex Arabic", Tahoma, sans-serif; }
  #mland .ml-about { display: flex; gap: 10px; }
  #mland .ml-about ul { margin: 0; padding: 0 16px 0 0; font-size: 13.5px; line-height: 1.9; }
  #mland .ml-feat { flex: 1.2; }
  #mland .ml-stats { flex: 1; }
  #mland .ml-stats b { font-weight: 700; color: #111; }
  #mland .ml-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  #mland .ml-shots a { display: block; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  #mland .ml-shots img { display: block; width: 100%; height: 72px; object-fit: cover; }
}
@media (max-width: 820px) {
  #mland .ml-nav, #anav { display: flex; justify-content: space-around; background: linear-gradient(#fff, #f1f1f1); border-bottom: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
  #mland .ml-nav a, #anav a { flex: 1; text-align: center; padding: 10px 2px; color: #444 !important; font: 600 15px "Plex Arabic", Tahoma, sans-serif; text-decoration: none !important; }
  #mland .ml-nav a.on, #anav a.on { color: #c0261c !important; border-bottom: 3px solid #c0261c; }
}

/* ===== التسجيل والدخول (الجوال) ===== */
@media (max-width: 820px) {
  #content.signup, #content.login { padding: 8px 12px 20px !important; font-family: "Plex Arabic", Tahoma, sans-serif; }
  #content.signup h1, #content.login h1 { margin: 6px 0 4px !important; text-align: center; }
  #content.signup h5, #content.login h5 { display: none; }
  #content.signup > p, #content.login > p { font-size: 14px; line-height: 1.7; margin: 6px 0 10px !important; }
  #content.signup table#sign_input, #content.login table#login_form:not(.info) { width: 100% !important; border: 0 !important; background: none !important; margin: 0 0 10px !important; }
  #content.signup table#sign_input, #content.signup #sign_input tbody, #content.login table#login_form:not(.info), #content.login #login_form:not(.info) tbody { display: block !important; width: 100% !important; }
  #content.signup #sign_input tr, #content.login #login_form:not(.info) tr { display: flex; align-items: center; gap: 8px; padding: 5px 0; border: 0 !important; }
  #content.signup #sign_input th, #content.login #login_form:not(.info) th { flex: none; width: 96px; padding: 0 !important; border: 0 !important; background: none !important; text-align: right; font: 600 14px "Plex Arabic", Tahoma, sans-serif !important; color: #444; white-space: nowrap; }
  #content.signup #sign_input tr.btm th { width: 132px; }
  #content.signup #sign_input th img { vertical-align: middle; margin: 0 4px 0 0 !important; height: 26px; }
  #content.signup #sign_input td, #content.login #login_form:not(.info) td { flex: 1; min-width: 0; padding: 0 !important; border: 0 !important; background: none !important; }
  #content.signup input.text, #content.login input.text { width: 100% !important; max-width: none !important; box-sizing: border-box; height: 40px !important; padding: 0 10px !important; margin: 0 !important;
    border: 1px solid #b9d98a !important; border-radius: 8px; background: #fff !important; font: 500 16px "Plex Arabic", Tahoma, sans-serif; }
  #content.signup input.text:focus, #content.login input.text:focus { outline: none; border-color: #71a400 !important; box-shadow: 0 0 0 3px rgba(113,164,0,.18); }
  #content.signup span.error, #content.login span.error { display: block; font-size: 12.5px; color: #c0261c; }
  #content.signup span.error:empty, #content.login span.error:empty { display: none; }
  #content.signup p.btn, #content.login p.btn { text-align: center; margin: 14px 0 8px !important; }
  #content.signup p.btn input, #content.login p.btn input { transform: scale(1.25); transform-origin: center; }
  #content.signup p.info { text-align: center; font-size: 13px; color: #d9701c; }
  /* القبيلة وموقع البداية (يعاد ترتيبها بـ mobile.js) */
  #content.signup .m-choice { margin: 10px 0 4px; }
  #content.signup .m-choice h4 { margin: 0 0 8px; font: 700 15px "Plex Arabic", Tahoma, sans-serif; color: #d9701c; }
  #content.signup .m-tribes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  #content.signup .m-tribes label { display: flex !important; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 2px solid #e2e2e2; border-radius: 10px; background: #fafafa;
    font: 600 13px "Plex Arabic", Tahoma, sans-serif; cursor: pointer; text-align: center; }
  #content.signup .m-tribes label img { width: 44px; height: auto; }
  #content.signup .m-tribes label input { margin: 0; }
  #content.signup .m-tribes label:has(input:checked) { border-color: #71a400; background: #f2f9e6; }
  #content.signup .m-pos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  #content.signup .m-pos label { display: flex !important; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px; border: 1px solid #e2e2e2; border-radius: 8px; background: #fafafa; font-size: 13px; cursor: pointer; white-space: nowrap; }
  #content.signup .m-pos label:has(input:checked) { border-color: #71a400; background: #f2f9e6; }
  body.m-signup-ready #content.signup table#sign_select { display: none !important; }
  /* الدخول */
  #content.login > center > img[src$="login.gif"] { max-width: 90%; height: auto; }
  #content.login #login_form:not(.info) th img { display: none; }
  #content.login #login_form:not(.info) tr.top th::before { content: "اسم اللاعب"; }
  #content.login #login_form:not(.info) tr.btm th::before { content: "كلمة السر"; }
  #content.login div[style*="text-align: center"]:has(img[src$="y.jpg"]) { display: none !important; }
  #content.login div.info { display: none; }
  #content.login table#login_form.info { display: table !important; width: 100% !important; margin: 14px 0 0 !important; border: 1px solid #e5e5e5 !important; border-radius: 10px; overflow: hidden; }
  #content.login table#login_form.info th, #content.login table#login_form.info td { padding: 6px 8px !important; font-size: 13.5px; border: 0 !important; border-bottom: 1px solid #f0f0f0 !important; background: none !important; text-align: right; }
}

/* شعار "جيش التتار" بدقة عالية على الجوال */
@media (max-width: 820px) {
  #dynamic_header { background-image: url(default/img/vip/header-rtl-2x.png) !important; background-size: cover !important; background-position: center 30% !important; }
}
#msrv-ov[hidden] { display: none !important; }
#msrv-list a.srv.here { filter: none; opacity: 1; }
#msrv-list .srv-name { margin-right: auto; }

/* ===== صفحة تسجيل الخروج: شريط الرئيسية / تسجيل الدخول ===== */
#lnav { display: none; }
@media (max-width: 820px) {
  #lnav { display: flex; justify-content: center; gap: 4px; margin: 12px 12px 4px; padding: 4px; border: 1px solid #c9c9c9; border-radius: 22px;
    background: linear-gradient(180deg, #fbfbfb 0, #e9e9e9 55%, #f4f4f4 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.12); }
  #lnav a { flex: 1; text-align: center; padding: 10px 6px; border-radius: 18px; color: #333 !important; font: 700 17px "Plex Arabic", Tahoma, sans-serif; text-decoration: none !important;
    text-shadow: 0 1px 0 #fff; }
  #lnav a.on { color: #8e1b1b !important; }
  #lnav a:active { background: rgba(0,0,0,.05); }
  body:has(#lnav) #header { display: none !important; }
}

/* منع تكبير الشاشة بالضغط مرتين */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }



/* ===== إصلاح الحقول الصغيرة (الجوال فقط) ===== */
@media (max-width: 820px) {
  /* كل حقول الإدخال: أكبر، أسهل للمس، وبنفس هوية اللعبة الخضراء */
  #content input.text, #content input[type=text], #content input[type=number], #content input[type=password], #content select {
    height: 44px !important; min-height: 44px; padding: 0 10px !important; box-sizing: border-box;
    font: 600 17px "Plex Arabic", Tahoma, sans-serif !important; text-align: center; color: #222;
    background: #fff; border: 1.5px solid #8fbf3a !important; border-radius: 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
  }
  #content input.text:focus, #content input[type=text]:focus, #content input[type=number]:focus {
    outline: none; border-color: #71a400 !important; box-shadow: 0 0 0 3px rgba(113,164,0,.2);
  }
  /* الثكنة والإسطبل والورشة وغيرها: عمود الكمية والحد الأقصى */
  #content table.build_details td.val { width: 1%; white-space: nowrap; padding: 6px 4px !important; vertical-align: middle; }
  #content table.build_details td.val input.text { width: 104px !important; max-width: none !important; direction: ltr; }
  #content table.build_details td.max { width: 1%; white-space: nowrap; padding: 6px 6px !important; text-align: center; vertical-align: middle; }
  #content table.build_details td.max a { display: inline-block; min-width: 58px; padding: 11px 6px; font: 700 15px "Plex Arabic", Tahoma, sans-serif; color: #4d7a00; text-decoration: none; border-radius: 8px; background: #eef6dc; touch-action: manipulation; }
  #content table.build_details td.desc { padding: 8px 6px !important; }
}

/* ===== صفحة تدريب الجنود (الثكنة / الإسطبل / الورشة) - الجوال فقط ===== */
.m-big, .m-up, .m-br { display: none; }
@media (max-width: 820px) {
  /* إلغاء الهوامش الجانبية (div#build كان له padding 25px) */
  #content:has(#build table.build_details) { padding: 6px 3px 12px !important; }
  #content #build:has(table.build_details) { width: 100% !important; padding: 4px 0 0 !important; box-sizing: border-box; }
  #content #build:has(table.build_details) h1 { font-size: 25px !important; font-weight: 700; line-height: 1.3; margin: 6px 0 8px !important; }
  #content #build:has(table.build_details) h1 .level { font-size: inherit !important; font-weight: inherit; }
  #content #build:has(table.build_details) p.build_desc { display: none; }
  #content #build:has(table.build_details) > p { font: 400 17px/26px "Plex Arabic", Tahoma, sans-serif; margin: 4px 0 8px; color: #111; }

  /* الجدول يصير بطاقات بعرض الشاشة كاملة */
  #content table.build_details, #content table.build_details tbody { display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  #content table.build_details { clear: both !important; float: none !important; border: 0 !important; background: none !important; margin: 10px 0 0; }
  #content table.build_details thead { display: none; }
  #content table.build_details tr {
    display: grid; grid-template-columns: 58px auto auto minmax(0, 1fr); column-gap: 5px; row-gap: 0; align-items: center;
    padding: 6px 4px; margin: 0 0 8px; background: #fff; border: 1px solid #cfcfcf; border-radius: 3px; box-sizing: border-box;
  }
  #content table.build_details tr > * { min-width: 0; }
  #content table.build_details td { display: block; width: auto !important; border: 0 !important; background: none !important; padding: 0 !important; text-align: right; }
  #content table.build_details td.desc { display: contents; }
  #content table.build_details td[colspan] { grid-column: 1 / -1; text-align: center; padding: 14px 0 !important; }

  /* صورة الجندي (يمين) */
  #content table.build_details .m-big { display: block; grid-column: 1; grid-row: 1 / span 4; width: 58px; height: 100px; object-fit: cover; object-position: center; align-self: center; }

  /* الاسم والمتوفر */
  #content table.build_details .tit { grid-column: 2 / -1; grid-row: 1; font: 600 16px/23px "Plex Arabic", Tahoma, sans-serif; }
  #content table.build_details .tit img { margin: 0 0 0 5px !important; top: 3px; }
  #content table.build_details .tit .info { font-size: 12px; font-weight: 400; color: #222; }

  /* التكلفة (خشب طين حديد قمح استهلاك) ثم سطر الوقت */
  #content table.build_details .details { grid-column: 2 / -1; grid-row: 2; display: block; padding: 0 !important; font: 400 15px/23px "Plex Arabic", Tahoma, sans-serif; color: #111; }
  #content table.build_details .details .sep { display: none; }
  #content table.build_details .details .m-up { display: inline; }
  #content table.build_details .details .m-br { display: inline; }
  #content table.build_details .details .little_res { font-size: 15px; font-weight: 400; margin: 0 3px 0 8px; }
  #content table.build_details .details .m-time { font-size: 15px; margin: 0 3px 0 4px; }
  #content table.build_details .details img { vertical-align: middle; }

  /* الكمية  [ حقل ]  / العدد  [ تدريب ] */
  #content table.build_details td.val { grid-column: 2; grid-row: 3; display: flex; align-items: center; gap: 7px; white-space: nowrap; margin-top: 6px; }
  #content table.build_details td.val::before { content: "الكمية"; font: 400 16px "Plex Arabic", Tahoma, sans-serif; color: #111; }
  #content table.build_details td.val input.text { width: 78px !important; max-width: none !important; height: 32px !important; min-height: 32px; padding: 0 4px !important; font: 400 16px "Plex Arabic", Tahoma, sans-serif !important; border-radius: 3px; direction: ltr; }
  #content table.build_details td.max { grid-column: 3; grid-row: 3; margin-top: 6px; margin-inline-start: 3px; font-size: 17px !important; }
  #content table.build_details td.max a { display: inline; min-width: 0; padding: 0; background: none; font: 700 17px "Plex Arabic", Tahoma, sans-serif; color: #6aa84f; text-decoration: none; }
  #content table.build_details td.max a::before { content: "/ "; }
  #content table.build_details td.max .pr { display: none; }

  /* زر التدريب: مظهر زمن التتار فوق زر الصورة الأصلي (الزر الأصلي شفاف فوقه ويظل هو المرسل) */
  p.m-train { position: relative; width: 70px; height: 24px; margin: 6px 0 0 !important; padding: 0 !important; border: 1.5px solid #8cc152; border-radius: 5px; box-sizing: border-box;
              background: linear-gradient(#f1f1f1, #cfcfcf); text-align: center; font: 400 16px/21px "Plex Arabic", Tahoma, sans-serif; color: #777; }
  p.m-train::before { content: "تدريب"; }
  p.m-train input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transform: none !important; margin: 0 !important; z-index: 2; cursor: pointer; }
  #content table.build_details tr > p.m-train { grid-column: 4; grid-row: 3; justify-self: start; margin-inline-start: 12px !important; }
  #content form > p.m-train { margin: 4px 0 12px auto !important; }

  /* جدول "تحت التدريب" بعرض كامل */
  #content #build:has(table.build_details) table.under_progress { width: 100% !important; margin-top: 10px; }
}

/* ===== بطاقات متعددة داخل صندوق واحد + زر تدريب لكل جندي (مثل زمن التتار) ===== */
.fmt { display: none; }
@media (max-width: 820px) {
  #content table.build_details tbody { border: 1px solid #cfcfcf; background: #fff; }
  #content table.build_details tr { border: 0; border-bottom: 1px dotted #b5b5b5; border-radius: 0; margin: 0; padding: 8px 4px; grid-template-columns: 62px auto auto minmax(0, 1fr); }
  #content table.build_details tr:last-child { border-bottom: 0; }
  #content table.build_details .m-big { width: 62px; height: 96px; }
  #content table.build_details td.max .raw { display: none; }
  #content table.build_details td.max .fmt { display: inline; }
  #content table.build_details tr > p.m-train { margin-inline-start: 4px !important; cursor: pointer; }
  p.m-orig { display: none !important; }
}

/* ===== المبنى الرئيسي (gid15): نفس شكل زمن التتار - الجوال فقط ===== */
@media (max-width: 820px) {
  #content:has(#build.gid15) { padding: 6px 3px 12px !important; }
  #content #build.gid15 { width: 100% !important; padding: 4px 0 0 !important; box-sizing: border-box; }
  #content #build.gid15 h1 { font-size: 25px !important; font-weight: 700; line-height: 1.3; margin: 6px 0 8px !important; }
  #content #build.gid15 h1 .level { font-size: inherit !important; font-weight: inherit; }
  #content #build.gid15 p.build_desc { display: none; }
  #content #build.gid15 p { font: 400 17px/26px "Plex Arabic", Tahoma, sans-serif; margin: 4px 0 8px; color: #111; }
  #content #build.gid15 p.error { color: #d80000; }
  #content #build.gid15 h2 { font: 700 20px/1.4 "Plex Arabic", Tahoma, sans-serif; margin: 16px 0 6px !important; }
  #content #build.gid15 table#build_value, #content #build.gid15 table#build_value th, #content #build.gid15 table#build_value td { font: 400 17px/26px "Plex Arabic", Tahoma, sans-serif; background: none !important; border: 0 !important; padding: 0 4px 0 0 !important; white-space: nowrap; }
  #content #build.gid15 table#build_value { width: auto; margin: 4px 0 8px; }

  /* صندوق الهدم */
  #content #build.gid15 #contract { margin-top: 10px; }
  #content #build.gid15 form.demolish_building { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; border: 1px solid #cfcfcf; background: #fff; box-sizing: border-box; }
  #content #build.gid15 form.demolish_building::before { content: "هدم المباني"; grid-column: 1 / -1; background: #efefef; border-bottom: 1px solid #cfcfcf; text-align: center; font: 700 17px/26px "Plex Arabic", Tahoma, sans-serif; color: #111; }
  #content #build.gid15 form.demolish_building select.dropdown { grid-column: 1; width: calc(100% - 12px); margin: 6px; }
  #content #build.gid15 label.dgold { grid-column: 2; display: flex; align-items: center; gap: 4px; padding: 0 8px; font: 400 15px "Plex Arabic", Tahoma, sans-serif; color: #777; white-space: nowrap; }
  #content #build.gid15 label.dgold input { width: 22px; height: 22px; min-height: 0; margin: 0 0 0 4px; }
  #content #build.gid15 .m-dbtn { grid-column: 1 / -1; justify-self: center; position: relative; width: 104px; height: 24px; margin: 4px 0 8px; border: 1.5px solid #8cc152; border-radius: 5px; box-sizing: border-box;
      background: linear-gradient(#f1f1f1, #cfcfcf); text-align: center; font: 400 16px/21px "Plex Arabic", Tahoma, sans-serif; color: #777; }
  #content #build.gid15 .m-dbtn::before { content: "هدم المبنى"; }
  #content #build.gid15 .m-dbtn input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transform: none !important; margin: 0 !important; cursor: pointer; }
  #content #build.gid15 table#demolish { width: 100% !important; margin-top: 10px; }
}


/* ===== الاكاديميه الحربية (gid22): نفس شكل زمن التتار - جدول من عمودين (البحث | النشاط) =====
   الجوال والتابلت (حتى 820px) فقط. الكمبيوتر يبقى على التصميم الأصلي. ===== */
@media (max-width: 820px) {
  /* إرجاع الجدول لشكل الجدول الحقيقي بدل بطاقات الثكنة (الشبكة) */
  #content #build.gid22 table.build_details { display: table; width: 100% !important; max-width: 100% !important; table-layout: fixed;
    border-collapse: collapse; border: 1px solid #cfcfcf !important; background: #fff !important; margin: 12px 0 0; }
  #content #build.gid22 table.build_details thead { display: table-header-group; }
  #content #build.gid22 table.build_details tbody { display: table-row-group; width: auto !important; border: 0; background: none; }
  #content #build.gid22 table.build_details tr { display: table-row; padding: 0; margin: 0; border: 0; background: none; }
  #content #build.gid22 table.build_details tbody tr + tr > td { border-top: 1px solid #cfcfcf !important; }

  /* رأس الجدول */
  #content #build.gid22 table.build_details thead td { display: table-cell; padding: 3px 4px !important; text-align: center;
    font: 700 17px/26px "Plex Arabic", Tahoma, sans-serif; color: #111; background: linear-gradient(#fdfdfd, #e2e2e2) !important; border: 1px solid #cfcfcf !important; }

  /* عمود الجندي (يمين) وعمود النشاط (يسار) */
  #content #build.gid22 table.build_details td.desc { display: table-cell; padding: 8px 8px 8px 6px !important; vertical-align: middle; text-align: right; }
  #content #build.gid22 table.build_details td.act { display: table-cell; width: 78px !important; padding: 6px 4px !important; vertical-align: middle; text-align: center;
    border-right: 1px solid #cfcfcf !important; font: 400 15px/21px "Plex Arabic", Tahoma, sans-serif; }
  #content #build.gid22 table.build_details td.act a.build { display: inline-block; padding: 8px 6px; font: 700 18px/24px "Plex Arabic", Tahoma, sans-serif;
    color: #6aa84f; text-decoration: none; touch-action: manipulation; }
  #content #build.gid22 table.build_details td.act span.none { display: block; font: 400 14px/20px "Plex Arabic", Tahoma, sans-serif; color: #9a9a9a; white-space: normal; }

  /* اسم الجندي والتكلفة */
  #content #build.gid22 table.build_details td.desc .tit { display: block; font: 700 18px/26px "Plex Arabic", Tahoma, sans-serif; margin: 0 0 2px; }
  #content #build.gid22 table.build_details td.desc .tit a { color: #6aa84f; text-decoration: none; }
  #content #build.gid22 table.build_details td.desc .tit img { margin: 0 0 0 6px !important; top: 4px; }
  #content #build.gid22 table.build_details td.desc .details { display: block; padding: 0 !important; font: 400 16px/26px "Plex Arabic", Tahoma, sans-serif; color: #111; }
  #content #build.gid22 table.build_details td.desc .details img { vertical-align: middle; }
  #content #build.gid22 table.build_details td.desc .details .little_res { font-size: 16px; margin: 0 3px 0 7px; white-space: nowrap; }
  #content #build.gid22 table.build_details td.desc span.none { display: block; font: 400 14px/20px "Plex Arabic", Tahoma, sans-serif; color: #9a9a9a; margin-top: 2px; white-space: normal; }

  /* رابط أكثر / أقل */
  #content #build.gid22 p.switch { margin: 10px 4px 6px; font: 700 18px/26px "Plex Arabic", Tahoma, sans-serif; }
  #content #build.gid22 p.switch a { color: #6aa84f; text-decoration: none; }

  /* جدول الشروط (الأبحاث القادمة): الجندي يمين، والمباني المطلوبة يسار */
  #content #build.gid22 table#researchFuture.hide { display: none; }
  #content #build.gid22 table#researchFuture thead td[colspan] { padding: 3px 4px !important; text-align: center; }
  #content #build.gid22 table#researchFuture td.desc { width: 40%; }
  #content #build.gid22 table#researchFuture td.cond { display: table-cell; padding: 6px 8px !important; vertical-align: middle; text-align: right;
    border-right: 1px solid #cfcfcf !important; font: 400 16px/24px "Plex Arabic", Tahoma, sans-serif; color: #111; }
  #content #build.gid22 table#researchFuture td.cond a { color: #6aa84f; text-decoration: none; }
  #content #build.gid22 table#researchFuture td.cond span { white-space: nowrap; }
  #content #build.gid22 table#researchFuture td[colspan] { padding: 14px 0 !important; }

  /* جدول "تحت البحث" */
  #content #build.gid22 table.under_progress { display: table; width: 100% !important; border-collapse: collapse; border: 1px solid #cfcfcf; background: #fff; margin-top: 12px; }
  #content #build.gid22 table.under_progress thead { display: table-header-group; }
  #content #build.gid22 table.under_progress tbody { display: table-row-group; }
  #content #build.gid22 table.under_progress tr { display: table-row; }
  #content #build.gid22 table.under_progress td { display: table-cell; padding: 6px 8px; border: 1px solid #cfcfcf; font: 400 16px/24px "Plex Arabic", Tahoma, sans-serif; vertical-align: middle; }
  #content #build.gid22 table.under_progress thead td { text-align: center; font-weight: 700; background: linear-gradient(#fdfdfd, #e2e2e2); }
  #content #build.gid22 table.under_progress td.dur { width: 78px; text-align: center; }
  #content #build.gid22 table.under_progress tr.next { display: none; }
}

/* الهواتف الصغيرة (حتى 380px): عمود نشاط أضيق وخط أصغر شوي */
@media (max-width: 380px) {
  #content #build.gid22 table.build_details td.act { width: 66px !important; padding: 6px 2px !important; }
  #content #build.gid22 table.build_details td.act a.build { font-size: 16px; padding: 8px 2px; }
  #content #build.gid22 table.build_details td.act span.none { font-size: 13px; line-height: 18px; }
  #content #build.gid22 table.build_details td.desc { padding: 6px 6px 6px 4px !important; }
  #content #build.gid22 table.build_details td.desc .tit { font-size: 16px; line-height: 24px; }
  #content #build.gid22 table.build_details td.desc .details, #content #build.gid22 table.build_details td.desc .details .little_res { font-size: 14px; line-height: 24px; }
  #content #build.gid22 table.build_details td.desc .details .little_res { margin: 0 2px 0 5px; }
  #content #build.gid22 table#researchFuture td.cond { font-size: 14px; padding: 6px 5px !important; }
  #content #build.gid22 table#researchFuture td.desc { width: 38%; }
}

/* التابلت (601 - 820px): خط وأعمدة أوسع، التكلفة تبقى بسطر واحد غالباً */
@media (min-width: 601px) and (max-width: 820px) {
  #content #build.gid22 table.build_details td.act { width: 150px !important; }
  #content #build.gid22 table.build_details td.act a.build { font-size: 20px; }
  #content #build.gid22 table.build_details td.act span.none { font-size: 16px; line-height: 22px; }
  #content #build.gid22 table.build_details td.desc { padding: 10px 14px 10px 8px !important; }
  #content #build.gid22 table.build_details td.desc .tit { font-size: 20px; line-height: 30px; }
  #content #build.gid22 table.build_details td.desc .details, #content #build.gid22 table.build_details td.desc .details .little_res { font-size: 18px; line-height: 30px; }
  #content #build.gid22 table.build_details td.desc .details .little_res { margin: 0 4px 0 12px; }
  #content #build.gid22 table#researchFuture td.desc { width: 34%; }
  #content #build.gid22 table#researchFuture td.cond { font-size: 18px; line-height: 28px; padding: 8px 12px !important; }
  #content #build.gid22 table.under_progress td { font-size: 18px; }
  #content #build.gid22 table.under_progress td.dur { width: 150px; }
}

/* ===== v38: الشريط العلوي #mbar يتقلص بحسب العرض (320..820) بدل التمرير الأفقي الذي كان يقص "قرى" والخروج ===== */
@media (max-width: 820px) {
  body #mbar { gap: clamp(1px, .8vw, 6px) !important; padding-left: clamp(2px, 1vw, 8px) !important; padding-right: clamp(2px, 1vw, 8px) !important; }
  body #mbar-nav { flex: 1 1 0 !important; min-width: 0 !important; overflow: visible !important; justify-content: flex-start; gap: 0 !important; }
  body #mbar-nav a, body #mbar-nav #mvil { flex: 0 1 auto !important; min-width: 0 !important; white-space: nowrap;
    font-size: clamp(12px, 3.7vw, 16px) !important; padding-left: clamp(3px, 1.3vw, 8px) !important; padding-right: clamp(3px, 1.3vw, 8px) !important; }
  body #mbar-burger, body #mbar-out { flex: 0 1 auto !important; min-width: 0 !important; width: clamp(26px, 8vw, 40px) !important; }
  body #mbar-gold { flex: 0 1 auto !important; min-width: 0 !important; font-size: clamp(11px, 3.3vw, 14px) !important; padding-left: clamp(3px, 1.5vw, 12px) !important; padding-right: clamp(2px, 1vw, 4px) !important; gap: clamp(2px, 1vw, 6px) !important; }
}

/* ===== v40: معجزة العالم / سوق المحاربين (build_details بعمود تكلفة الذهب): التكلفة بسطر خاص، والحد الأقصى تحت خانة الكمية ===== */
@media (max-width: 820px) {
  #content table.build_details td.max:has(> img.gold) { grid-column: 2 / -1 !important; grid-row: 2 !important; margin: 2px 0 0 !important; text-align: right; font: 400 15px "Plex Arabic", Tahoma, sans-serif !important; white-space: nowrap; }
  #content table.build_details td.max:has(> img.gold) img { vertical-align: middle; margin-inline-end: 4px; }
  #content table.build_details td.val ~ td.max { grid-column: 2 / -1 !important; grid-row: 4 !important; margin: 4px 0 0 !important; text-align: right; overflow-wrap: anywhere; }
  #content table.build_details td.val ~ td.max a { font-size: clamp(14px, 4.4vw, 17px) !important; }
  #content table.build_details td.val ~ td.max a::before { content: "الحد الأقصى: " !important; font-weight: 400; color: #111; }
  #content table.build_details td.val input.text { width: clamp(64px, 22vw, 96px) !important; }
  #content table.build_details tr > p.m-train { grid-row: 3 !important; }
}

/* ===== قائمة القرى المرقّمة: زجاج شفاف مثل القائمة الجانبية ===== */
#mvil-pop, #mvil-ov { display: none; }
@media (max-width: 820px) {
  #mvil-ov { display: block; position: fixed; inset: 0; z-index: 100000; background: rgba(20,25,10,.18); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
  #mvil-pop { display: block; position: fixed; z-index: 100001; width: min(88vw, 300px); max-height: 62vh; overflow-y: auto; padding: 6px; box-sizing: border-box;
    background: rgba(255,255,255,.01); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.65); border-radius: 14px; box-shadow: 0 10px 28px rgba(30,40,10,.22); text-align: right;
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top center; transition: opacity .18s, transform .18s, visibility 0s .18s; }
  body.m-vil-open #mvil-ov { opacity: 1; visibility: visible; transition: opacity .2s; }
  body.m-vil-open #mvil-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
  #mvil-pop .vp-it { display: flex; align-items: center; gap: 8px; min-height: 50px; margin: 0 0 6px; padding: 5px 10px; box-sizing: border-box;
    background: rgba(255,255,255,.62); border: 1px solid rgba(106,159,34,.28); border-radius: 12px; color: #2c3a14 !important; text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(60,70,20,.10), inset 0 1px 0 rgba(255,255,255,.9); font: 700 12.5px "Plex Arabic", Tahoma, sans-serif; }
  #mvil-pop .vp-it:last-child { margin-bottom: 0; }
  #mvil-pop .vp-it:active { background: rgba(139,191,58,.25); }
  #mvil-pop .vp-it.cur { background: rgba(190,225,120,.55); border-color: rgba(106,159,34,.6); }
  #mvil-pop .vp-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(180deg, #8bbf3a, #6a9f22); color: #fff; font: 700 13px "Plex Arabic", Tahoma, sans-serif; box-shadow: 0 1px 3px rgba(40,60,10,.35); }
  #mvil-pop .vp-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mvil-pop em { direction: ltr !important; unicode-bidi: bidi-override !important; flex: 0 0 auto; font-style: normal; font-weight: 600; font-size: 11px; color: #7a8a52; }
  #mvil-pop .vp-ck { flex: 0 0 auto; font-style: normal; color: #4a6a12; font-size: 14px; }
}
/* أيقونة القرية = صورة خريطة حقولها مصغّرة + سطر النوع + شارة العاصمة */
@media (max-width: 820px) {
  #mvil-pop .vp-n { min-width: 22px; height: 22px; font-size: 12px; }
  #mvil-pop .vp-it { min-height: 58px; }
  #mvil-pop .vp-ic { flex: 0 0 auto; position: relative; display: block; width: 46px; height: 46px; margin-top: 8px; }
  #mvil-pop .vp-ic img { display: block; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(40,60,10,.4); background: #e6efc8; }
  #mvil-pop .vt-full .vp-ic img { border-color: #f2b705; }
  #mvil-pop .vt-half .vp-ic img { border-color: #b9d45a; }
  #mvil-pop .vp-cap { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 0 6px; border-radius: 8px; white-space: nowrap; text-decoration: none;
    background: linear-gradient(180deg, #ffd24d, #e09a12); color: #4a2f00; font: 700 9.5px/14px "Plex Arabic", Tahoma, sans-serif; box-shadow: 0 1px 3px rgba(60,40,0,.4); }
  #mvil-pop .vp-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  #mvil-pop .vp-tx .vp-t { flex: none; }
  #mvil-pop .vp-k { font: 600 10.5px "Plex Arabic", Tahoma, sans-serif; color: #7a8a52; }
  #mvil-pop .vt-full .vp-k { color: #a87a08; }
}

/* ===== الخريطة على الجوال: إلغاء زر التكبير وزر التحريك + نموذج بحث مصغّر بسطر واحد + خريطة أكبر ===== */
@media (max-width: 820px) {
  #map_makelarge, #map_navibox, #map_navibox + map { display: none !important; }
  #m-mapwrap { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; }
  #m-mapwrap #map { margin-left: 0 !important; margin-right: 0 !important; }
  #map_infobox { position: static !important; width: calc(100% - 16px) !important; display: table; table-layout: fixed; box-sizing: border-box; margin: 4px 8px 0 !important; direction: rtl; background: #fff; border: 1px solid rgba(106,159,34,.35); border-radius: 10px; border-collapse: separate; overflow: hidden; }
  #map_infobox th, #map_infobox td { font: 600 12.5px "Plex Arabic", Tahoma, sans-serif !important; padding: 3px 8px !important; line-height: 1.3 !important; }
  #map_infobox thead th { background: #eef4d9; color: #2c3a14; text-align: right; }
  #map_infobox tbody th { width: 34%; color: #7a8a52; text-align: right; }
  #map_coords { position: static !important; width: auto !important; height: auto !important; box-sizing: border-box; direction: rtl;
    margin: 6px 8px 10px; padding: 6px 8px; background: linear-gradient(180deg, #fbfdf3, #eef4d9); border: 1px solid rgba(106,159,34,.4); border-radius: 12px;
    box-shadow: 0 1px 4px rgba(60,70,20,.12), inset 0 1px 0 #fff; }
  #map_coords form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 0; }
  #map_coords form > span { float: none !important; margin: 0 !important; font: 700 13px "Plex Arabic", Tahoma, sans-serif; color: #4a6a12; text-transform: uppercase; }
  #map_coords form > input.text { float: none !important; margin: 0 !important; width: 100% !important; min-width: 0; box-sizing: border-box; height: 36px; padding: 0 4px;
    text-align: center; direction: ltr; font: 700 16px "Plex Arabic", Tahoma, sans-serif; color: #222; background: #fff; border: 1.5px solid #9cc24a; border-radius: 9px; -moz-appearance: textfield; appearance: textfield; }
  #map_coords form > input.text:focus { outline: none; border-color: #6a9f22; box-shadow: 0 0 0 2px rgba(139,191,58,.3); }
  #map_coords form > input.text::-webkit-outer-spin-button, #map_coords form > input.text::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  #map_coords #btn_ok { display: none !important; }
  #map_coords br { display: none; }
  #map_coords .m-go { height: 36px; padding: 0 14px; border: 0; border-radius: 9px; cursor: pointer; color: #fff; font: 700 14px "Plex Arabic", Tahoma, sans-serif;
    background: linear-gradient(180deg, #8bbf3a, #5f9a1c); box-shadow: 0 1px 3px rgba(40,60,10,.35), inset 0 1px 0 rgba(255,255,255,.4); -webkit-tap-highlight-color: transparent; }
  #map_coords .m-go:active { transform: translateY(1px); filter: brightness(.95); }
}
@media (max-width: 340px) { #map_coords { margin: 6px 4px 8px; padding: 5px 6px; } #map_coords .m-go { padding: 0 10px; } }
@media (max-width: 480px) { #m-mapwrap { margin-bottom: -12vw; } }

/* ===== الخريطة: شارات القمحيات، الأصدقاء (أزرق + يد) والأعداء (أحمر + سيفان)، وبطاقة الدخول بعد 5 ثواني ===== */
@media (max-width: 820px) {
  #map_content #mk-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; display: block; }
  #map_content .mk { pointer-events: none; text-decoration: none; font-style: normal; }
  #map_content .mk-wrap { position: absolute; width: 74px; height: 74px; display: block; }
  #map_content .mk-ring { position: absolute; left: 0; top: 0; width: 74px; height: 74px; overflow: visible; }
  #map_content .mk-ring polygon { stroke: transparent; }
  #map_content .mk-ring.ally polygon { stroke: #1f6feb; }
  #map_content .mk-ring.foe polygon { stroke: #e5252a; }
  #map_content .mk-ring.ally { filter: drop-shadow(0 0 3px rgba(31,111,235,.9)); }
  #map_content .mk-ring.foe { filter: drop-shadow(0 0 3px rgba(229,37,42,.9)); }
  #map_content .mk-ring.sel polygon { stroke: #ffb400; stroke-dasharray: 7 4; }
  #map_content .mk-ring.sel { filter: drop-shadow(0 0 4px rgba(255,180,0,.95)); animation: mkSel .9s ease-in-out infinite alternate; }
  @keyframes mkSel { from { opacity: .55; } to { opacity: 1; } }
  #map_content .mk-crop { position: absolute; left: 50%; top: 21px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; direction: rtl;
    padding: 0 3px; height: 11px; line-height: 11px; border-radius: 6px; background: rgba(255,246,205,.94); border: 1px solid #c9a227; color: #6b4a00; font: 700 8px/11px "Plex Arabic", Tahoma, sans-serif; box-shadow: 0 1px 2px rgba(60,40,0,.3); }
  #map_content .mk-crop::before { content: ""; width: 7px; height: 7px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22V9' stroke='%238a6a12' stroke-width='2' stroke-linecap='round'/><g fill='%23f2b705' stroke='%23b5830a' stroke-width='.8'><ellipse cx='12' cy='4.5' rx='2.2' ry='3.2'/><ellipse cx='8' cy='8.5' rx='2.2' ry='3.3' transform='rotate(-35 8 8.5)'/><ellipse cx='16' cy='8.5' rx='2.2' ry='3.3' transform='rotate(35 16 8.5)'/><ellipse cx='8.2' cy='14' rx='2.2' ry='3.3' transform='rotate(-35 8.2 14)'/><ellipse cx='15.8' cy='14' rx='2.2' ry='3.3' transform='rotate(35 15.8 14)'/></g></svg>") center / contain no-repeat; }
  #map_content .mk-role { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 26px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
  #map_content .mk-role.up { top: -3px; }
  #map_content .mk-ally { filter: drop-shadow(0 1px 2px rgba(31,111,235,.7)); }
  #map_content .mk-foe svg { width: 28px; height: 22px; overflow: visible; filter: drop-shadow(0 1px 2px rgba(150,0,0,.6)); }
  #map_content .mk-foe .sw { transform-origin: 0 0; }
  #map_content .mk-foe .sl { animation: mkSwL .9s ease-in-out infinite; }
  #map_content .mk-foe .sr { animation: mkSwR .9s ease-in-out infinite; }
  #map_content .mk-foe .spark { transform-box: fill-box; transform-origin: center; animation: mkSpark .9s ease-in-out infinite; opacity: 0; }
  @keyframes mkSwL { 0%, 100% { transform: rotate(10deg); } 42%, 52% { transform: rotate(46deg); } }
  @keyframes mkSwR { 0%, 100% { transform: rotate(-10deg); } 42%, 52% { transform: rotate(-46deg); } }
  @keyframes mkSpark { 0%, 38%, 62%, 100% { opacity: 0; transform: scale(.4); } 46%, 54% { opacity: 1; transform: scale(1.1); } }

  /* بطاقة الدخول بعد 5 ثواني */
  #m-enter { box-sizing: border-box; margin: 4px 8px 0; padding: 7px 10px 8px; direction: rtl; background: linear-gradient(180deg, #fffbe6, #fff1bf); border: 1px solid rgba(201,162,39,.65); border-radius: 12px; box-shadow: 0 1px 4px rgba(90,60,0,.18); }
  #m-enter .me-bar { height: 5px; border-radius: 3px; background: rgba(150,110,0,.18); overflow: hidden; margin-bottom: 7px; }
  #m-enter .me-bar b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #f2b705, #e08a00); border-radius: 3px; }
  #m-enter .me-row { display: flex; align-items: center; gap: 6px; }
  #m-enter .me-t { flex: 1 1 auto; min-width: 0; font: 600 12.5px "Plex Arabic", Tahoma, sans-serif; color: #5a3d00; }
  #m-enter .me-t em { font-style: normal; font-weight: 700; color: #b36a00; }
  #m-enter button { flex: none; height: 32px; padding: 0 11px; border: 0; border-radius: 9px; font: 700 12.5px "Plex Arabic", Tahoma, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #m-enter .me-go { color: #fff; background: linear-gradient(180deg, #8bbf3a, #5f9a1c); box-shadow: 0 1px 3px rgba(40,60,10,.35); }
  #m-enter .me-x { color: #7a2a1a; background: #fde2da; border: 1px solid rgba(180,60,40,.35); }
}

/* ===== v51: صفحة الحقول بنفس الترتيب على كل الأجهزة =====
   الخريطة يمين، وجنبها (التحركات - الإنتاج - الوحدات) بنفس خط وتنسيق الجوال.
   التابلت: القرية في كتلة بالوسط بدل ما تتمدد على أطراف الشاشة. */
@media (min-width: 600px) and (max-width: 820px) {
  #content.village1 { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (min-width: 821px) {
  #content.village1 #map_details th { font: bold 13px Tahoma, Verdana, Arial, sans-serif !important; color: #000; padding: 0 0 3px !important; }
  #content.village1 #map_details td { font: 13px Tahoma, Verdana, Arial, sans-serif !important; padding: 1px 0 !important; line-height: 20px; }
  #content.village1 #production td.num { font-weight: 700 !important; direction: ltr; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  #content.village1 #production td.res, #content.village1 #production td.per { display: none !important; }
  #content.village1 #production td.ico, #content.village1 #troops td.ico { width: 24px; text-align: right; }
  #content.village1 #troops td.num { font-weight: 700 !important; padding-left: 6px !important; }
}

/* ===== v52: صفحة الحقول على الجوال بنفس مقاسات وخط زمن التتار (خط الجوال الأساسي) =====
   الخريطة يمين، وجنبها عمود مضغوط يبدأ من أعلى الخريطة. لو فيه هجوم تطلع "تحركات القوات" فوق
   والإنتاج ينزل تحتها، ولو ما فيه يرجع الإنتاج مكانه الطبيعي فوق. (المحددات فيها #map_details عشان تغلب القواعد القديمة) */
@media (max-width: 820px) {
  #content.village1 h1 { font: bold 21px -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI", Roboto, "Geeza Pro", Tahoma, Arial, sans-serif !important; }
  #content.village1 h1 > font { font: 12px -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI", Roboto, "Geeza Pro", Tahoma, Arial, sans-serif !important; }
  #content.village1 #map_details { width: 32% !important; margin: 0 !important; padding: 0 !important; }
  #content.village1 #map_details table { margin: 0 0 10px !important; width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; }
  #content.village1 #map_details table thead th,
  #content.village1 #map_details #production thead th::before {
    font: 13.5px/20px -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI", Roboto, "Geeza Pro", Tahoma, Arial, sans-serif !important; font-weight: 600 !important; color: #000 !important;
    padding: 0 !important; text-align: right !important; white-space: nowrap; background: none !important; border: 0 !important; }
  #content.village1 #map_details #production thead th { font-size: 0 !important; }
  #content.village1 #map_details table tbody td,
  #content.village1 #map_details #production td.num,
  #content.village1 #map_details #troops td.num {
    font: 14px/20px -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI", Roboto, "Geeza Pro", Tahoma, Arial, sans-serif !important; font-weight: 600 !important; color: #000 !important;
    padding: 0 !important; height: auto !important; border: 0 !important; background: none !important; vertical-align: middle; }
  #content.village1 #map_details #production td.ico,
  #content.village1 #map_details #troops td.ico { width: 20px !important; padding: 0 0 0 7px !important; text-align: right; line-height: 0 !important; }
  #content.village1 #map_details td.ico img { vertical-align: middle; margin: 0 !important; }
  #content.village1 #map_details #production td.num,
  #content.village1 #map_details #troops td.num { text-align: right !important; direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums; width: auto !important; }
  /* تحركات القوات: الأيقونة والعدد بسطر، والوقت تحته */
  #content.village1 #map_details table#movements td.typ > span.a1 { display: none !important; }   /* بدون » مثل زمن التتار */
  #content.village1 #map_details table#movements td.typ { width: 26px !important; padding-left: 4px !important; white-space: nowrap; vertical-align: top; padding-top: 1px !important; }
  #content.village1 #map_details table#movements td.typ img { float: none !important; position: static !important; margin: 0 0 0 2px !important; vertical-align: middle; }
  #content.village1 #map_details table#movements div.mov,
  #content.village1 #map_details table#movements div.dur_r { float: none !important; text-align: right; padding: 0 !important; }
  #content.village1 #map_details table#movements div.dur_r { white-space: nowrap; }
  #content.village1 #map_details table#movements div.mov, #content.village1 #map_details table#movements div.mov span { font-weight: normal !important; }
}
@media (max-width: 379px) {
  #content.village1 #map_details table tbody td,
  #content.village1 #map_details #production td.num,
  #content.village1 #map_details #troops td.num,
  #content.village1 #map_details #movements thead th, #content.village1 #map_details #troops thead th,
  #content.village1 #map_details #production thead th::before { font-size: 12.5px !important; }
  #content.village1 #map_details #production td.ico, #content.village1 #map_details #troops td.ico { padding-left: 5px !important; }
}

/* ===== v55: صفحة الحقول بشبكة ثابتة (Grid) بدل float =====
   الخريطة دايماً يمين والعمود دايماً يسارها بنفس السطر مهما كبرت الأرقام أو صار فيه هجوم/تعزيز،
   على كل مقاسات الجوال والتابلت. العمود ياخذ باقي العرض (minmax(0,1fr)) فما يقدر يدف نفسه تحت. */
@media (max-width: 820px) {
  #content.village1 { display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; column-gap: 6px !important; align-items: start !important; }
  #content.village1 > * { grid-column: 1 / -1; min-width: 0; }
  #content.village1 > #village_map { grid-column: 1 !important; grid-row: auto; float: none !important; margin: 0 0 8px !important; justify-self: start; }
  #content.village1 > #map_details { grid-column: 2 !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; align-self: start; }
  /* الأرقام الكبيرة جداً (ملايين) تصغر شوي بدل ما تطلع برا العمود */
  #content.village1 #map_details table#movements div.dur_r { white-space: normal !important; }
  #content.village1 #map_details table { table-layout: auto; }
}
@media (max-width: 379px) {
  #content.village1 > #map_details table#movements div.dur_r { font-size: 11px !important; letter-spacing: -.2px; }
}

/* ===== Optimization V2: resource bar stability only (no visual redesign) =====
   Mirrors the existing mobile resource layout using fixed cell positions so a browser
   reflow cannot move one resource to a second line. Existing colors/sizes/images stay unchanged. */
@media (max-width: 820px) {
  #resWrap tr.res {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-flow: column !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #resWrap tr.res > td:nth-child(1),
  #resWrap tr.res > td:nth-child(2),
  #resWrap tr.res > td:nth-child(9),
  #resWrap tr.res > td:nth-child(10),
  #resWrap tr.res > td:nth-child(13),
  #resWrap tr.res > td:nth-child(14) { display: none !important; }

  #resWrap tr.res > td:nth-child(3), #resWrap #l4 { grid-column: 1 !important; grid-row: 1 !important; }
  #resWrap tr.res > td:nth-child(5), #resWrap #l3 { grid-column: 2 !important; grid-row: 1 !important; }
  #resWrap tr.res > td:nth-child(7), #resWrap #l2 { grid-column: 3 !important; grid-row: 1 !important; }
  #resWrap tr.res > td:nth-child(11), #resWrap #l1 { grid-column: 4 !important; grid-row: 1 !important; }

  #resWrap #l1, #resWrap #l2, #resWrap #l3, #resWrap #l4 {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
}

/* ===== v60: Small-phone captcha inline layout + logout stability ===== */
@media (max-width: 390px) {
  /* Keep logout visible next to gold on narrow phones. */
  body #mbar-out {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 30px !important;
    overflow: visible !important;
  }
  body #mbar-burger {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
  }
  body #mbar-gold {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  body #mbar-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  body #mbar-nav a, body #mbar-nav #mvil {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: clamp(11.5px, 3.55vw, 14px) !important;
  }

  /* Login / registration captcha: keep image + refresh + 3-digit input on ONE row. */
  #content.login #login_form:not(.info) tr.lcap-row,
  #content.signup #sign_input tr.rg-cap {
    align-items: center !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row > th,
  #content.signup #sign_input tr.rg-cap > th {
    width: 78px !important;
    min-width: 78px !important;
    font-size: 13px !important;
    padding-top: 0 !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row > td,
  #content.signup #sign_input tr.rg-cap > td {
    min-width: 0 !important;
    overflow: visible !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row .lcap,
  #content.signup #sign_input tr.rg-cap .lcap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    direction: rtl !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row .lcap img,
  #content.signup #sign_input tr.rg-cap .lcap img {
    flex: 0 1 112px !important;
    width: 112px !important;
    max-width: 112px !important;
    min-width: 96px !important;
    height: 44px !important;
    object-fit: fill !important;
    box-sizing: border-box !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row .lcap .lcap-re,
  #content.signup #sign_input tr.rg-cap .lcap .lcap-re {
    flex: 0 0 31px !important;
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    margin: 0 !important;
    font-size: 17px !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row .lcap input.text,
  #content.signup #sign_input tr.rg-cap .lcap input.text {
    flex: 0 1 66px !important;
    width: 66px !important;
    max-width: 66px !important;
    min-width: 54px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    letter-spacing: 5px !important;
    font-size: 17px !important;
    line-height: 38px !important;
    text-align: center !important;
    direction: ltr !important;
  }
}

/* Extra-tight phones: shrink only the captcha controls, never stack them. */
@media (max-width: 335px) {
  #content.login #login_form:not(.info) tr.lcap-row > th,
  #content.signup #sign_input tr.rg-cap > th {
    width: 70px !important;
    min-width: 70px !important;
    font-size: 12px !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row .lcap,
  #content.signup #sign_input tr.rg-cap .lcap {
    gap: 3px !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row .lcap img,
  #content.signup #sign_input tr.rg-cap .lcap img {
    flex-basis: 98px !important;
    width: 98px !important;
    max-width: 98px !important;
    min-width: 90px !important;
    height: 42px !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row .lcap .lcap-re,
  #content.signup #sign_input tr.rg-cap .lcap .lcap-re {
    flex-basis: 29px !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
  }
  #content.login #login_form:not(.info) tr.lcap-row .lcap input.text,
  #content.signup #sign_input tr.rg-cap .lcap input.text {
    flex-basis: 56px !important;
    width: 56px !important;
    max-width: 56px !important;
    min-width: 48px !important;
    height: 36px !important;
    padding: 0 3px !important;
    letter-spacing: 3px !important;
    font-size: 16px !important;
    line-height: 36px !important;
  }
  body #mbar-nav a, body #mbar-nav #mvil {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 11.5px !important;
  }
  body #mbar-out { flex-basis: 26px !important; width: 26px !important; min-width: 26px !important; }
}

/* Logout power symbol drawn with CSS so older Android fonts cannot hide it. */
@media (max-width: 820px) {
  body #mbar-out {
    position: relative !important;
    font-size: 0 !important;
    color: #444 !important;
  }
  body #mbar-out::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 17px !important;
    height: 17px !important;
    box-sizing: border-box !important;
    border: 2px solid #444 !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    transform: translate(-50%, -43%) !important;
  }
  body #mbar-out::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 6px !important;
    width: 2px !important;
    height: 10px !important;
    border-radius: 2px !important;
    background: #444 !important;
    transform: translateX(-50%) !important;
  }
}