@charset "utf-8";

/* Base mobile safety rules for legacy layout. */
html,
body {
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  touch-action: manipulation;
}

/* Start page: keep it readable on small screens. */
@media screen and (max-width: 860px) {
  #headback,
  #main,
  #footer {
    width: 100%;
    min-width: 0;
  }

  /*
   * Login landing: у landscape на мобільних браузерах (особливо з DevTools/translate overlays)
   * блоки main/footer інколи «пливуть» відносно банера. Фіксуємо єдиний центр і ширину.
   */
  body.ik-landing #main,
  body.ik-landing #footer {
    width: min(100%, 804px) !important;
    max-width: 804px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-position: center top !important;
  }

  /* Підтягнути орнамент main-bg5.jpg під низ банера (субпіксель / антиаліасинг). */
  body.ik-landing #main {
    margin-top: -2px;
  }
}

/* Landing (login/register): do not apply game-page body scroll hacks. */
@media screen and (max-width: 1100px) {
  body.ik-landing {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.ik-landing #headback {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  body.ik-landing #headlogo {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body.ik-landing #main {
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* Game page: фіксована ширина полотна (~980px), горизонтальний скрол на вузькому екрані. */
@media screen and (max-width: 1100px) {
  /* Скрол тільки на body — уникнути подвійного скролу html+body на деяких движках. */
  html:has(body:not(.ik-landing)) {
    overflow-x: visible;
    max-width: none;
  }

  body:not(.ik-landing) {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: none;
  }

  #container {
    min-width: 980px;
    width: 980px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #GF_toolbar ul {
    width: 980px;
    padding-left: 12px;
    box-sizing: border-box;
  }

  #cityNav .citySelect,
  #cityNav .citySelect .dropbutton,
  #cityNav .citySelect .optionList li {
    min-height: 25px;
    line-height: 25px;
  }
}

/*
 * Вузький екран: без zoom/scale на #container — повна ширина ~980px, горизонтальний скрол усього полотна.
 * Координати шапки/радників лишаються з ik_common (mobile.css не зсуває їх під масштаб).
 */
@media screen and (max-width: 980px) {
  /*
   * ik_common задає html,body height:100% — після змін #city #mainview інколи лишається «порожня» висота;
   * height:auto знімає розтягування сторінки понад контент.
   */
  html,
  body:not(.ik-landing) {
    height: auto !important;
    min-height: 0 !important;
  }

  body:not(.ik-landing) #container {
    zoom: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #header {
    /* Повна висота bg_header.jpg (336px); 140px обрізало арки й ламало візуал. */
    /* Горизонтальні margin як у ik_common (−132px) — збіг арок і абсолютних радників/навігації. */
    margin: 0 -132px -189px -132px;
    height: 336px;
    min-height: 336px;
    /* Як у ik_common: не center — інакше колонни на фоні з’їжджають відносно абсолютних радників. */
    background-position: left top;
  }

  /* Нативний select у шапці: компактніше для тач (позиція #cityNav з ik_common). */
  #container #cityNav select.citySelect {
    top: 7px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    line-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  #cityResources .resources li .tooltip {
    display: none !important;
  }

  /*
   * Сайдбар «Улучшить» (#buildingUpgrade): ik_common — ul overflow:hidden + li width:60px float.
   * З padding-left під іконки (ul.resources) контент не вміщується — іконки «зникають».
   */
  #container #buildingUpgrade .resources {
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
  }

  #container #buildingUpgrade .resources li {
    float: none !important;
    width: auto !important;
    min-width: 104px;
    min-height: 28px;
    line-height: 26px !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 4px 8px 4px 38px !important;
    background-repeat: no-repeat !important;
  }

  #container #buildingUpgrade .resources li.time {
    flex: 1 1 160px;
    min-width: 140px;
    text-align: left;
  }

  /*
   * Не чіпаємо глобально #mainview / .dynamic: сторінки радників (tradeAdvisor, militaryAdvisor…)
   * мають margin/padding з ik_common; глобальний reset ламав пергамент і сайдбар.
   * Місто/Острів/світ — окремі правила нижче.
   */
  /*
   * Місто/Острів: сайдбар лишається лівою колоною (float + inline як у ik_common).
   */
  #city #container .dynamic,
  #island #container .dynamic,
  #worldmap_iso #container .dynamic {
    float: left !important;
    display: inline !important;
    clear: none !important;
    width: 228px !important;
    margin: 2px 0 0 18px !important;
  }

  #city #container .dynamic {
    clear: left !important;
  }

  /* У вузькому сайдбарі кнопка «скасувати» була при left:190px — підтягуємо */
  #city #unitConstructionList .abortdiv {
    left: auto !important;
    right: 6px !important;
  }

  #city #unitConstructionList .currentUnit .time {
    left: auto !important;
    right: 6px !important;
  }

  /* Лише місто: на радниках/офісах contentBox має лишати ширини зі скінів. */
  #city #container #mainview .contentBox,
  #city #container #mainview .contentBox01,
  #city #container #mainview .contentBox01h,
  #city #container #mainview .contentBox03,
  #city #container #mainview .contentBox04h,
  #city #container #mainview .contentBox05h {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #city #container #mainview .contentBox div.content,
  #city #container #mainview .contentBox01 div.content,
  #city #container #mainview .contentBox01h div.content,
  #city #container #mainview .contentBox03 div.content,
  #city #container #mainview .contentBox04h div.content,
  #city #container #mainview .contentBox05h div.content {
    width: auto !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  #city #container .dynamic .content img {
    max-width: 100%;
    height: auto;
  }

  #container #mainview table,
  #container #mainview table.table01,
  #container #mainview table.table02,
  #container #mainview table.table03 {
    width: 100% !important;
    min-width: 520px;
  }

  /* Keep wide game tables usable with horizontal swipe. */
  #container #mainview .content table {
    display: table;
  }

  #container #mainview .content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Як у ik_common: padding 47px 120px 0 340px — інакше bg_footer.jpg не збігається з «коричневою» смугою. */
  #footer {
    width: 560px !important;
    height: 33px !important;
    margin: 0 -10px !important;
    padding: 47px 120px 0 340px !important;
    text-align: right !important;
    box-sizing: content-box !important;
  }

  #footer .copyright {
    float: left !important;
    display: block !important;
    line-height: normal !important;
  }

  /*
   * Острів: як раніше — поле 680×440, центр, горизонтальний скрол.
   */
  #island #mainview {
    position: relative !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: -10px auto -18px auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    box-sizing: border-box !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    background-color: #f3dcb6 !important;
  }

  /*
   * Місто: як острів — поле 680×440; легкий scale + translate лише для міста (острів без змін).
   */
  /* Горизонтальний скрол лише на рівні сторінки (#container 980px); тут auto давав другий скролбар. */
  /* margin-bottom −18px як у ik_common — стик карти й пергаменту; футер має коректний padding під bg_footer. */
  #city #mainview {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 29px -18px 251px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    box-sizing: border-box !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    background-color: #f3dcb6 !important;
    transform: none !important;
  }

  #city #mainview #locations,
  #island #mainview #cities {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 680px !important;
    height: 440px !important;
    min-width: 680px;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Невеликий оверскан прибирає вузькі «пісочні» смуги по краях міста. */
  #city #mainview #locations {
    width: 680px !important;
    min-width: 680px;
    margin-left: 0 !important;
  }

  #island #actions {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 8px 0 !important;
  }

  #island #actions li {
    position: static !important;
    display: inline-block;
    margin: 0 4px 6px 0;
  }

  #island #actions li a {
    position: static !important;
    display: inline-block;
    width: auto !important;
    height: auto !important;
    min-height: 28px;
    line-height: 28px !important;
    padding: 0 10px;
    border: 1px solid #be8d53;
    border-radius: 4px;
    background-image: none !important;
    background-color: #f3dfbf;
  }

  /*
   * Світова карта: утримуємо drag-контейнер у видимій зоні на телефонах.
   */
  #worldmap_iso #mainview {
    overflow: hidden !important;
    margin: 0 auto 10px auto !important;
    width: 100% !important;
    max-width: 680px !important;
    min-height: 430px !important;
    padding: 0 !important;
  }

  #worldmap_iso #scrollcover {
    position: relative !important;
    width: 100% !important;
    min-height: 430px !important;
    overflow: hidden !important;
  }

  #worldmap_iso #worldmap {
    left: 190px !important;
    top: -250px !important;
  }

  #worldmap_iso #dragHandlerOverlay {
    margin-left: -260px !important;
    margin-top: 180px !important;
    width: 720px !important;
    height: 520px !important;
  }

  /* Branch office: keep filters and result tables usable on narrow screens. */
  #branchOffice #mainview .boFinderInner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #branchOffice #mainview .boFinderActions {
    justify-content: flex-start;
  }

  #branchOffice #mainview .content table.search {
    width: 100% !important;
  }

  #branchOffice #mainview .content table.search td {
    display: block;
    width: auto !important;
    padding: 4px 0 !important;
  }

  #branchOffice #mainview .content table.search select,
  #branchOffice #mainview .content table.search input[type="text"] {
    width: min(100%, 320px) !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #branchOffice #mainview table.tablekontor.boResultsTable,
  #branchOffice #mainview table.tablekontor.boMyOffersTable {
    min-width: 720px !important;
  }

  #branchOffice #mainview .boOfferFooter {
    display: block;
  }

  #branchOffice #mainview .boOfferFooterBtn {
    margin-top: 10px;
  }

}

@media screen and (max-width: 860px) {
  #city #mainview {
    transform: none !important;
  }

  #container #mainview table,
  #container #mainview table.table01,
  #container #mainview table.table02,
  #container #mainview table.table03 {
    min-width: 460px;
  }
}

@media screen and (max-width: 520px) {
  #city #mainview {
    transform: none !important;
  }

  #island #mainview {
    max-width: 640px !important;
  }

  #worldmap_iso #mainview {
    min-height: 390px !important;
  }

  #worldmap_iso #dragHandlerOverlay {
    width: 660px !important;
    height: 460px !important;
  }

  #container #mainview table,
  #container #mainview table.table01,
  #container #mainview table.table02,
  #container #mainview table.table03 {
    min-width: 420px;
  }
}

/* Portrait: більше вертикального простору під інтерактивне поле міста/острова. */
@media screen and (max-width: 980px) and (orientation: portrait) {
  body:not(.ik-landing) #container {
    zoom: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.ik-landing) #container2 {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #city #mainview {
    margin-bottom: -18px !important;
    transform: none !important;
  }

  #island #mainview {
    margin-bottom: -6px !important;
  }

  #worldmap_iso #worldmap {
    left: 170px !important;
    top: -220px !important;
  }
}

/* Landscape: дрібні зсуви світової карти (полотно без zoom — скрол увесь #container). */
@media screen and (max-width: 980px) and (orientation: landscape) {
  body:not(.ik-landing) #container {
    zoom: 1 !important;
  }

  #city #mainview {
    transform: none !important;
  }

  #worldmap_iso #worldmap {
    left: 190px !important;
    top: -250px !important;
  }
}