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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

  /* حشو لمنع الـ UBar من تغطية المحتوى — فقط حين #UBar موجود فعلاً (اللاعب
     المسجَّل). صفحات الضيوف (login/signup/...) بلا #UBar إطلاقاً، فيتحوّل
     هذا الحشو لـ36px فراغ صرف أعلى الصفحة (جزء من مشكلة "فراغ كبير بالجوال"). */
  .wrapper { padding-top: 36px !important; }
  .wrapper:not(:has(#UBar)) { padding-top: 0 !important; }

  /* أثر جانبي للإصلاح أعلاه (خط أخضر أفقي ظهر أسفل صورة الغلاف مباشرة):
     #header شفاف تماماً (background-image:none من new_images.css، بلا
     background-color) فيكشف عمّا خلفه — خلفية .wrapper نفسها
     (header_background.jpg: سماء زرقاء ثم شريط أخضر ثم أبيض/رمادي،
     مثبَّتة بأعلى .wrapper بصرف النظر عن padding). قبل إصلاح padding-top،
     كان #dynamic_header (مُعتم) يغطي بالضبط شريحة الصورة الخضراء هذه؛
     بعد إزالة الحشو 36px، انزاح مربع #dynamic_header لأعلى فكشف
     #header الشفاف عن الشريط الأخضر بدل الجزء الأبيض الذي كان يكشفه
     سابقاً (تحقَّق بأخذ عيّنات ألوان فعلية بكسل-ببكسل، لا تخمين).
     الإصلاح: خلفية بيضاء صريحة لـ#header بصفحات الضيوف فقط (نفس نطاق
     :not(:has(#UBar)) أعلاه) — لا يمسّ #header بصفحات اللعب إطلاقاً. */
  .wrapper:not(:has(#UBar)) #header { background: #FFFFFF !important; }

  /* تقليص الفراغ العمودي أعلى صندوق تسجيل الدخول بالجوال تحديداً */
  #content.login h1 {
    height: 32px !important;
    margin-bottom: 4px !important;
  }
  #content.login h1 img.img_login {
    width: 250px !important;
    height: 32px !important;
    background-size: contain !important;
  }
  #content.login h5 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  #content.login p {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* إخفاء القوائم الجانبية القديمة على الجوال (اللعبة داخل الحساب، لها بديل
     UBar/bottomNav). لا يشمل side_navi.outgame — شريط ضيوف تسجيل الدخول/
     التسجيل الجديد (لا بديل آخر له على الجوال، فيبقى ظاهراً، انظر أسفل) */
  div#side_navi:not(.outgame), div#side_info { display: none !important; }

  /* شريط تنقّل الضيوف الأفقي (login/signup/activate/logout) على الجوال —
     نفس شريط سطح المكتب (compact.css) لكن بخط/حشو أصغر يناسب 390px */
  div#side_navi.outgame {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }
  div#side_navi.outgame p a {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* صندوق تسجيل الدخول + قسم البيانات أسفله: الصندوق لا يلتصق بحافة الشاشة
     (div.login كان width:502px ثابتاً يفرض تمريراً أفقياً؛ #content يتكفّل
     بعرض 99% أصلاً، هنا فقط نضمن أن الجدول يتبع نفس العرض) */
  div.login, div.signup, div.logout {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  div.login table#login_form {
    width: 100% !important;
  }
  /* ملاحظة: عرض الحقل input.text (160px) يأتي من compact.css (قاعدة
     مشتركة سطح مكتب/جوال بلا @media، حسب طلب المهمة) — لا يُعاد تعريفه
     هنا. نسخة سابقة من هذه القاعدة فرضت width:100% على الحقل فامتد شبه
     كامل عرض الشاشة (مخالف تماماً لمرجع utatar.com) — أُزيلت بالكامل. */
  div#login_stats table {
    font-size: 12px !important;
  }
  div#login_stats th, div#login_stats td {
    padding: 4px 6px !important;
  }

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

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

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

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

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

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

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

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

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

  /* عمودان جنباً إلى جنب: DivVillage1 (تحركات+إنتاج) وDivVillage2 (قوات) —
     مرحلة 1 من إعادة تصميم dorf1، تحل محل تجميع #prod_troops_wrap القديم
     (كان يجمع الإنتاج+القوات معاً تاركاً التحركات وحدها فوقهما). */
  div.village1 div#map_details {
    float: unset !important;
    display: flex;
    justify-content: space-between;
    width: 75% !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    margin-left: calc(12.5% + 5ch) !important;
    margin-right: calc(12.5% - 5ch) !important;
  }
  /* ضبط دقيق مستقل لكل عمود فوق إزاحة #map_details أعلاه — قيم قابلة
     للتعديل مباشرة (6ch/8ch) بلا حاجة لإعادة تشخيص. */
  div.village1 .DivVillage1 {
      margin-right: -6ch !important;
  }
  div.village1 .DivVillage2 {
      margin-left: -8ch !important;
  }

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

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

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

  /* إصلاح فيض جدول مبادلة NPC بالجوال (كان بلا أي قاعدة جوال إطلاقاً) —
     نفس نمط .heroesTableWrap/.farmTableWrap بالجوال: تأكيد overflow-x
     صريح + تصغير الحشو/الخط لتقليل احتمال الفيض أصلاً على 390px. */
  div#build.gid17 .npcTableWrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  div#build.gid17 table#npc th, div#build.gid17 table#npc td {
    padding: 2px 4px !important;
    font-size: 11px !important;
  }

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

}


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

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

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

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

  /* إصلاح فائض عرض الصفحة من div#res (2026-07-11، الخيار أ المتَّفق عليه).
     السبب الجذري: new_layout_ltr.css (مُحمَّل مرتين عبر lang.css، آخر
     التتالي) يفرض div#res{width:100%} متغلّباً على compact.css(552px)،
     بينما rtl.css يفرض left:130px!important — فينتج صندوق بعرض كامل
     يبدأ مُزاحاً 130px → right:1410 > 1280 → سكرول أفقي. الحل: إعادة
     الصندوق لـleft:0 (تصميم new_layout الأصلي: left:0+width:100%=بلا
     فائض)، وتعويض إزاحة الأشرطة المرئية على #resWrap (margin-left من
     -335 إلى -205، الفرق 130) فتبقى بموضعها الصحيح فوق #content بالضبط
     على كل عرض سطح مكتب. مقيَّد بسطح المكتب حصراً (الجوال له كتلته). */
  div#res     { left: 0 !important; min-width: 0 !important; }
  div#resWrap { margin-left: -205px !important; }
}


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

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

/* ===== جدول ترتيب الأبطال (heroes.tpl) — 8 أعمدة، تصغير على الجوال — 2026-07-06 =====
   تحديث 2026-07-07: أُزيل table-layout:fixed + كل عرض ثابت/قص للاسم (كانا
   يجبران عمود اسم البطل على عرض حرفي واحد بعرض 390px) — الجدول الآن auto
   layout (كما بـcompact.css) فيتوزّع حسب المحتوى الفعلي، والحاوية
   heroesTableWrap توفّر سكرول أفقي (overflow-x:auto) بدل قص/التفاف أي عمود. */
@media screen and (max-width: 768px) {
  div.heroesTableWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  div.statistics table#heroes th,
  div.statistics table#heroes td {
    /* 2px عمودياً كما طُلب حرفياً؛ الجانبي خُفِّض لـ1px عمداً (بدل 2px
       الكاملة) كإجراء وقائي استباقي — 15px بدل 10px عبر 8 أعمدة بعرض
       390px يترك هامشاً ضيقاً جداً، وهذا أحد الحلين المقترَحين صراحة
       بالمهمة عند خطر كسر التخطيط (تصغير الحشو الجانبي)، طُبِّق مسبقاً
       بدل الانتظار لكسر فعلي يتعذّر رصده بلا متصفح حقيقي بهذه البيئة */
    padding: 2px 1px !important;
    font-size: 15px !important;
    white-space: nowrap;
  }
  #xpTooltipBox {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}

/* #map_coords (karte.php/karte2.php) relocated 2026-07-08 to be a sibling of
   #map instead of a descendant. As a plain block div under div#content
   (width:100% on mobile per the rule above), it stretches to the full row
   width and the x/y input.text fields default to filling that container -
   pin their width explicitly so they stay compact instead of full-width. */
@media screen and (max-width: 768px) {
  /* 2026-07-09: split into two stacked rows (coord form / crop-finder +
     relocated large-map icon), same reasoning as compact.css - #map_coords
     is a flex COLUMN of two right-aligned rows, not one row with everything
     crammed in. */
  div#map_coords {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    direction: ltr !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    margin: 6px 0 0 !important;
    box-sizing: border-box !important;
  }
  div#map_coords form {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    direction: ltr !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  div#map_coords_extra {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    direction: ltr !important;
    gap: 8px !important;
  }
  div#map_coords span {
    flex: none !important;
    white-space: nowrap !important;
  }
  div#map_coords input.text {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
  }
  div#map_coords input#btn_ok {
    flex: 0 0 auto !important;
  }
  div#map_coords_extra a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  /* relocated map_makelarge collapses to ~1x1px without this - it was only
     ever sized via div#map a#map_makelarge img in compact.css, which can no
     longer match now that the link lives in #map_coords_extra, not #map. */
  div#map_coords_extra a#map_makelarge img {
    width: 33px !important;
    height: 25px !important;
    display: block !important;
  }
}

/* ===== Farm List (utatar-style rebuild) — Phase 1 mobile, 2026-07-09 ===== */
@media screen and (max-width: 768px) {
    #content.build .farmTabs a { padding: 5px 10px; font-size: 12px; }
    #content.build .farmTabs { gap: 2px; }
    #content.build table.farmTable thead th,
    #content.build table.farmTable tbody td { padding: 4px 6px; font-size: 12px; }
    /* Fixed-width table can't fit 390px: scroll it, never wrap/clip. */
    #content.build .farmTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #content.build .farmPlaceholder { padding: 20px; }
}

/* ===== Farm List — Phase 2 mobile, 2026-07-10 ===== */
@media screen and (max-width: 768px) {
    #content.build table.farmTable input.flTin { width: 40px; font-size: 12px; }
    #content.build .farmActions { flex-wrap: wrap; gap: 6px; }
    #content.build .flCarryPanel { gap: 8px; font-size: 12px; }
    #content.build .farmResFail { display: block; margin: 4px 0 0; }
}

/* ===== Farm List — Phase 3/5 mobile (buy-slots tooltip control), 2026-07-10 ===== */
@media screen and (max-width: 768px) {
    #content.build .farmListTitle { line-height: 1.8; }
    /* Visual fix (2026-07-11): the "always inline on mobile" override below
       was removed — it made the bag/buy tooltip's numbers permanently
       visible on every row, widening the table enough to overflow at 390px.
       .Tit/.Text now stays tooltip-only (hover) on every viewport, same as
       desktop — most mobile browsers trigger :hover on tap for exactly this
       reason, so the info remains reachable without permanent screen space. */
    #content.build img.plusIcon { width: 14px; height: 14px; vertical-align: middle; }
}

/* ===== Farm List — Phase 4A/5 mobile (manual add-target form), 2026-07-10 ===== */
@media screen and (max-width: 768px) {
    #content.build .farmAddCoords { gap: 10px; padding: 6px 8px; font-size: 12px; }
    #content.build input.flCoordIn { width: 44px; font-size: 12px; }
    /* Side-by-side desktop layout doesn't fit 390px — stack troop list above coords. */
    #content.build .farmAddRow { flex-direction: column; gap: 10px; }
    #content.build .farmAddRow .farmAddTroops,
    #content.build .farmAddRow .farmAddCoords { flex: 1 1 auto; width: 100%; box-sizing: border-box; }
}

/* ===== Farm List — Phase 4B mobile ("بحث" search tab), 2026-07-10 ===== */
@media screen and (max-width: 768px) {
    /* Filter row + name row wrap; smaller fields so nothing overflows at 390px. */
    #content.build .farmSearchOpts { gap: 8px; font-size: 12px; }
    #content.build input.flNumIn { width: 64px; font-size: 12px; }
    #content.build input.flNameIn { width: 120px; font-size: 12px; }
    #content.build .farmStartCenter input.flCoordIn { width: 40px; font-size: 12px; }
    /* Results table can be long/wide → horizontal scroll, never crop or wrap.
       (.farmTableWrap already sets overflow-x:auto from Phase 1; reinforce nowrap.) */
    #content.build table.farmSearchResults thead th,
    #content.build table.farmSearchResults tbody td { white-space: nowrap; font-size: 12px; padding: 4px 6px; }
}

/* ===== Farm List — Phase 5 mobile (stacked troop list, sub-tabs), 2026-07-10 ===== */
@media screen and (max-width: 768px) {
    #content.build .farmTabs { font-size: 12px; }
    #content.build .flTroopRow { gap: 4px; padding: 4px 0; }
    #content.build .flTroopRow input.flTin { width: 48px; font-size: 12px; }
    #content.build .flTroopRow .flUnitName { font-size: 12px; }
}

/* ===== نقطة التجمع — جداول troop_details على الجوال (390px)، 2026-07-11 =====
   تصغير الحشو/الخط لتقليل الحاجة للسكرول الأفقي على الشاشات الضيقة؛
   .troopTableWrap (القاعدة الأساسية بـcompact.css) يبقى الضامن الأخير
   لمنع أي طفح فعلي عن الصفحة — تكرار overflow-x:auto هنا تأكيد صريح
   فقط (نفس اصطلاح .farmTableWrap/.heroesTableWrap بالمشروع). */
@media screen and (max-width: 768px) {
    div#build.gid16 .troopTableWrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    div#build.gid16 table.troop_details th,
    div#build.gid16 table.troop_details td {
        padding: 1px 3px;
        font-size: 11px;
    }
    div#build.gid16 table.troop_details tbody.units td {
        padding: 1px;
    }
}

/* ===== صفحة التقارير — جدول overview على الجوال (390px)، 2026-07-16 =====
   .reportsTableWrap (القاعدة الأساسية بـcompact.css) يمنع طفح مستوى الصفحة؛
   هنا نُصغّر td.dat (التاريخ/الوقت، كانت nowrap بعرض ~114px) بالسماح
   بالتفاف السطرين وخط أصغر، وnpad أقل بـtd.sel (checkbox فقط)، لتقليل
   الاعتماد على السكرول الأفقي داخل .reportsTableWrap. */
@media screen and (max-width: 768px) {
    /* auto table-layout inside an overflow-x:auto wrap has unconstrained
       width to grow into, so it never wraps cell content on its own —
       forcing width:100% makes it respect .reportsTableWrap's width and
       actually shrink td.dat/td.sel via wrapping below. */
    #content.reports table#overview {
        width: 100%;
    }
    #content.reports table#overview td.dat,
    #content.reports table#overview td.sel {
        width: 1%;
        white-space: nowrap;
    }
    #content.reports table#overview td.dat {
        font-size: 11px;
        padding: 3px 2px;
    }
    #content.reports table#overview td.sel {
        padding: 3px 2px;
    }
    /* auto table-layout won't shrink td.sub below its unwrapped max-content
       on its own (floated report-type icon inside throws off the min-content
       estimate) — an explicit cap forces the wrap that white-space:normal
       alone doesn't trigger. */
    #content.reports table#overview td.sub {
        max-width: 250px;
        overflow-wrap: break-word;
    }

    /* ===== الحداد (gid=12) — الصف المضغوط بعرض الجوال، Phase 4b (2026-07-17) =====
       بلا float بعرض ضيق (تراص عمودي بسيط)، ولفّ سطر الإحصاءات/الأزرار
       (techLine) كي لا يفيض عن 390px بدل التقطيع. */
    div#build div.buildActionOverview div.action div.details {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    div#build div.buildActionOverview div.action div.details div.tit {
        font-size: 13px !important;
    }
    div#build div.buildActionOverview div.action div.details div.showCosts {
        line-height: 20px !important;
        font-size: 12px !important;
    }
    div#build div.buildActionOverview div.action div.details div.showCosts .resources,
    div#build div.buildActionOverview div.action div.details div.showCosts .clocks {
        float: none !important;
    }
    div#build div.buildActionOverview div.action div.details div.techLine {
        flex-wrap: wrap !important;
        row-gap: 4px !important;
        column-gap: 6px !important;
    }
    div#build div.buildActionOverview div.action div.details div.techLine .statVal {
        font-size: 11px !important;
    }

    /* ===== صفحة عضوية اللاعب (div.player) — نفس مشكلة div.login: عرض
       ثابت 502px (+ padding) في compact.css يتجاوز عرض شاشة الجوال
       (390px) فيُخرج جدول table#profile عن الشاشة من جهة اليسار. نفس
       حل div.login أعلاه: نجعل الحاوية تتبع عرض #content الفعلي. */
    div.player {
        width: 100% !important;
        padding: 43px 10px 0 !important;
        box-sizing: border-box !important;
    }
    div.player table#profile {
        width: 100% !important;
        table-layout: fixed !important;
    }
    div.player table#profile td.details,
    div.player table#profile td.desc1,
    div.player table#profile thead td {
        width: 50% !important;
    }
    div.player table#profile td.details table {
        width: 100% !important;
    }
    /* بلا table-layout:fixed، جدول التفاصيل الداخلي (auto-layout) يحسب عرض
       صف الصورة (.Avtar) أحياناً بناءً على الحجم الطبيعي المُعاد ترميزه
       للصورة بدل حدود الحاوية 100%، فيفيض الصف عن عرض عمود td.details
       الفعلي (190px) رغم قاعدة width:100% أعلاه. fixed يجبر الجدول على
       الالتزام بعرضه المحدَّد بصرف النظر عن محتوى الخلايا. */
    div.player table#profile td.details table {
        table-layout: fixed !important;
    }
    div.player table#villages {
        width: 100% !important;
    }

    /* الصف الفاضي (5px) مباشرة تحت رأسي "التفاصيل"/"الوصف" — صف حقيقي
       بالـ HTML (td.empty) خاص بجدول#profile الخارجي فقط، وليس صف
       الفاصل الداخلي قبل "اكتب رسالة" (نفس الكلاس لكن سياق مختلف، لذلك
       التحديد هنا عبر > tbody > tr مباشرة ليصيب الخارجي فقط) */
    div.player table#profile > tbody > tr > td.empty {
        display: none !important;
    }

    /* إغلاق جدول التفاصيل بإطار كامل من كل الجهات — كان عنده فقط
       border-bottom لكل صف وborder-right بين عمودي (التسمية/القيمة)
       الداخليين، بلا أي حد يحيط الصندوق نفسه، فتبدو الأسطر "مفتوحة"
       عند طرفها الآخر. box-sizing:border-box يمنع الحد الجديد من
       إضافة 1px يتجاوز عرض الخلية (td.details) فينكشف/يُقتطع خلف
       الحاوية الأب (#content عندها overflow:hidden) */
    div.player table#profile td.details table {
        border: 1px solid #C0C0C0 !important;
        border-collapse: collapse !important;
        box-sizing: border-box !important;
    }

    /* صورة البروفايل (Avatar) — تمتد للعرض الكامل على الجوال بدل العرض
       الثابت 270px بسطح المكتب (يتجاوز 390px)، مع تثبيت الارتفاع والحد
       الأقصى للعرض كي لا تتمدد الصورة الرأسية بلا حدود. */
    .Avtar {
        width: 100% !important;
        height: 185px !important;
        max-width: 270px !important;
        max-height: 185px !important;
    }
}

@media screen and (max-width: 768px) {
    /* Hall of Fame — "Top" tab (statistiken.php?id=60): shrink the icon and
       tighten spacing so the icon+panel row never overflows a narrow phone
       viewport (single-column stacking itself is already the shared/desktop
       behavior via compact.css's flex-direction:column, not a mobile-only
       rule). */
    div#content.statistics div.hof-top {
        padding: 8px 10px;
        gap: 10px;
    }
    div#content.statistics div.hof-card {
        gap: 10px;
    }
    div#content.statistics div.hof-card img.hof-card-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
    div#content.statistics div.hof-card div.hof-card-body {
        padding: 8px 10px;
    }
    div#content.statistics div.hof-card div.hof-card-leader {
        font-size: 17px;
        line-height: 26px;
    }
    div#content.statistics div.hof-card div.hof-card-total {
        font-size: 15px;
        line-height: 20px;
    }
}

@media screen and (max-width: 768px) {
    /* Avatar lightbox (Phase 8) — slightly tighter box/padding so the
       close button and title stay comfortably tappable at 390px width,
       and the image never crowds the viewport edges. */
    #avatarLightboxBox {
        max-width: 94vw;
        padding: 30px 8px 8px;
    }
    #avatarLightboxImg {
        max-height: calc(90vh - 42px);
    }
}