/* Shared small-screen layout. Keep village image maps at native size. */
@media (max-width: 900px) {
 html { min-width: 0 !important; }
 html body.v35 { display: block !important; zoom: 1 !important; min-width: 0 !important; width: 100% !important; margin: 0; }
 body.v35 .wrapper { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding-bottom: calc(170px + env(safe-area-inset-bottom)) !important; }
 body.v35 #mid { float: none; width: 100%; padding: 0 !important; margin: 0; }
 body.v35 #content { float: none !important; box-sizing: border-box; width: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 12px !important; overflow-x: auto !important; transform: none !important; }
 body.v35 #content h1 { font-size: 20px; line-height: 1.5; }
 body.v35 #header { height: auto !important; min-height: 67px; }
 body.v35 #mtop { display: flex !important; position: relative !important; flex-wrap: wrap; align-items: center; justify-content: center; width: 100% !important; height: auto !important; right: auto !important; left: auto !important; top: auto !important; }
 body.v35 #mtop > a, body.v35 #mtop > div { flex: 0 0 auto; float: none !important; }
 body.v35 #mtop #plus { top: auto !important; }
 body.v35 #content.village1 #village_map { float: none !important; right: auto !important; left: auto !important; margin: 0 auto 16px !important; }
 body.v35 #content.village1 #map_details { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
 body.v35 #map_details table { width: 100% !important; font-size: 14px; }
 body.v35 #content.village2 #village_map { right: auto !important; left: auto !important; }
 body.v35 #build { max-width: 100%; box-sizing: border-box; }
 body.v35 input[type=text], body.v35 input[type=password], body.v35 input[type=number], body.v35 select, body.v35 textarea { max-width: 100%; box-sizing: border-box; font-size: 16px; }
 body.v35 #mobileNavBar { box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom); }
 body.v35 .mobileIcons { gap: 2px; padding: 6px 2px; }
 body.v35 .navItem { min-width: 0; min-height: 44px; }
 body.v35 .navText { font-size: 11px; }
 body.v35 #villagesDrawer:not(.open) { visibility: hidden; pointer-events: none; }
 body.v35 #villagesDrawer.open { visibility: visible; }
 body.v35 #side_info_mobile { float: none !important; padding: 12px !important; box-sizing: border-box; left: auto !important; right: auto !important; }
 body.v35 #side_info_mobile table { width: 100% !important; }
 body.v35 #side_info_mobile h6 { position: static !important; }
 body.v35 #closeVillages { border: 0; background: transparent; min-width: 44px; min-height: 44px; }
 body.v35.villages-open { overflow: hidden !important; }
 body.v35 #content table { max-width: 100%; }
}

@media (max-width: 360px) { body.v35 #content { padding-left: 2px !important; padding-right: 2px !important; } }

/* Keep all four resource counters compact in one row on mobile. */
@media (max-width: 900px) {
 body.v35 #resWrap { display: block; width: calc(100% - 12px); max-width: 572px; margin: 0 auto; right: auto; }
 body.v35 #resWrap table, body.v35 #resWrap tbody { display: block; width: 100%; }
 body.v35 #resWrap tr.res { display: grid; grid-template-columns: repeat(4, 18px minmax(0, 1fr)); gap: 3px; align-items: center; }
 body.v35 #resWrap td { min-width: 0; padding: 0; }
 body.v35 #resWrap td.res { width: auto; font-size: 12px; }
 body.v35 #resWrap .barWrapper { height: 24px; }
 body.v35 #resWrap .barWrapper b { line-height: 24px; }
}

/* Compact gold button alongside the game navigation. */
@media (max-width: 900px) {
 body.v35 #mtop a#plus { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: auto !important; min-width: 64px; height: 36px !important; padding: 0 10px !important; margin: 4px 6px; box-sizing: border-box; background: linear-gradient(#fff9e7, #f5e4b0) !important; border: 1px solid #c9a44e; border-radius: 18px; box-shadow: 0 1px 3px #0002; text-decoration: none; font-size: 13px; color: #805600; }
 body.v35 #mtop a#plus #btn_plus { position: static !important; flex: 0 0 21px; width: 21px; height: 21px; margin: 0; }
 body.v35 #mtop a#plus .gold-molvp { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.2; }
 body.v35 #mtop a#plus font { color: #805600; }
}

@media (max-width: 480px) {
 body.v35 #mtop { flex-wrap: nowrap !important; }
 body.v35 #mtop > a:not(#plus), body.v35 #mtop > div { zoom: .75; }
 body.v35 #mtop a#plus { min-width: 58px; padding: 0 6px !important; margin: 4px 2px; }
}

@media (max-width: 900px) {
 body.v35 #content.village1 #production td.num { text-align: right !important; padding-right: 4px; white-space: nowrap; }
}

@media (max-width: 900px) {
 body.v35 #content.village1 #production { table-layout: fixed; }
 body.v35 #content.village1 #production td.ico { width: 24px !important; padding: 0; }
 body.v35 #content.village1 #production td.res { width: 8px !important; padding: 0; }
 body.v35 #content.village1 #production td.num { width: 85px !important; }
 body.v35 #content.village1 #production td.per { width: auto !important; }
}

@media (max-width: 900px) {
 body.v35 #content.village1 #production tbody tr { display: flex; align-items: center; }
 body.v35 #content.village1 #production td.ico { flex: 0 0 24px; }
 body.v35 #content.village1 #production td.res { flex: 0 0 8px; }
 body.v35 #content.village1 #production td.num { flex: 0 0 85px; box-sizing: border-box; }
 body.v35 #content.village1 #production td.per { flex: 1; }
}

@media (max-width: 900px) {
 body.v35 #content.village2 #village_map { margin: 0 auto 16px !important; float: none !important; }
 body.v35 #content.village2 #village_map #lswitch { top: auto !important; left: auto !important; right: 10px !important; bottom: 10px !important; z-index: 100; cursor: pointer; }
}

@media (max-width: 900px) {
 body.v35 #content.statistics { padding-top: 28px !important; }
}

@media (max-width: 900px) {
 body.v35 #content.statistics #submenu { position: static !important; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 6px 0; padding: 0; }
 body.v35 #content.statistics #submenu a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
 body.v35 #content.statistics #submenu img { float: none !important; display: block; margin: 0 !important; }
}

@media (max-width: 900px) {
 html { width: 100% !important; margin: 0 !important; }
 body.v35 #header { width: 100% !important; min-width: 0 !important; }
 body.v35 #mtop .InBar { max-width: 100%; height: auto; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 900px) {
 body.v35 #content.login h1 img, body.v35 #content.login h5 img { max-width: 100%; height: auto; }
 body.v35 #content.login table { width: 100%; table-layout: fixed; box-sizing: border-box; }
 body.v35 #content.login td { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
 body.v35 #content.login #login_form input { width: 100%; min-width: 0; }
 body.v35 #content.login form { max-width: 100%; min-width: 0; }
}
@media (max-width: 900px) {
 body.v35 #content.login h1 img.img_login { width: 468px; max-width: 100%; height: 60px; background-size: contain; background-repeat: no-repeat; background-position: center; }
 body.v35 #content.login h5 img.img_u04 { width: 160px; max-width: 100%; height: 15px; background-size: contain; background-repeat: no-repeat; }
}