/* START mobile prelogin pages support - Harb Altatar */
@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    direction: rtl !important;
    text-align: right !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img {
    max-width: 100%;
  }

  #dynamic_header,
  #header,
  #footer,
  #content,
  .content,
  .wrapper,
  #wrapper {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #dynamic_header,
  #header {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    background-position: center top !important;
    background-size: auto 100% !important;
  }

  #content,
  #content.login,
  #content.anmelden,
  .login,
  .anmelden {
    float: none !important;
    clear: both !important;
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: 760px !important;
    margin: 10px auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  table,
  tbody,
  thead,
  tfoot,
  tr,
  td,
  th {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #login_form,
  #content.login table,
  #content.anmelden table,
  form table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  #login_form td,
  #login_form th,
  #content.login td,
  #content.login th,
  #content.anmelden td,
  #content.anmelden th {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  input.text,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    direction: rtl !important;
    text-align: right !important;
  }

  button,
  .trav_buttons,
  #btn_login,
  #btn_signup {
    max-width: 100% !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .error,
  .important {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #navigation,
  table.menu {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #register_now {
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .overlay,
  #login_layer {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .overlay_content,
  #login_list {
    width: calc(100% - 20px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    left: 10px !important;
    right: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 520px) {
  #content,
  #content.login,
  #content.anmelden {
    width: calc(100% - 12px) !important;
    margin: 6px auto !important;
    padding: 8px !important;
  }

  #login_form,
  #login_form tbody,
  #login_form tr,
  #login_form td,
  #login_form th,
  #content.login form table,
  #content.login form tbody,
  #content.login form tr,
  #content.login form td,
  #content.login form th,
  #content.anmelden form table,
  #content.anmelden form tbody,
  #content.anmelden form tr,
  #content.anmelden form td,
  #content.anmelden form th {
    display: block !important;
    width: 100% !important;
  }

  #login_form td,
  #login_form th,
  #content.login form td,
  #content.login form th,
  #content.anmelden form td,
  #content.anmelden form th {
    padding: 4px 0 !important;
    text-align: right !important;
  }

  .trav_buttons,
  #btn_login,
  #btn_signup {
    width: 100% !important;
    display: block !important;
    margin: 8px 0 !important;
  }
}
/* END mobile prelogin pages support - Harb Altatar */






/* START clean mobile outgame login/signup layout v6 */
@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    direction: rtl !important;
    background: #fff !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  #dynamic_header,
  #header {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    float: none !important;
    clear: both !important;
    background-position: center top !important;
    background-size: auto 118px !important;
  }

  /* نمنع أي أعمدة قديمة في صفحات الخارج */
  body:has(#content.login) #mid,
  body:has(#content.login) #main,
  body:has(#content.login) #wrapper,
  body:has(#content.login) .wrapper,
  body:has(#content.signup) #mid,
  body:has(#content.signup) #main,
  body:has(#content.signup) #wrapper,
  body:has(#content.signup) .wrapper {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
  }

  /* المحتوى الرئيسي: دخول + تسجيل */
  #content.login,
  #content.signup {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: 720px !important;
    margin: 28px auto 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    border: 0 !important;
    text-align: right !important;
  }

  #content.login h1,
  #content.signup h1 {
    display: block !important;
    text-align: center !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }

  #content.login h5,
  #content.signup h5 {
    display: block !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }

  #content.login p,
  #content.signup p {
    text-align: center !important;
    line-height: 1.8 !important;
    margin: 8px auto 18px auto !important;
    padding: 0 !important;
    max-width: 96% !important;
  }

  #content.login form,
  #content.signup form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
  }

  #content.login form table,
  #content.signup form table,
  #login_form {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto 18px auto !important;
    padding: 14px !important;
    border: 1px dashed #d3d3d3 !important;
    background: #fff !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
  }

  /* جدول الحقول يتحول لعمود واحد */
  #content.login form table tr,
  #content.signup form table tr,
  #login_form tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  #content.login form table td,
  #content.login form table th,
  #content.signup form table td,
  #content.signup form table th,
  #login_form td,
  #login_form th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 6px 0 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #content.login input.text,
  #content.login input[type="text"],
  #content.login input[type="password"],
  #content.signup input.text,
  #content.signup input[type="text"],
  #content.signup input[type="password"],
  #content.signup input[type="email"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    line-height: 42px !important;
    margin: 4px 0 10px 0 !important;
    padding: 6px 10px !important;
    border: 1px solid #8bc34a !important;
    border-radius: 5px !important;
    background: #fff !important;
    font-size: 16px !important;
    direction: rtl !important;
    text-align: right !important;
  }

  #content.login input[type="radio"],
  #content.login input[type="checkbox"],
  #content.signup input[type="radio"],
  #content.signup input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 6px !important;
    vertical-align: middle !important;
  }

  #btn_login,
  #btn_signup,
  #content.login button,
  #content.signup button {
    display: block !important;
    width: 72% !important;
    max-width: 420px !important;
    min-width: 220px !important;
    height: 46px !important;
    line-height: 44px !important;
    margin: 18px auto !important;
    padding: 0 14px !important;
    border: 1px solid #8bc34a !important;
    border-radius: 23px !important;
    background: linear-gradient(#fff, #e2e2e2) !important;
    color: #111 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
  }

  /* أهم جزء: صناديق الأخبار/معلومات السيرفر تنزل تحت المحتوى */
  #side_info.outgame,
  #side_info {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: 720px !important;
    margin: 24px auto 18px auto !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: right !important;
  }

  #side_info.outgame table,
  #side_info table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #side_info.outgame img,
  #side_info img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* منع أي تموضع قديم يسحب الفورم يمين/يسار */
  #content.login *,
  #content.signup *,
  #side_info.outgame *,
  #side_info * {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  #dynamic_header,
  #header {
    height: 98px !important;
    min-height: 98px !important;
    max-height: 98px !important;
    background-size: auto 105px !important;
  }

  #content.login,
  #content.signup,
  #side_info.outgame,
  #side_info {
    width: calc(100% - 24px) !important;
  }

  #content.login form table,
  #content.signup form table,
  #login_form {
    padding: 12px !important;
  }

  #btn_login,
  #btn_signup,
  #content.login button,
  #content.signup button {
    width: 80% !important;
    min-width: 0 !important;
  }
}
/* END clean mobile outgame login/signup layout v6 */

/* START mobile outgame scroll + reference menu v7 */
@media (min-width: 901px) {
  .mobile-outgame-menu {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body {
    position: static !important;
  }

  #wrapper,
  .wrapper,
  #mid,
  #main,
  #center,
  #contentOuter,
  #content.login,
  #content.signup,
  #side_info,
  #side_info.outgame {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-outgame-menu {
    display: flex !important;
    direction: rtl !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 auto 0 auto !important;
    padding: 0 12px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: linear-gradient(#ffffff, #eeeeee) !important;
    border-top: 1px solid #e4e4e4 !important;
    border-bottom: 1px solid #cfcfcf !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.16) !important;
    box-sizing: border-box !important;
    clear: both !important;
  }

  .mobile-outgame-menu a {
    display: block !important;
    flex: 1 1 33.333% !important;
    height: 48px !important;
    line-height: 48px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: center !important;
    color: #222 !important;
    font-size: 17px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-left: 1px solid #dedede !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .mobile-outgame-menu a:first-child {
    border-left: 0 !important;
  }

  body:has(#content.login) .mobile-outgame-menu a[href="login.php"],
  body:has(#content.signup) .mobile-outgame-menu a[href="anmelden.php"] {
    background: linear-gradient(#f7f7f7, #e1e1e1) !important;
    color: #000 !important;
  }

  /* نخفي منيو الكمبيوتر إن كان يسبب تكرار أو تزاحم في الجوال */
  body:has(#content.login) table.menu:not(.mobile-outgame-menu),
  body:has(#content.signup) table.menu:not(.mobile-outgame-menu) {
    display: none !important;
  }

  /* تقليل الفراغ بين الهيدر والمنيو والمحتوى */
  #content.login,
  #content.signup {
    margin-top: 24px !important;
  }

  /* ضمان أن آخر صناديق الأخبار تظهر كاملة مع مساحة أسفل الصفحة */
  #side_info.outgame,
  #side_info {
    margin-bottom: 80px !important;
  }
}

@media (max-width: 520px) {
  .mobile-outgame-menu {
    height: 46px !important;
    padding: 0 8px !important;
  }

  .mobile-outgame-menu a {
    height: 46px !important;
    line-height: 46px !important;
    font-size: 16px !important;
  }
}
/* END mobile outgame scroll + reference menu v7 */












/* START signup tribe/location split mobile v14 */
@media (min-width: 901px) {
  .mobile-signup-choice-wrap {
    display: none !important;
  }
}

@media (max-width: 900px) {
  #content.signup .mobile-original-radio-table-hidden {
    display: none !important;
  }

  #content.signup .mobile-signup-choice-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 18px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #content.signup .mobile-signup-choice-box {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 18px auto !important;
    padding: 18px 20px !important;
    border: 1px dashed #d3d3d3 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  #content.signup .mobile-signup-choice-box h3 {
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    color: #74b84a !important;
    font-size: 22px !important;
    font-weight: bold !important;
    text-align: right !important;
    line-height: 1.4 !important;
  }

  #content.signup .mobile-signup-choice-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 10px 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #dedede !important;
    border-radius: 6px !important;
    background: linear-gradient(#ffffff, #fafafa) !important;
    color: #222 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  #content.signup .mobile-signup-choice-row input[type="radio"] {
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
  }

  #content.signup .mobile-signup-choice-row span {
    display: block !important;
    flex: 1 1 auto !important;
    text-align: right !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #222 !important;
  }

  #content.signup .mobile-signup-choice-row:has(input[type="radio"]:checked) {
    border-color: #9ccc65 !important;
    background: linear-gradient(#ffffff, #f4faed) !important;
    box-shadow: inset 0 0 0 1px rgba(139,195,74,.25) !important;
  }
}

@media (max-width: 520px) {
  #content.signup .mobile-signup-choice-box {
    padding: 16px 14px !important;
  }

  #content.signup .mobile-signup-choice-box h3 {
    font-size: 21px !important;
  }

  #content.signup .mobile-signup-choice-row {
    min-height: 46px !important;
    padding: 9px 10px !important;
  }

  #content.signup .mobile-signup-choice-row span {
    font-size: 17px !important;
  }
}
/* END signup tribe/location split mobile v14 */


/* START mobile footer only gray desktop-like v15 */
@media (max-width: 900px) {
  #footer {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;

    margin: 34px auto 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;

    direction: rtl !important;
    text-align: center !important;

    background: linear-gradient(#eeeeee, #d9d9d9) !important;
    border-top: 1px solid #c7c7c7 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
    box-sizing: border-box !important;
  }

  #footer #mfoot {
    display: block !important;
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 16px 10px 14px 10px !important;
    overflow: visible !important;

    background: transparent !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #footer .footer-menu {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }

  #footer center {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #footer br {
    display: none !important;
  }

  #footer .copyright {
    display: block !important;
    width: 100% !important;
    margin: 2px auto !important;
    padding: 0 !important;

    line-height: 1.7 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #666 !important;
    white-space: normal !important;
  }

  #footer a {
    color: #5fa51a !important;
    text-decoration: none !important;
    font-weight: bold !important;
  }

  #footer font[color="Red"],
  #footer font[color="red"] {
    color: #d00 !important;
  }

  #footer #cfoot {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    height: 1px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 520px) {
  #footer {
    min-height: 60px !important;
    margin-top: 30px !important;
  }

  #footer #mfoot {
    padding: 15px 8px 13px 8px !important;
  }

  #footer .copyright {
    font-size: 12px !important;
  }
}
/* END mobile footer only gray desktop-like v15 */












/* START homepage original desktop assets mobile v6 */
@media (max-width: 900px) {
  body.indexPage {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #fff !important;
    direction: rtl !important;
    text-align: right !important;
  }

  body.indexPage * {
    box-sizing: border-box !important;
  }

  body.indexPage .wrapper {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #fff !important;
  }

  body.indexPage #country_select {
    display: none !important;
  }

  /*
   * صورة الكمبيوتر الأصلية:
   * gpack/travian/main_ar.css يستخدم images/artwork.png
   */
  body.indexPage #header {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 610px !important;
    min-height: 610px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent url("/gpack/travian/images/artwork.png") no-repeat center top !important;
    background-size: auto 610px !important;
  }

  body.indexPage #header h1 {
    display: none !important;
  }

  /*
   * منيو الجوال فوق صورة الرئيسية مثل المرجع.
   */
  body.indexPage #navigation {
    position: absolute !important;
    top: 340px !important;
    left: 5% !important;
    right: 5% !important;
    z-index: 5 !important;

    display: block !important;
    width: 90% !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;

    background: linear-gradient(#ffffff, #eeeeee) !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 28px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.25) !important;
  }

  body.indexPage #navigation a.home {
    display: none !important;
  }

  body.indexPage #navigation table.menu {
    display: table !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    background: transparent !important;
  }

  body.indexPage #navigation table.menu tr {
    display: table-row !important;
  }

  body.indexPage #navigation table.menu td {
    display: table-cell !important;
    width: 33.333% !important;
    height: 56px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-left: 1px solid #ddd !important;
    white-space: nowrap !important;
  }

  body.indexPage #navigation table.menu td:first-child {
    border-left: 0 !important;
  }

  body.indexPage #navigation table.menu a,
  body.indexPage #navigation table.menu a span {
    display: block !important;
    height: 56px !important;
    line-height: 56px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    color: #111 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  body.indexPage #t4play,
  body.indexPage #register_now {
    display: none !important;
  }

  /*
   * محتوى الرئيسية بعد الصورة.
   */
  body.indexPage #content {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 36px 0 0 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body.indexPage #content .grit {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.indexPage #content .infobox,
  body.indexPage #content .secondarybox {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.indexPage #what_is_travian {
    display: block !important;
    width: calc(100% - 28px) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body.indexPage #what_is_travian h2,
  body.indexPage #what_is_travian h1 {
    margin: 0 auto 28px auto !important;
    padding: 0 !important;
    color: #000 !important;
    font-size: 50px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    text-align: center !important;
    background: transparent !important;
  }

  body.indexPage #what_is_travian p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 18px auto !important;
    padding: 0 !important;
    color: #111 !important;
    font-size: 24px !important;
    line-height: 1.8 !important;
    text-align: center !important;
  }

  body.indexPage #what_is_travian .play_now {
    display: none !important;
  }

  body.indexPage #player_counter {
    display: none !important;
  }

  body.indexPage #about_the_game {
    display: block !important;
    width: calc(100% - 28px) !important;
    max-width: 720px !important;
    margin: 20px auto 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: right !important;
  }

  body.indexPage #about_the_game h2,
  body.indexPage #about_the_game h3 {
    text-align: right !important;
    font-size: 24px !important;
    line-height: 1.6 !important;
    margin: 0 0 12px 0 !important;
  }

  body.indexPage #about_the_game p,
  body.indexPage #about_the_game li {
    font-size: 18px !important;
    line-height: 1.8 !important;
    text-align: right !important;
  }

  /*
   * لقطات الشاشة أسفل المحتوى بشكل مضبوط.
   */
  body.indexPage #screenshots {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    width: calc(100% - 28px) !important;
    max-width: 720px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 170px !important;
    margin: 30px auto 18px auto !important;
    padding: 16px 42px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #555 !important;
  }

  body.indexPage #screenshots h2 {
    display: block !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 20px !important;
    text-align: right !important;
    background: transparent !important;
  }

  body.indexPage #screenshots_preview {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
  }

  body.indexPage #screenshot_list {
    display: block !important;
    width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  body.indexPage #screenshot_list li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 6px !important;
    padding: 0 !important;
    vertical-align: middle !important;
  }

  body.indexPage #screenshot_list img {
    display: block !important;
    width: 130px !important;
    max-width: 130px !important;
    height: auto !important;
    margin: 0 !important;
  }

  body.indexPage #screenshots .navi {
    position: absolute !important;
    top: 84px !important;
    z-index: 3 !important;
  }

  body.indexPage #screenshots .navi.prev {
    right: 10px !important;
  }

  body.indexPage #screenshots .navi.next {
    left: 10px !important;
  }

  body.indexPage #newsbox {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: calc(100% - 28px) !important;
    max-width: 720px !important;
    margin: 18px auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.indexPage #footer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 28px !important;
    overflow: visible !important;
  }
}

@media (max-width: 520px) {
  body.indexPage #header {
    height: 585px !important;
    min-height: 585px !important;
    background-size: auto 585px !important;
    background-position: center top !important;
  }

  body.indexPage #navigation {
    top: 334px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 27px !important;
  }

  body.indexPage #navigation table.menu,
  body.indexPage #navigation table.menu td,
  body.indexPage #navigation table.menu a,
  body.indexPage #navigation table.menu a span {
    height: 54px !important;
    line-height: 54px !important;
  }

  body.indexPage #navigation table.menu a,
  body.indexPage #navigation table.menu a span {
    font-size: 18px !important;
  }

  body.indexPage #what_is_travian h2,
  body.indexPage #what_is_travian h1 {
    font-size: 44px !important;
  }

  body.indexPage #what_is_travian p {
    font-size: 22px !important;
  }

  body.indexPage #screenshots {
    width: calc(100% - 20px) !important;
    padding: 14px 38px !important;
  }

  body.indexPage #screenshot_list img {
    width: 118px !important;
    max-width: 118px !important;
  }
}
/* END homepage original desktop assets mobile v6 */


/* START homepage force show artwork and menu v7 */
@media (max-width: 900px) {
  body.indexPage {
    overflow-x: hidden !important;
    background: #fff !important;
  }

  body.indexPage .wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* إجبار صورة الرئيسية الأصلية على الظهور */
  body.indexPage #header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 585px !important;
    min-height: 585px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    background-color: #dceef4 !important;
    background-image: url("/gpack/travian/images/artwork.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: auto 585px !important;
  }

  body.indexPage #header h1 {
    display: none !important;
  }

  /* إجبار المنيو على الظهور فوق صورة الرئيسية */
  body.indexPage #navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    z-index: 9999 !important;
    top: 334px !important;
    left: 5% !important;
    right: 5% !important;

    width: 90% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;

    background: linear-gradient(#ffffff, #eeeeee) !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 27px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.25) !important;
  }

  body.indexPage #navigation a.home {
    display: none !important;
  }

  body.indexPage #navigation table.menu,
  body.indexPage #navigation table.menu tbody,
  body.indexPage #navigation table.menu tr {
    display: table !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    background: transparent !important;
  }

  body.indexPage #navigation table.menu tr {
    display: table-row !important;
  }

  body.indexPage #navigation table.menu td {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 33.333% !important;
    height: 54px !important;
    line-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
    border-left: 1px solid #ddd !important;
    white-space: nowrap !important;
  }

  body.indexPage #navigation table.menu td:first-child {
    border-left: 0 !important;
  }

  body.indexPage #navigation table.menu a,
  body.indexPage #navigation table.menu a span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 54px !important;
    line-height: 54px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
    color: #111 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body.indexPage #content {
    position: relative !important;
    z-index: 2 !important;
  }
}
/* END homepage force show artwork and menu v7 */





/* START homepage mobile clean menu final */
@media (min-width: 901px) {
  .home-mobile-clean-menu {
    display: none !important;
  }
}

@media (max-width: 900px) {
  /*
   * نخفي منيو الكمبيوتر الأصلي في الرئيسية فقط.
   */
  body.indexPage #navigation {
    display: none !important;
  }

  body.indexPage #header {
    position: relative !important;
    overflow: hidden !important;
  }

  /*
   * منيو جوال مستقل، لا يتأثر بـ table.menu ولا sprites.
   */
  body.indexPage .home-mobile-clean-menu {
    position: absolute !important;
    z-index: 999999 !important;

    top: 334px !important;
    left: 5% !important;
    right: 5% !important;

    display: flex !important;
    width: 90% !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    direction: rtl !important;
    align-items: center !important;
    justify-content: center !important;

    background: linear-gradient(#ffffff, #eeeeee) !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 28px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.25) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.indexPage .home-mobile-clean-menu a {
    display: block !important;
    flex: 1 1 33.333% !important;

    height: 56px !important;
    line-height: 56px !important;

    margin: 0 !important;
    padding: 0 4px !important;

    color: #111 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;

    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid #ddd !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
  }

  body.indexPage .home-mobile-clean-menu a:first-child {
    border-left: 0 !important;
  }
}

@media (max-width: 520px) {
  body.indexPage .home-mobile-clean-menu {
    top: 334px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 27px !important;
  }

  body.indexPage .home-mobile-clean-menu a {
    height: 54px !important;
    line-height: 54px !important;
    font-size: 17px !important;
  }
}
/* END homepage mobile clean menu final */


/* START homepage mobile screenshots slider v10 */
@media (max-width: 900px) {
  body.indexPage #screenshots.mobile-screenshots-slider-ready {
    position: relative !important;
    overflow: hidden !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready #screenshots_preview {
    width: 100% !important;
    overflow: hidden !important;
    direction: ltr !important;
    text-align: left !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready #screenshot_list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transform: translateX(0) !important;
    will-change: transform !important;
    direction: ltr !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready #screenshot_list li {
    display: block !important;
    float: none !important;
    flex: 0 0 calc((100vw - 28px - 84px - 10px) / 2) !important;
    width: calc((100vw - 28px - 84px - 10px) / 2) !important;
    max-width: 140px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready #screenshot_list img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready .navi {
    position: absolute !important;
    top: 58% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
    background: rgba(255,255,255,.9) !important;
    color: #222 !important;
    text-decoration: none !important;
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 30px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready .navi.prev {
    right: 8px !important;
    left: auto !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready .navi.next {
    left: 8px !important;
    right: auto !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready .navi.disabled {
    opacity: .45 !important;
  }
}

@media (max-width: 520px) {
  body.indexPage #screenshots.mobile-screenshots-slider-ready #screenshot_list li {
    flex: 0 0 calc((100vw - 20px - 76px - 10px) / 2) !important;
    width: calc((100vw - 20px - 76px - 10px) / 2) !important;
    max-width: 126px !important;
  }

  body.indexPage #screenshots.mobile-screenshots-slider-ready .navi {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 17px !important;
  }
}
/* END homepage mobile screenshots slider v10 */