/* ============================================
   TRAVIAN DBOOR — MOBILE RESPONSIVE CSS
   Loaded via: media="screen and (max-width: 768px)"
   Desktop is NEVER affected by this file.
   New HTML elements use inline style="display:none"
   so they are hidden on desktop even without this file.

   Color palette: Clean white
   - Body/content: #fff
   - Header/res:   #fff with subtle border
   - Border:       #ddd
   - Text:         #333
   ============================================ */

/* ===========================================
   1. GLOBAL RESET
   =========================================== */

body, body.v35 {
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  background: #fff !important;
  background-image: none !important;
}

.wrapper {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.is-mobile .wrapper {
  background-image: none !important;
}

.is-mobile #mid {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.is-mobile #content {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Do NOT set global img { height:auto } — it kills sprite images.
   Sprite imgs (r1-r5, nav icons, unit icons, building imgs) use
   background-image on 1x1 transparent GIF with fixed height/width. */

input, select, textarea {
  font-size: 16px !important;
}

/* Sprite buttons (input[type="image"] with transparent GIF + CSS background):
   The 16px font-size above inflates the element, showing alt text below
   the 20px sprite. Fix: lock height to sprite size and clip overflow. */
input.dynamic_img {
  height: 20px !important;
  max-height: 20px !important;
  overflow: hidden !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ===========================================
   2. HIDE SIDEBARS
   =========================================== */

.is-mobile #side_navi,
.is-mobile #side_info {
  display: none !important;
}

/* ===========================================
   3. HEADER — collapse to nav bar only
   =========================================== */

.is-mobile #header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  /* Show the same header_background.jpg as desktop, positioned to
     show the decorative band behind the icons.
     Image is 15x150, repeat-x. Desktop: header 100px, mtop at top:43px.
     Mobile header is ~52px. Show the band from ~49px down (where icons sit). */
  background: #E0E0E0 !important;
  border-bottom: 1px solid #bdbaba;
  height: auto !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ===========================================
   4. #MTOP — reset desktop positioning
   =========================================== */

.is-mobile #mtop {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  gap: 0;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin-left: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  background: none !important;
}

.is-mobile #mtop > .clear {
  display: none !important;
}

/* ===========================================
   5. NAV ICONS — mobile-specific button images
   Use _mobile.gif variants sized to 95% of header height.
   Desktop sprites: 70x200 (n-series), 70x100 (m-series).
   Mobile: same sprite format, swapped via background-image.
   Icons fill 95% of header height for max touch area.
   =========================================== */

/* n1-n4 containers: fill header height, fixed width */
.is-mobile #n1,
.is-mobile #n2,
.is-mobile #n3,
.is-mobile #n4 {
  width: 48px !important;
  min-width: 48px !important;
  height: auto !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  overflow: hidden !important;
  float: none !important;
}

/* n1-n4 icon images: use mobile sprites, sized to fill container */
.is-mobile #n1 img,
.is-mobile #n2 img,
.is-mobile #n3 img,
.is-mobile #n4 img {
  width: 44px !important;
  height: 44px !important;
  background-size: 44px auto !important;
  background-position: center -12px !important;
}

/* Swap to mobile sprite images */
.is-mobile body.v35 #n1 img, .is-mobile.v35 #n1 img {
  background-image: url("img/l/New/n1-ltr_mobile.gif") !important;
}
.is-mobile body.v35 #n2 img, .is-mobile.v35 #n2 img {
  background-image: url("img/l/New/n2-ltr_mobile.gif") !important;
}
.is-mobile body.v35 #n3 img, .is-mobile.v35 #n3 img {
  background-image: url("img/l/New/n3-ltr_mobile.gif") !important;
}
.is-mobile body.v35 #n4 img, .is-mobile.v35 #n4 img {
  background-image: url("img/l/New/n4-ltr_mobile.gif") !important;
}

/* Hover state: shift to bottom half of sprite */
.is-mobile #n1:hover img,
.is-mobile #n2:hover img,
.is-mobile #n3:hover img,
.is-mobile #n4:hover img {
  background-position: center -76px !important;
}

/* #n5 (reports + messages) — use mobile m-series sprites.
   Desktop: div#n5 is 70x67 with class i1/i2/i3/i4 for status.
   Mobile: size to match n1-n4, swap to _mobile.gif sprites. */
.is-mobile #n5 {
  width: 48px !important;
  height: auto !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: none !important;
  flex-shrink: 0;
  position: relative !important;
  float: none !important;
  /* Reset transform from previous version */
  transform: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background-size: 48px auto !important;
  background-position: center -14px !important;
}

/* Swap #n5 status sprites to mobile versions */
.is-mobile.v35 div.i1 { background-image: url("img/l/New/m1-ltr_mobile.gif") !important; }
.is-mobile.v35 div.i2 { background-image: url("img/l/New/m2-ltr_mobile.gif") !important; }
.is-mobile.v35 div.i3 { background-image: url("img/l/New/m3-ltr_mobile.gif") !important; }
.is-mobile.v35 div.i4 { background-image: url("img/l/New/m4-ltr_mobile.gif") !important; }

/* Hide the inner <a> images in #n5 — the div background is the full icon.
   But keep <a> tags clickable by giving them full coverage of the div. */
.is-mobile #n5 a img {
  visibility: hidden !important;
}

.is-mobile #n5 a {
  float: none !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 50% !important;
  height: 100% !important;
  z-index: 10;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Second link (messages) covers right half */
.is-mobile #n5 a.messages {
  left: 50%;
}

/* Badges must not block touch on links */
.is-mobile #n5 .noti_badge {
  pointer-events: none !important;
  z-index: 11;
}

/* Notification badges */
.is-mobile .noti_badge {
  position: absolute !important;
  top: -2px !important;
  font-size: 9px !important;
  padding: 1px 4px !important;
  min-width: 14px;
  text-align: center;
  z-index: 2;
}

.is-mobile .noti_rpt {
  left: -2px !important;
  right: auto !important;
}

.is-mobile .noti_msg {
  right: -2px !important;
  left: auto !important;
}

/* Hide Plus and Hero Adventure */
.is-mobile #plus {
  display: none !important;
}

/* Gold + Hero stacked wrapper.
   #mobile-header-right wraps #gold_display in HTML.
   JS moves #hero_adv_widget into it on mobile.
   Desktop: wrapper is unstyled (transparent), gold renders normally.
   Mobile: wrapper becomes flex-column, gold on top, hero below. */

.is-mobile #mobile-header-right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  margin-left: 2px !important;
  padding: 1px 2px !important;
}

.is-mobile #mobile-header-right #gold_display {
  position: static !important;
  right: auto !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px;
  padding: 1px 6px !important;
  font-size: 11px !important;
  float: none !important;
  height: auto !important;
  line-height: 1.2;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5) !important;
  white-space: nowrap;
  margin: 0 !important;
}

.is-mobile #mobile-header-right #hero_adv_widget {
  position: static !important;
  right: auto !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px;
  padding: 1px 6px !important;
  font-size: 11px !important;
  float: none !important;
  height: auto !important;
  line-height: 1.2;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5) !important;
  white-space: nowrap;
  margin: 0 !important;
}

.is-mobile #gold_display img.gold {
  width: 14px;
  height: 14px;
}

.is-mobile #hero_adv_widget .heroStatus {
  width: 16px !important;
  height: 16px !important;
  background-size: 16px auto !important;
  position: relative !important;
  top: 0 !important;
}

.is-mobile #hero_adv_widget .hero_adv_count {
  font-size: 11px;
  font-weight: bold;
}

/* ===========================================
   7. RESOURCE BAR — sticky, compact
   =========================================== */

.is-mobile #res {
  position: sticky !important;
  z-index: 999 !important;
  background: #fff !important;
  border-bottom: 1px solid #ddd;
  padding: 2px 4px !important;
  left: auto !important;
  height: auto !important;
  width: 100% !important;
  /* This fork loads modules/new_layout_ltr.css, which forces #res to
     min-width:980px (desktop). Without this reset width:100% resolves to
     980px on a phone and the bar overflows, clipping all but the first cell. */
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.is-mobile #resWrap {
  width: 100% !important;
  overflow: hidden !important; /* no scrollbar — content must fit */
  /* new_layout_ltr.css centres #resWrap with left:50%;margin-left:-335px for
     the 980px desktop layout — undo it so the bar starts at the left edge. */
  left: 0 !important;
  margin-left: 0 !important;
  position: static !important;
}

.is-mobile #resWrap table {
  width: 100% !important;
  /* Adaptive font: scales with viewport width so all 4 resources always fit */
  font-size: clamp(7px, 2.2vw, 11px) !important;
  table-layout: auto !important;
  background-color: transparent !important;
}

.is-mobile #resWrap table td {
  padding: 1px 0 !important;
  white-space: nowrap;
  text-align: center;
}

/* Resource icons — use transform:scale to shrink visually
   while preserving sprite positioning. Negative margin compensates layout. */
.is-mobile #resWrap table td img.r1,
.is-mobile #resWrap table td img.r2,
.is-mobile #resWrap table td img.r3,
.is-mobile #resWrap table td img.r4,
.is-mobile #resWrap table td img.r5 {
  margin: 0 -3px 0 -1px !important;
  transform: scale(0.72);
  transform-origin: center center;
  vertical-align: middle;
}

.is-mobile #l1, .is-mobile #l2,
.is-mobile #l3, .is-mobile #l4 {
  font-size: inherit !important; /* inherits the clamp() from parent table */
}

.is-mobile .consumption-row td {
  font-size: 10px !important;
}

/* Hide the spacer but keep it in flow — use visibility instead of display
   so it still occupies its colspan space, pushing icon+value to the right */
.is-mobile .consumption-row td[colspan="6"] {
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.is-mobile .consumption-row td.consumption-val {
  text-align: center !important;
}

/* ===========================================
   9. GAME POPUPS — fit mobile viewport
   =========================================== */

/* Quest popup + other popups using popup3 class.
   Desktop uses background-image (anl.gif) as decorative frame — doesn't scale.
   Mobile: replace with a simple CSS border + white background. */
.is-mobile div.popup3 {
  width: calc(100vw - 24px) !important;
  max-width: 430px !important;
  left: 12px !important;
  right: 12px !important;
  margin: 0 !important; /* the drag/centering JS sets margin-left:-285px, which would shove it off-screen left */
  transform: none !important;
  padding: 31px 12px 0 12px !important; /* keep desktop padding-top for drag bar */
  box-sizing: border-box !important;
  background-image: none !important;
  background-color: #fff !important;
  border: 2px solid #999 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* Drag handle — flush to top edge, full width */
.is-mobile div.popup3 div#drag {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 2px 2px 0 0 !important;
}

/* Close button. On desktop the "X" is painted into the anl.gif frame image,
   which the mobile rule above replaces with a plain white box — so the X
   disappears. Restore the game's default close icon (img/a/close.gif, the same
   sprite the map popup uses) at the top-right. */
.is-mobile div.popup3 img.popup4 {
  right: 6px !important;
  top: 6px !important;
  width: 22px !important;
  height: 22px !important;
  background-image: url("img/a/close.gif") !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
}

/* Inner quest content — must not exceed parent */
.is-mobile div.quest div#qstd {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Quest background landscape image — fixed 428px on desktop, must fit mobile */
.is-mobile div.quest div#qstbg {
  width: calc(100% - 2px) !important;
  left: 1px !important;
  background-size: 100% auto !important; /* fit width, maintain aspect ratio */
  background-position: center bottom !important;
}

/* Quest images — fit within popup */
.is-mobile div.quest img {
  max-width: 100% !important;
  height: auto !important;
}

/* Allow popup to scroll if content is taller than viewport */
.is-mobile div.popup3 {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 20px) !important;
  height: auto !important;
}

/* The manual help popup (Popup() -> manual.php) puts a fixed 412px-wide,
   absolutely-positioned <iframe id="Frame"> inside div.popup3. On mobile that
   iframe escapes the resized box and lands half off-screen. Pin it back into
   normal flow and make it fill the box so the whole popup fits the screen. */
.is-mobile div.popup3 #Frame {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 70vh !important;
  box-sizing: border-box !important;
}

/* ===========================================
   10. VILLAGE1 + VILLAGE2 LAYOUTS
   Both use fixed-pixel absolutely-positioned sprites.
   Use transform:scale() to shrink to fit viewport
   while preserving internal coords and image-map clicks.
   =========================================== */

/* --- Village1 (resource fields) ---
   Container: 300x264px, float:left. #resfeld: 300x264 absolute.
   #map_details: float:right, 229px.
   Use JS transform:scale() like village2 — scale 300px to viewport. */

.is-mobile div.village1 {
  width: 100% !important;
  padding: 0 8px !important;
}

.is-mobile div.village1 h1 {
  position: relative !important;
  left: 0 !important;
  text-align: left;
  margin-bottom: 4px !important;
}

/* "(Capital)" label — small gap above, tight to village map below */
.is-mobile div.village1 h1 .capital-label {
  margin-top: 2px;
}

.is-mobile div.village1 #village_map {
  /* JS applies transform:scale() to fit viewport */
  width: 300px !important;
  height: 264px !important;
  float: none !important;
  margin: 50px auto 0 !important;
  position: relative !important;
  transform-origin: top center;
}

/* Keep resfeld and reslevel at original absolute sizes */
.is-mobile div.village1 img#resfeld {
  width: 300px !important;
  height: 264px !important;
}

.is-mobile div.village1 #map_details {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  clear: both;
  /* Side by side when space allows, stacked when narrow */
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start !important; /* both tables start from top */
  gap: 10px 10px;
}

/* Production table — tight compact layout, flex child */
.is-mobile div.village1 #production {
  width: auto !important;
  margin: 8px 0 !important;
  border-collapse: collapse;
  flex: 0 1 auto;
  min-width: 0;
}

/* Production header row — tighten gaps */
.is-mobile div.village1 #production thead th {
  word-spacing: -3px !important;
}

.is-mobile div.village1 #production .prodov-link {
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
}

.is-mobile div.village1 #production td {
  padding: 1px 3px !important;
  line-height: 1.2 !important;
}

.is-mobile div.village1 #production td.ico {
  width: 18px !important;
  padding-right: 0 !important;
}

.is-mobile div.village1 #production td.res {
  padding-right: 2px !important;
}

.is-mobile div.village1 #production td.num {
  text-align: right !important;
  padding-left: 0 !important;
  font-weight: bold;
}

.is-mobile div.village1 #production td.per {
  padding-left: 3px !important;
}

/* Units table — tight compact layout, flex child */
.is-mobile div.village1 #troops {
  width: auto !important;
  margin: 8px 0 !important;
  border-collapse: collapse;
  flex: 0 1 auto;
  min-width: 0;
}

.is-mobile div.village1 #troops td {
  padding: 1px 3px !important;
  line-height: 1.2 !important;
}

.is-mobile div.village1 #troops td.ico a {
  line-height: 0 !important;
  display: inline-block;
}

.is-mobile div.village1 #troops td.ico {
  width: 18px !important;
  padding-right: 0 !important;
}

.is-mobile div.village1 #troops td.num {
  text-align: right !important;
  padding-right: 2px !important;
  padding-left: 0 !important;
}

.is-mobile div.village1 #troops td.un {
  padding-left: 2px !important;
}

/* --- Village2 (buildings view) ---
   Container: div.village2 div#village_map = 540x448px
   h1: position:absolute, left:25px, top:47px
   All building imgs: position:absolute with pixel coords
   Solution: scale the whole container to fit viewport */

.is-mobile div.village2 {
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

.is-mobile div.village2 h1 {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  padding: 8px !important;
  z-index: 100;
}

.is-mobile div.village2 div#village_map {
  /* JS applies transform:scale() — calc() inside scale() doesn't work in CSS */
  width: 540px !important;
  height: 448px !important;
  transform-origin: top left;
  margin-top: 0 !important;
}

/* Keep building images at their original absolute positions */
.is-mobile div.village2 div#village_map img {
  position: absolute;
}

/* Build queue — needs to clear below the scaled map */
.is-mobile div.village2 table#building_contract {
  margin: 10px 8px !important;
  clear: both;
}

/* --- Production, Troops, Movements tables --- */

/* Movements: always full width (spans above the side-by-side pair) */
.is-mobile #movements {
  width: 100% !important;
  flex-basis: 100% !important;
  font-size: 12px;
}

.is-mobile #production,
.is-mobile #troops {
  font-size: 12px;
}

.is-mobile #movements td,
.is-mobile #production td,
.is-mobile #troops td {
  padding: 3px 6px !important;
}

.is-mobile #building_contract,
.is-mobile #building_contract_mb {
  width: 100% !important;
  font-size: 9px;
  margin: 4px 0 !important;
}

.is-mobile #building_contract td,
.is-mobile #building_contract_mb td,
.is-mobile #building_contract td *,
.is-mobile #building_contract_mb td * {
  font-size: 9px !important;
  padding: 2px 4px !important;
  line-height: 1.3 !important;
}

.is-mobile #building_contract thead th,
.is-mobile #building_contract_mb thead th,
.is-mobile #building_contract thead th *,
.is-mobile #building_contract_mb thead th * {
  font-size: 9px !important;
  padding: 2px 4px !important;
}

/* Cancel X icon + instant-finish clock icon — scale down to match */
.is-mobile #building_contract td.ico img,
.is-mobile #building_contract_mb td.ico img,
.is-mobile #building_contract img.clock,
.is-mobile #building_contract_mb img.clock {
  transform: scale(0.8);
  padding: 0 !important;
}

.is-mobile h1 {
  font-size: 16px !important;
  padding: 8px !important;
}

/* ===========================================
   11. MAP PAGE — reflow widgets out of #map, keep grid scrollable
   Desktop: #map is 540x~316 with absolute-positioned children overlapping.
   Mobile: JS reflows #map_infobox (above), #map_coords + #map_navibox (below).
   #map itself becomes a horizontal-scroll window on the 540px tile grid.
   =========================================== */

.is-mobile div.map {
  width: 100% !important;
  padding: 8px !important;
  box-sizing: border-box;
  position: relative;  /* anchor for extracted #map_makelarge button */
}

.is-mobile div.map > h1 {
  font-size: 18px !important;
  margin: 4px 0 50px !important;
  padding: 0 !important;
}

/* ===========================================
   Oasis / wilderness view (village3.php with #detailed_map):
   centered image + 2-col row [OPTIONS | TROOPS/BONUS/REPORT stacked]
   =========================================== */
.is-mobile div.map:has(#detailed_map) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 4px 10px;
  align-items: start;
}
.is-mobile div.map:has(#detailed_map) > h1 {
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 4px 0 0 !important;   /* small gap, override map.php 50px */
  text-align: left;
}
/* (Capital) / village subtitle — placed directly under H1 */
.is-mobile div.map:has(#detailed_map) > div#dmain {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 13px;
  color: #666;
  /* Override desktop: div#dmain { position:relative; left:25px; top:-7px; margin-bottom:-16px } */
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin-bottom: 6px !important;
}
.is-mobile div.map:has(#detailed_map) > img#detailed_map {
  grid-row: 3;
  grid-column: 1 / -1;
  justify-self: center;           /* center the 300px sprite */
  margin: 0 0 8px !important;
  width: 300px !important;
  height: 264px !important;
  /* Override desktop rule: div.map img#detailed_map { float:left; left:15px; position:relative } */
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
}
/* OPTIONS on the right half of row 4 */
.is-mobile div.map:has(#detailed_map) > table#options {
  grid-row: 4;
  grid-column: 2;
  float: none !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
}
.is-mobile div.map:has(#detailed_map) > table#options td {
  padding: 3px 4px !important;
  font-size: 12px;
}
/* TROOPS / BONUS / REPORT stacked on the left half of row 4 */
.is-mobile div.map:has(#detailed_map) > div#map_details {
  grid-row: 4;
  grid-column: 1;
  float: none !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.is-mobile div.map:has(#detailed_map) > div#map_details > table {
  width: 100% !important;
  margin: 0 !important;
  table-layout: auto;
}
.is-mobile div.map:has(#detailed_map) > div#map_details > table td,
.is-mobile div.map:has(#detailed_map) > div#map_details > table th {
  padding: 1px 3px !important;
  vertical-align: top;
  font-size: 11px !important;
  line-height: 14px;
}
/* Shrink label column (TH) to its content, let TD take the rest */
.is-mobile div.map:has(#detailed_map) > div#map_details > table th {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  font-weight: bold;
}
.is-mobile div.map:has(#detailed_map) > div#map_details > table td {
  width: auto;
  text-align: left;
  word-break: break-word;
}

/* #map uses CSS `zoom` to scale the 540px tile grid down to viewport width.
   Unlike `transform: scale()`, `zoom` scales layout + hit-testing together,
   so <area> polygon clicks remain accurate. JS sets --map-zoom on body. */
.is-mobile div.map #map {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Reserve space for the scaled grid (540 * zoom wide, 316 * zoom tall + padding) */
  min-height: calc(316px * var(--map-zoom, 1) + 20px);
}

/* Scale the entire tile grid as a single unit via `zoom` */
.is-mobile div.map #map_content,
.is-mobile div.map #map_links,
.is-mobile div.map #map_rulers {
  zoom: var(--map-zoom, 1);
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
}
.is-mobile div.map #map_content {
  width: 540px !important;
  height: 316px !important;
}
/* BigMap button — extracted out of #map and anchored to div.map top-left,
   sitting in the 50px gap between H1 and the map image.
   Must be ABOVE #map_links (z-index 50) which overlaps the same area. */
.is-mobile div.map > a#map_makelarge {
  position: absolute !important;
  top: 36px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 100 !important;
  display: block !important;
  width: 33px;
  height: 25px;
  padding: 6px;  /* larger touch target */
  margin: -6px;
}
.is-mobile div.map > a#map_makelarge img.ml,
.is-mobile div.map > a#map_makelarge img {
  background-image: url("img/m/max.gif") !important;
  background-repeat: no-repeat;
  width: 33px !important;
  height: 25px !important;
  display: block;
}

/* Row below map: [details | navibox] — flex split with breathing room */
.is-mobile #mobile-map-belowrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 4px;
  padding: 0 4px;
}

/* Details table — compact, narrow on left side of the row */
.is-mobile table#map_infobox {
  position: static !important;
  flex: 0 0 190px;
  width: 190px !important;
  max-width: 190px;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.2;
}
.is-mobile table#map_infobox thead th {
  padding: 2px 6px !important;
  font-size: 11px;
}
.is-mobile table#map_infobox tbody th,
.is-mobile table#map_infobox tbody td {
  padding: 2px 6px !important;
  font-size: 11px;
}

/* Navibox (arrow cluster) — right side of the row */
.is-mobile img#map_navibox {
  position: static !important;
  display: block !important;
  flex: 0 0 100px;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  /* Desktop sprite is normally provided by `div#map img#map_navibox`
     which stops matching after JS reflow — re-apply here */
  background-image: url("img/m/dir.gif") !important;
  width: 100px !important;
  height: 60px !important;
  z-index: auto !important;
}

.is-mobile div#map_coords {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 4px 0 0 !important;
  text-align: center;
  box-sizing: border-box;
  line-height: normal !important;
}
.is-mobile div#map_coords span,
.is-mobile div#map_coords input {
  float: none !important;
  margin-right: 0 !important;
}
.is-mobile div#map_coords form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}
/* Hide legacy <br> separators — flex layout handles wrapping */
.is-mobile div#map_coords form br {
  display: none !important;
}
/* Finder links live on their own sub-row below X/Y inputs */
.is-mobile div#map_coords form .mobile-finder-row {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.is-mobile div#map_coords input.text,
.is-mobile div#map_coords input[type="text"] {
  width: 42px !important;
  font-size: 13px !important;
  min-height: 20px !important;
  height: 20px !important;
  line-height: 16px !important;
  text-align: center;
  padding: 1px 4px !important;
  box-sizing: border-box;
}
/* #btn_ok is a dynamic_img sprite — preserve exact sprite dimensions, no text, no tile */
.is-mobile div#map_coords input#btn_ok,
.is-mobile div#map_coords input[type="submit"].dynamic_img {
  width: 60px !important;
  height: 22px !important;
  min-height: 22px !important;
  min-width: 60px !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden;
  line-height: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
.is-mobile div#map_coords input[type="submit"]:not(.dynamic_img) {
  min-height: 40px;
  min-width: 60px;
  font-size: 14px;
  padding: 4px 12px !important;
}
/* Cropper/Farm Finder links inside #map_coords — stack as buttons */
.is-mobile div#map_coords a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 6px 10px;
  margin: 4px;
  text-decoration: none;
  white-space: nowrap;
}

/* ===========================================
   12. GENERAL TABLE OVERFLOW
   =========================================== */

.is-mobile table {
  max-width: 100% !important;
}

.is-mobile #content > table,
.is-mobile #content table[cellpadding] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Exempt village detail tables from display:block —
   it breaks <a> links inside <th> (production overview link) */
.is-mobile #production,
.is-mobile #troops,
.is-mobile #movements,
.is-mobile #building_contract,
.is-mobile #building_contract_mb {
  display: table !important;
  overflow: visible !important;
}

/* Production overview link — ensure clickable */
.is-mobile .prodov-link {
  display: inline-block !important;
  min-width: 28px;
  min-height: 28px;
  vertical-align: middle;
  padding: 2px;
}

/* ===========================================
   13. FOOTER
   =========================================== */

.is-mobile #footer {
  width: 100% !important;
  padding: 8px !important;
  background-color: #f5f5f5 !important;
  border-top: 1px solid #ddd;
}

.is-mobile .footer-menu {
  font-size: 11px;
  text-align: center;
}

/* Copyright on its own line — mobile only (desktop keeps it inline as before). */
.is-mobile .footer-menu .footer-copyright {
  display: block !important;
  margin: 5px 0 0 !important;
}

/* "Desktop version" switch — only shown on mobile (inline display:none on desktop).
   Kept inline so it does NOT add an extra row / height to the footer. */
.is-mobile .footer-menu .nx-viewmode-foot {
  display: inline-block !important;
  margin: 0 2px !important;
  vertical-align: middle;
}

.is-mobile .footer-menu .nx-viewmode-foot a {
  display: inline-block;
  padding: 4px 12px;
  background: #e4e4e4;
  color: #444 !important;
  border: 1px solid #bcbcbc;
  border-radius: 13px;
  font-weight: normal;
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
}

.is-mobile .footer-stopper {
  display: none !important;
}

.is-mobile #stime {
  width: 100% !important;
  text-align: center;
  font-size: 10px;
}

/* ===========================================
   14. BANNERS
   =========================================== */

.is-mobile #sitter-indicator {
  font-size: 12px !important;
  padding: 3px 10px !important;
}

.is-mobile #sitter-access-banner {
  font-size: 11px !important;
  padding: 3px 8px !important;
  gap: 6px !important;
  max-width: 95vw !important;
}

/* Sitter permissions: single-column stacked layout on mobile */
.is-mobile #sitter-perms {
  table-layout: auto !important;
  width: auto !important;
  margin: 10px auto 0 auto;
}
.is-mobile #sitter-perms thead {
  display: none;
}
.is-mobile #sitter-perms tbody tr {
  display: flex;
  flex-direction: column;
}
.is-mobile #sitter-perms tbody td {
  display: block;
  width: auto !important;
  border-left: none !important;
  padding: 12px 20px 8px 20px !important;
  text-align: center;
}
.is-mobile #sitter-perms tbody td + td {
  border-top: 1px solid #ccc;
  padding-top: 14px !important;
}
.is-mobile #sitter-perms tbody td label {
  text-align: left;
  display: block !important;
}
.is-mobile #sitter-perms tbody td .btn {
  text-align: center;
}
.is-mobile #sitter-perms .sitter-slot-header {
  display: block;
  font-weight: bold;
  text-align: center;
  margin-bottom: 6px;
  font-size: 13px;
}
.is-mobile #sitter-perms .sitter-name-area {
  height: auto !important;
  margin-bottom: 8px;
}

.is-mobile #vacation-banner,
.is-mobile #maintenance-banner,
.is-mobile .vacation-banner,
.is-mobile .maintenance-banner {
  font-size: 12px !important;
  padding: 6px 8px !important;
}

/* ===========================================
   15. MISC
   =========================================== */

.is-mobile #dynamic_header {
  display: none !important;
}

.is-mobile #msfilter {
  display: none !important;
}

.is-mobile #logoutPopupBox {
  width: 90vw !important;
  max-width: 320px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ===========================================
   16. STATISTICS PAGE
   =========================================== */

/* Container — reset fixed 502px width */
.is-mobile div.statistics {
  width: 100% !important;
  padding: 8px !important;
}

/* Submenu icons — re-anchor to the header cell they live in.
   Works for: Players table (<th colspan>), Top10 wrapper table (<th>),
   Alliances table (<th colspan>). All use the same pattern:
   submenu divs are inside the first <th> of the first <tr> in <thead>. */
.is-mobile div.statistics table > thead > tr:first-child > td,
.is-mobile div.statistics table > thead > tr:first-child > th {
  position: relative !important;
}

.is-mobile div.statistics div#submenu {
  position: absolute !important;
  right: 2px !important;
  top: -6px !important;
  left: auto !important;
}

.is-mobile div.statistics div#submenu2 {
  position: absolute !important;
  left: 2px !important;
  top: -6px !important;
  right: auto !important;
}

/* Alliance submenu — same re-anchor */
.is-mobile div.alliance table > thead > tr:first-child > td,
.is-mobile div.alliance table > thead > tr:first-child > th {
  position: relative !important;
}

.is-mobile div.alliance div#submenu {
  position: absolute !important;
  right: 2px !important;
  top: -6px !important;
  left: auto !important;
}

/* Top 10 tables (General tab) — full width, stacked, centered */
.is-mobile div.statistics table.top10 {
  width: 100% !important;
  float: none !important;
  margin: 10px auto !important;
}

/* ===========================================
   17. BUILD CONTAINER (shared by all building pages)
   Only the outer container — makes it fluid.
   Desktop: div#build { width: 502px; padding: 43px 25px 0 }
   =========================================== */

.is-mobile div#build {
  width: 100% !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

/* ===========================================
   18. RALLY POINT (RallyPoint.phtml)
   All selectors scoped to Rally Point elements only.
   =========================================== */

/* --- Tab bar: horizontally scrollable --- */
.is-mobile div#build div#textmenu {
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 8px;
}

.is-mobile div#build div#textmenu a {
  display: inline-block;
  padding: 6px 10px;
  white-space: nowrap;
}

/* Tighter gap between tabs and the content below (override desktop margin) */
.is-mobile div#build div#textmenu {
  margin: 6px 0 4px !important;
  padding-bottom: 0 !important;
}

/* Clean solid underline for selected tab (replaces desktop dashed border) */
.is-mobile div#build div#textmenu a.selected {
  border-bottom: 2px solid #71D000 !important;
  padding-bottom: 4px;
}

/* Alliance + Forum tabs (#textmenu in alli_menu.tpl): reuse the same mobile tab
   bar as the build/market pages — horizontal, scrollable, tappable inline tabs
   with a solid underline on the selected one, instead of the cramped desktop
   inline row. Scoped to the alliance/forum content so other pages are untouched. */
/* Alliance + Forum tabs: keep the plain underline-tab look (no chips/buttons),
   but WRAP to fit the page width instead of scrolling horizontally (sideways
   swipes kept turning into vertical scrolling). The " | " separators are
   collapsed with font-size:0 on the container and restored on the anchors so
   the wrapped rows stay clean. */
.is-mobile div.alliance div#textmenu,
.is-mobile div.forum div#textmenu {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;     /* allow tabs to wrap onto new rows */
  font-size: 0 !important;            /* collapse the " | " text-node separators */
  text-align: center !important;
  margin: 6px 0 4px !important;
  padding: 0 !important;
  border-bottom: 1px solid #ddd !important;
  position: static !important;
}
.is-mobile div.alliance div#textmenu a,
.is-mobile div.forum div#textmenu a {
  display: inline-block !important;
  /* Same dimensions as the marketplace tabs (.is-mobile div#build #textmenu a). */
  padding: 6px 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  /* No color override: inherit the base link color (#71D000 green, bold) so
     these match the marketplace tabs instead of rendering black. */
  text-decoration: none !important;
  /* Kill the iOS ~350ms double-tap-zoom delay so taps after a scroll fire now. */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0.08);
}
.is-mobile div.alliance div#textmenu a.selected,
.is-mobile div.forum div#textmenu a.selected {
  border-bottom: 2px solid #71D000 !important;
  padding-bottom: 4px !important;     /* matches the marketplace selected tab */
}

/* ===========================================
   Hero's Mansion (gid37) — stats table fit-to-width
   Desktop: 5 cols totaling 415px; col 3 (TD.xp stat-bar) wastes 160px.
   Mobile: hide xp bar column, let remaining columns fit container.
   =========================================== */
/* This fork's #distribution has NO <colgroup>/<col> and uses .hptrack (health)
   + img.bar (stats), so the original col-based / .stat-bar-track rules below
   didn't match. Use table-layout:auto and size the real cells instead. */
.is-mobile div#build.gid37 table#distribution {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  box-sizing: border-box;
}
/* label column: shrink to its content on one line (no "Regenerati on") */
.is-mobile div#build.gid37 table#distribution tbody th {
  width: 1% !important;
  white-space: nowrap !important;
  padding: 3px 6px !important;
  font-size: 12px;
  text-align: left;
}
.is-mobile div#build.gid37 table#distribution td.val {
  padding: 3px 4px !important;
  font-size: 12px;
  white-space: nowrap;
  text-align: left;
}
/* stat-bar column: fixed modest width so the health/stat bar never spans the row */
.is-mobile div#build.gid37 table#distribution td.xp {
  width: 80px !important;
  padding: 3px 4px !important;
}
/* health bar (.hptrack is a fixed 200px on desktop) — clamp to the cell */
.is-mobile div#build.gid37 table#distribution td.xp .hptrack {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* stat bars (img.bar) keep their inline % width but never overflow the cell */
.is-mobile div#build.gid37 table#distribution td.xp img.bar {
  max-width: 100% !important;
}
/* (+) button column: just a small link — keep it tight */
.is-mobile div#build.gid37 table#distribution td.up {
  width: 1% !important;
  padding: 3px 3px !important;
  text-align: center;
  white-space: nowrap;
}
/* count column: shrink to its number */
.is-mobile div#build.gid37 table#distribution td.po {
  width: 1% !important;
  padding: 3px 6px !important;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
}
/* Level-up info (xp row in thead with its own layout) */
.is-mobile div#build.gid37 table#distribution thead th {
  padding: 4px 6px !important;
  font-size: 13px;
}

/* ---- Adventures tab (t=2) — #adventures table ----
   Desktop: 5 cols totaling ~449px (.nam 75, .aligned_coords 64, .dur 56,
   .ico 47, .lnk 132). Overflows 412px mobile viewport by ~37px.
   Mobile fix: shrink "Start adventure" → "Go" via span swap, reduce
   padding/font, keep table-layout AUTO (fixed layout can't read widths
   because thead uses colspan="2" for Place). Prevent mid-word wrap on
   "Abandoned valley" with overflow-wrap:normal + word-break:keep-all. */
.is-mobile div#build.gid37 table#adventures {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  border-collapse: collapse;
  border: 1px solid #888;
}
.is-mobile div#build.gid37 table#adventures thead td {
  padding: 4px 3px !important;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #888;
  background: #DDDCDA;
  color: #333;
}
.is-mobile div#build.gid37 table#adventures tbody td {
  padding: 4px 3px !important;
  font-size: 12px;
  overflow-wrap: normal;
  word-break: keep-all;
  word-wrap: normal;
  border: 1px solid #b9b9b9;
}
.is-mobile div#build.gid37 table#adventures td.nam {
  white-space: normal;
  line-height: 1.15;
  text-align: left;
}
.is-mobile div#build.gid37 table#adventures td.aligned_coords {
  white-space: nowrap;
  text-align: center;
}
.is-mobile div#build.gid37 table#adventures td.dur {
  white-space: nowrap;
  text-align: center;
}
.is-mobile div#build.gid37 table#adventures td.ico {
  text-align: center;
}
.is-mobile div#build.gid37 table#adventures td.ico img {
  max-width: 100%;
  height: auto;
}
.is-mobile div#build.gid37 table#adventures td.lnk {
  white-space: nowrap;
  text-align: center;
}
.is-mobile div#build.gid37 table#adventures td.lnk a {
  font-size: 12px;
  font-weight: bold;
}
/* Swap "Start adventure" → "Go" on mobile (keeps desktop markup intact). */
.is-mobile div#build.gid37 table#adventures td.lnk .adv-start-label {
  font-size: 0;
}
.is-mobile div#build.gid37 table#adventures td.lnk .adv-start-label::after {
  content: "Go";
  font-size: 12px;
  font-weight: bold;
}
/* Silver balance / adventures completed stats row — also overflows. */
.is-mobile div#build.gid37 table.build_details {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  box-sizing: border-box;
}
.is-mobile div#build.gid37 table.build_details td.desc {
  padding: 4px 6px !important;
  font-size: 12px;
  white-space: normal;
}

/* ===========================================
   SECTION 23 — Marketplace (gid17)
   =========================================== */

/* --- Tab nav (#textmenu) --- */
/* Desktop 5-tab layout (Send resources | Buy | Sell | NPC Merchant |
   Trade routes) overflows 380px mobile by 64px. Tighten padding/font
   AND shorten the 3 long labels via font-size:0 + ::after content swap.
   Pipe separators are text nodes between anchors — they keep the parent
   12px font so dividers stay visible. Desktop markup untouched. */
.is-mobile div#build.gid17 #textmenu {
  white-space: nowrap;
  overflow-x: hidden !important;
  text-align: center;
  font-size: 12px;
}
.is-mobile div#build.gid17 #textmenu > a {
  padding: 4px 4px !important;
  font-size: 0 !important;
}
.is-mobile div#build.gid17 #textmenu > a::after {
  font-size: 12px;
  font-weight: bold;
}
.is-mobile div#build.gid17 #textmenu > a:nth-of-type(1)::after { content: "Send"; }
.is-mobile div#build.gid17 #textmenu > a:nth-of-type(2)::after { content: "Buy"; }
.is-mobile div#build.gid17 #textmenu > a:nth-of-type(3)::after { content: "Sell"; }
.is-mobile div#build.gid17 #textmenu > a:nth-of-type(4)::after { content: "NPC"; }
.is-mobile div#build.gid17 #textmenu > a:nth-of-type(5)::after { content: "Routes"; }

/* --- Send resources: target select table (#target_select) --- */
/* Fix X/Y row wrapping. Inputs shrunk from 47px→40px and td.coo made
   nowrap so both X and Y fit on one line inside the narrow (152px) cell. */
.is-mobile div#build.gid17 table#target_select td.coo {
  white-space: nowrap;
  text-align: center;
  padding: 4px 2px !important;
}
.is-mobile div#build.gid17 table#target_select td.coo span {
  display: inline-block !important;
  float: none !important;
  margin-right: 3px;
  vertical-align: middle;
  font-weight: bold;
}
.is-mobile div#build.gid17 table#target_select td.coo input.text {
  display: inline-block !important;
  float: none !important;
  width: 40px !important;
  min-width: 0 !important;
  margin-right: 6px;
  padding: 2px 3px !important;
  vertical-align: middle;
  box-sizing: border-box;
}
.is-mobile div#build.gid17 table#target_select td.coo input.text[name="y"] {
  margin-right: 0;
}

/* Align "Merchants run:" with Village/X labels in #target_select.
   #merchant_multiply table sits 22px to the left of #target_select in
   the form layout — shift it right so the text starts at the same
   column as Village:/X: labels. Also widen and nowrap so the "1x"
   dropdown sits inline with the label instead of wrapping below. */
.is-mobile div#build.gid17 table#merchant_multiply {
  margin-left: 42px !important;
  width: auto !important;
}
.is-mobile div#build.gid17 table#merchant_multiply td.mul {
  white-space: nowrap !important;
  width: auto !important;
}
.is-mobile div#build.gid17 table#merchant_multiply td.mul select {
  display: inline-block !important;
  float: none !important;
  vertical-align: middle;
  margin-left: 4px;
}

/* --- NPC Merchant tab (t=3) — #npc table ---
   Desktop: 4 resource cols × 93px + sum col 159px = 535px. Overflows
   412px viewport by 123px. Shrink via table-layout:fixed + %widths,
   smaller font, tighter padding, inputs fill cell. */
.is-mobile div#build.gid17 table#npc {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  box-sizing: border-box;
  border-collapse: collapse;
}
.is-mobile div#build.gid17 table#npc th {
  font-size: 13px !important;
  padding: 4px 3px !important;
}
.is-mobile div#build.gid17 table#npc td {
  font-size: 11px !important;
  padding: 3px 2px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-mobile div#build.gid17 table#npc td.all,
.is-mobile div#build.gid17 table#npc td.sel,
.is-mobile div#build.gid17 table#npc td.rem {
  width: 17% !important;
}
.is-mobile div#build.gid17 table#npc td.sum {
  width: 32% !important;
  font-weight: bold;
}
.is-mobile div#build.gid17 table#npc td.sel input {
  display: block !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 3px !important;
  font-size: 12px !important;
  text-align: right;
}

/* --- Trade Routes tab (t=4) --- */
/* LIST view (#trading_routes): 6 cols (action|Desc|Res|Interval|Merchants|
   Next dispatch). Desktop 443px overflows 412 viewport by 31px. Shrink
   font, tighten padding, shorten headers via ::after content swap. */
.is-mobile div#build.gid17 table#trading_routes {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  box-sizing: border-box;
  border-collapse: collapse;
  border: 1px solid #888;
}
.is-mobile div#build.gid17 table#trading_routes th {
  padding: 3px 2px !important;
  font-size: 0 !important;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #888;
  background: #DDDCDA;
  color: #333;
}
.is-mobile div#build.gid17 table#trading_routes th::after {
  font-size: 10px;
  font-weight: bold;
}
.is-mobile div#build.gid17 table#trading_routes th:nth-child(2)::after { content: "Info"; }
.is-mobile div#build.gid17 table#trading_routes th:nth-child(3)::after { content: "Res"; }
.is-mobile div#build.gid17 table#trading_routes th:nth-child(4)::after { content: "Every"; }
.is-mobile div#build.gid17 table#trading_routes th:nth-child(5)::after { content: "Mer"; }
.is-mobile div#build.gid17 table#trading_routes th:nth-child(6)::after { content: "Next"; }
.is-mobile div#build.gid17 table#trading_routes td {
  padding: 3px 2px !important;
  font-size: 11px !important;
  overflow-wrap: normal;
  word-break: keep-all;
  border: 1px solid #b9b9b9;
}
.is-mobile div#build.gid17 table#trading_routes td.desc {
  white-space: normal;
  line-height: 1.15;
}
.is-mobile div#build.gid17 table#trading_routes td.rss,
.is-mobile div#build.gid17 table#trading_routes td.start,
.is-mobile div#build.gid17 table#trading_routes td.trad,
.is-mobile div#build.gid17 table#trading_routes td.dur {
  white-space: nowrap;
  text-align: center;
}
.is-mobile div#build.gid17 table#trading_routes td.rss img {
  vertical-align: middle;
}
.is-mobile div#build.gid17 table#trading_routes td.none {
  text-align: center;
  font-size: 12px !important;
  color: #888;
}

/* CREATE form (#trading_edit): label + value 2-col table. Resources row
   forces TD to 411px because 4 tr-res-group sit side-by-side. Wrap them
   into 2x2 via inline-flex + shrink inputs. */
.is-mobile div#build.gid17 table#trading_edit {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  box-sizing: border-box;
  border-collapse: collapse;
}
.is-mobile div#build.gid17 table#trading_edit thead th {
  padding: 4px 6px !important;
  font-size: 13px !important;
  text-align: center;
  background: #DDDCDA;
  border: 1px solid #888;
}
.is-mobile div#build.gid17 table#trading_edit tbody th {
  width: 34% !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  border: 1px solid #b9b9b9;
}
.is-mobile div#build.gid17 table#trading_edit tbody td {
  width: 66% !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  border: 1px solid #b9b9b9;
}
.is-mobile div#build.gid17 table#trading_edit tbody td select.dropdown {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  font-size: 12px;
}
.is-mobile div#build.gid17 table#trading_edit tbody td.res {
  white-space: normal;
  line-height: 1.6;
}
.is-mobile div#build.gid17 table#trading_edit tbody td.res .tr-res-group {
  display: flex !important;
  align-items: center;
  width: 100%;
  margin: 3px 0;
  white-space: nowrap;
}
.is-mobile div#build.gid17 table#trading_edit tbody td.res .tr-res-group img {
  flex: 0 0 auto;
  margin-right: 4px;
}
.is-mobile div#build.gid17 table#trading_edit tbody td.res .tr-res-group input.text {
  display: inline-block !important;
  float: none !important;
  flex: 0 0 60px;
  width: 60px !important;
  min-width: 60px !important;
  padding: 2px 3px !important;
  margin: 0 6px;
  box-sizing: border-box;
  font-size: 12px;
}
.is-mobile div#build.gid17 table#trading_edit tbody td.res .tr-cap-link {
  flex: 0 0 auto;
  font-size: 12px;
  white-space: nowrap;
}

/* ===========================================
   SECTION 27 — Wonder of the World (gid40)
   =========================================== */

/* WW building image (.building.g40) is unusually large (214x154 vs ~70px
   for normal buildings), absolutely positioned at left 168 — overlaps
   description text on mobile. Use zoom to proportionally shrink the
   whole element (CSS background included) and shift to the right edge.
   Zoom (not transform:scale) so the post-scale box is actually smaller
   and the layout respects the new size. */
.is-mobile div#build.gid40 img.building.g40 {
  zoom: 0.75;
  left: auto !important;
  right: 20px !important;
  top: 115px !important;
}

/* ===========================================
   SECTION 26 — Residence / Palace (gid25 / gid26)
   =========================================== */

/* --- Tab nav (#textmenu) ---
   4 tabs: Train | Culture points | Loyalty | Expansion.
   Desktop 394px overflows mobile viewport → scrollbar. Shorten
   "Culture points" → "Culture" via font-size:0 + ::after swap,
   tighter padding/font. Desktop markup untouched. */
.is-mobile div#build.gid25 #textmenu,
.is-mobile div#build.gid26 #textmenu {
  white-space: nowrap;
  overflow-x: hidden !important;
  text-align: center;
  font-size: 12px;
}
.is-mobile div#build.gid25 #textmenu > a,
.is-mobile div#build.gid26 #textmenu > a {
  padding: 4px 5px !important;
  font-size: 12px !important;
}
.is-mobile div#build.gid25 #textmenu > a:nth-of-type(2),
.is-mobile div#build.gid26 #textmenu > a:nth-of-type(2) {
  font-size: 0 !important;
}
.is-mobile div#build.gid25 #textmenu > a:nth-of-type(2)::after,
.is-mobile div#build.gid26 #textmenu > a:nth-of-type(2)::after {
  content: "Culture";
  font-size: 12px;
  font-weight: bold;
}

/* --- Culture Points tab: #build_value table ---
   Table is 2-col (TH label + TD value). Both cells have nowrap which
   forces the value column wider than viewport, clipping the text.
   Desktop: side-by-side. Mobile: stack label above value per row via
   display:block on th/td so the full-width label sits on its own line
   and the value wraps naturally below, no ugly whitespace. */
.is-mobile div#build.gid25 table#build_value,
.is-mobile div#build.gid26 table#build_value {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0 !important;
  display: block;
  overflow: hidden !important;
}
.is-mobile div#build.gid25 table#build_value tbody,
.is-mobile div#build.gid26 table#build_value tbody {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.is-mobile div#build.gid25 table#build_value tr,
.is-mobile div#build.gid26 table#build_value tr {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.is-mobile div#build.gid25 table#build_value th,
.is-mobile div#build.gid26 table#build_value th {
  display: block;
  width: 100%;
  white-space: normal !important;
  text-align: left;
  padding: 2px 0 !important;
  font-size: 12px !important;
  font-weight: bold;
}
.is-mobile div#build.gid25 table#build_value td,
.is-mobile div#build.gid26 table#build_value td {
  display: block;
  width: 100%;
  white-space: normal !important;
  text-align: left;
  padding: 0 0 2px 8px !important;
  font-size: 12px !important;
}

/* --- Expansion tab: #expansion table ---
   5 cols (Village | Player | Inhabitants | Coordinates | Date).
   Desktop 417px overflows 412 by 5px; "Inhabitants" and "Coordinates"
   headers force wide columns even though body content is short (2 /
   (3|1)). Shrink font, tighten padding, shorten headers via
   font-size:0 + ::after swap. */
.is-mobile div#build.gid25 table#expansion,
.is-mobile div#build.gid26 table#expansion {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  box-sizing: border-box;
  border-collapse: collapse;
  border: 1px solid #888;
}
.is-mobile div#build.gid25 table#expansion thead th,
.is-mobile div#build.gid26 table#expansion thead th {
  padding: 4px 3px !important;
  font-size: 12px !important;
  text-align: center;
  background: #DDDCDA;
  color: #333;
  border: 1px solid #888;
}
.is-mobile div#build.gid25 table#expansion thead td,
.is-mobile div#build.gid26 table#expansion thead td {
  padding: 3px 2px !important;
  font-size: 0 !important;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #888;
  background: #DDDCDA;
}
.is-mobile div#build.gid25 table#expansion thead td::after,
.is-mobile div#build.gid26 table#expansion thead td::after {
  font-size: 11px;
  font-weight: bold;
}
.is-mobile div#build.gid25 table#expansion thead tr:nth-child(2) td:nth-child(1)::after,
.is-mobile div#build.gid26 table#expansion thead tr:nth-child(2) td:nth-child(1)::after { content: "Village"; }
.is-mobile div#build.gid25 table#expansion thead tr:nth-child(2) td:nth-child(2)::after,
.is-mobile div#build.gid26 table#expansion thead tr:nth-child(2) td:nth-child(2)::after { content: "Player"; }
.is-mobile div#build.gid25 table#expansion thead tr:nth-child(2) td:nth-child(3)::after,
.is-mobile div#build.gid26 table#expansion thead tr:nth-child(2) td:nth-child(3)::after { content: "Pop"; }
.is-mobile div#build.gid25 table#expansion thead tr:nth-child(2) td:nth-child(4)::after,
.is-mobile div#build.gid26 table#expansion thead tr:nth-child(2) td:nth-child(4)::after { content: "Loc"; }
.is-mobile div#build.gid25 table#expansion thead tr:nth-child(2) td:nth-child(5)::after,
.is-mobile div#build.gid26 table#expansion thead tr:nth-child(2) td:nth-child(5)::after { content: "Date"; }
.is-mobile div#build.gid25 table#expansion tbody td,
.is-mobile div#build.gid26 table#expansion tbody td {
  padding: 3px 2px !important;
  font-size: 11px !important;
  border: 1px solid #b9b9b9;
  overflow-wrap: normal;
  word-break: keep-all;
}
.is-mobile div#build.gid25 table#expansion tbody td.nam,
.is-mobile div#build.gid26 table#expansion tbody td.nam {
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}
.is-mobile div#build.gid25 table#expansion tbody td.pla,
.is-mobile div#build.gid26 table#expansion tbody td.pla {
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}
.is-mobile div#build.gid25 table#expansion tbody td.ha,
.is-mobile div#build.gid26 table#expansion tbody td.ha {
  white-space: nowrap;
  text-align: center;
}
.is-mobile div#build.gid25 table#expansion tbody td.aligned_coords,
.is-mobile div#build.gid26 table#expansion tbody td.aligned_coords {
  white-space: nowrap !important;
  text-align: center;
}
.is-mobile div#build.gid25 table#expansion tbody td.dat,
.is-mobile div#build.gid26 table#expansion tbody td.dat {
  white-space: nowrap;
  text-align: center;
}

/* ===========================================
   SECTION 25 — Rally Point (gid16)
   =========================================== */

/* --- Tab nav (#textmenu) ---
   5 tabs: Overview | Send troops | Combat simulator | Farm list | Evasion.
   Show the FULL labels and let the row WRAP onto a second line when it doesn't
   fit, instead of scrolling sideways or renaming tabs — same pattern as the
   alliance/forum tabs (font-size:0 on the container collapses the " | "
   separator text-nodes; the anchors restore it). */
.is-mobile div#build.gid16 #textmenu {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;     /* allow tabs to wrap onto new rows */
  font-size: 0 !important;            /* collapse the " | " separators */
  text-align: center !important;
  border-bottom: 1px solid #ddd !important;
  padding: 0 !important;
  /* Rally Point building image (img.building.g16, ~120px) floats to the right of
     the description; push the tab row down past it. */
  margin-top: 55px !important;
}
.is-mobile div#build.gid16 #textmenu > a {
  display: inline-block !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;     /* keep each label intact; wrap between tabs */
}
.is-mobile div#build.gid16 #textmenu > a.selected {
  border-bottom: 2px solid #71D000 !important;
  padding-bottom: 4px !important;
}

/* Movement pager (.rpPager / a.rpPg): the desktop buttons are tiny (11px, 2px
   padding) — fine for a mouse, too small to tap. Enlarge to finger-friendly
   ~40px tap targets on mobile, with more gap so neighbours aren't fat-fingered. */
.is-mobile div#build.gid16 .rpPager {
  gap: 4px !important;
}
.is-mobile div#build.gid16 a.rpPg {
  min-width: 22px !important;
  padding: 5px 8px !important;   /* ~22px tall — still tappable, half the earlier size */
  font-size: 13px !important;
  line-height: 1.1 !important;
}

/* ===========================================
   SECTION 24 — Main Building (gid15)
   =========================================== */

/* Demolish form: select dropdown + demolish button + instant demolish
   button + gold cost span. On desktop all inline on one row; on mobile
   they total ~470px and overflow → instant button wraps. Force select
   to its own row (100% wide) so both buttons sit side-by-side below. */
.is-mobile div#build.gid15 #contract form.demolish_building {
  display: block;
}
.is-mobile div#build.gid15 #contract form.demolish_building select[name="drbid"] {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.is-mobile div#build.gid15 #contract form.demolish_building #btn_demolish,
.is-mobile div#build.gid15 #contract form.demolish_building #btn_demolish_gold {
  display: inline-block !important;
  float: none !important;
  vertical-align: middle;
  margin-right: 4px;
}
.is-mobile div#build.gid15 #contract form.demolish_building .demolish_gold_cost {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  white-space: nowrap;
}

/* --- Troop detail tables (movements, stationary troops) ---
   table.troop_details has variable columns (1 per troop type, up to ~12).
   These WILL overflow on 375px. Use overflow-x: auto on the table itself.
   Do NOT use display: block. */
.is-mobile table.troop_details {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
}

/* --- Filter box (rpFilterBox) --- */
.is-mobile #rpFilterBox {
  width: 100% !important;
}

.is-mobile #rpFilterBox table.rpGrid {
  width: 100% !important;
}

.is-mobile #rpFilterBox .rpFlt {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* --- Farm list tab --- */

/* Farm list message boxes */
.is-mobile table.farmlist_message {
  width: 100% !important;
}

/* Coordinate inputs in farm list forms */
.is-mobile div#build input.coordinates,
.is-mobile div#build input[name="coord_x"],
.is-mobile div#build input[name="coord_y"] {
  width: 55px !important;
  font-size: 16px !important;
  min-height: 44px;
  text-align: center;
  padding: 4px !important;
}

/* Troop count inputs: id="t1"..."t6", "popup_t1"..."popup_t11",
   "addpopup_t1"..."addpopup_t11", "bulk_bt1"..."bulk_bt11" */
.is-mobile div#build input[id^="t"][maxlength="6"],
.is-mobile div#build input[id^="popup_t"][maxlength="6"],
.is-mobile div#build input[id^="addpopup_t"][maxlength="6"],
.is-mobile div#build input[id^="bulk_bt"][maxlength="6"] {
  width: 45px !important;
  font-size: 16px !important;
  min-height: 40px;
  text-align: center;
  padding: 2px !important;
}

/* Farm list name input */
.is-mobile div#build input[name="list_name"] {
  width: 100% !important;
  font-size: 16px !important;
  min-height: 44px;
  box-sizing: border-box;
}

/* Farm list select dropdown */
.is-mobile div#build select[name="list_id"],
.is-mobile div#build select[name="village_id"] {
  width: 100% !important;
  font-size: 16px !important;
  min-height: 44px;
}

/* Target info table, troop selection table inside farm list */
.is-mobile table#target_info,
.is-mobile table#troops {
  width: 100% !important;
}

/* Popup modals (add target / edit entry) — fit viewport */
.is-mobile div#build [id$="PopupContent"] {
  width: 95vw !important;
  max-width: 400px !important;
  box-sizing: border-box;
}

/* Submit buttons in build pages — enlarge tap area via padding on container.
   Do NOT set min-height on input.dynamic_img — these are sprite buttons
   (20px tall, background-image on transparent GIF). Forcing min-height
   expands the transparent area and shows the alt text as a "second button". */
.is-mobile div#build p.btn {
  padding: 12px 0 !important;
}

/* Non-sprite submit buttons and regular buttons.
   EXCLUDE .dynamic_img — those are 20px sprite buttons; min-height breaks them. */
.is-mobile div#build input[type="submit"]:not(.dynamic_img),
.is-mobile div#build button:not(#mobile-menu-close):not(#mobile-vlist-close) {
  min-height: 44px;
  min-width: 44px;
}

/* --- Evasion tab --- */
.is-mobile table#evasion_table {
  width: 100% !important;
}

/* --- Send troops page (v2v.php — linked from Rally Point) --- */
/* Note: v2v.php uses its own page class, not inside #build.
   These inputs may need separate treatment in a future phase. */

/* ===========================================
   19. REPORTS PAGE (report.php)
   Desktop: div.reports { width: 502px; overflow-x: hidden }
   =========================================== */

.is-mobile div.reports {
  width: 100% !important;
  padding: 8px !important;
  overflow-x: visible !important;
  box-sizing: border-box !important;
}

/* Override desktop .reports table { min-width: 500px } which breaks mobile */
.is-mobile div.reports table,
.is-mobile .reports table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Subject column — kill hardcoded 340px max-width, allow wrap */
.is-mobile div.reports table#overview td.sub div a {
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word;
}
.is-mobile div.reports table#overview td.sub div {
  padding-left: 22px !important;
}
.is-mobile div.reports table#overview td.sub {
  width: auto !important;
}
.is-mobile div.reports table#overview td.dat {
  width: 28% !important;
  font-size: 11px;
  padding: 3px 2px !important;
}
.is-mobile div.reports table#overview td.sel {
  width: 24px !important;
  padding: 2px !important;
}
.is-mobile div.reports table#overview td,
.is-mobile div.reports table#overview th {
  padding: 3px 4px !important;
}

/* Report detail container — table#report_surround also gets min-width override above */
.is-mobile div.reports table#report_surround {
  table-layout: auto;
}

/* Report content cell — keep as table-cell; do NOT use display:block
   (it collapses td width to inner min-content) */
.is-mobile div.reports td.report_content {
  padding: 8px 0 0 !important;
  max-width: 0;  /* with table-layout fixed on parent, allows cell to shrink/grow properly */
}

/* Nested inner table (troop stats) inside report_content — allow scroll */
.is-mobile div.reports td.report_content > table {
  width: 100% !important;
  min-width: 0 !important;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.is-mobile div.reports td.report_content > table > tbody,
.is-mobile div.reports td.report_content > table > thead {
  display: table;
  min-width: 100%;
}

/* Outer #report_surround: force fixed layout so cells obey widths */
.is-mobile div.reports > form > table#report_surround,
.is-mobile div.reports > table#report_surround {
  table-layout: fixed !important;
  width: 100% !important;
}
.is-mobile div.reports > form > table#report_surround > thead th,
.is-mobile div.reports > form > table#report_surround > tbody > tr > td.sent,
.is-mobile div.reports > table#report_surround > thead th,
.is-mobile div.reports > table#report_surround > tbody > tr > td.sent {
  width: auto !important;
}
.is-mobile div.reports > form > table#report_surround > thead > tr:first-child th:first-child,
.is-mobile div.reports > form > table#report_surround > tbody > tr:first-child > td:first-child,
.is-mobile div.reports > table#report_surround > thead > tr:first-child th:first-child {
  width: 80px !important;
}

/* Report images (adventure, battle landscape) — fit viewport */
.is-mobile div.reports td.report_content img,
.is-mobile div.reports img.battle_loc,
.is-mobile div.reports img#battle_loc {
  max-width: 100% !important;
  height: auto !important;
}

/* Navigation row (Newer / Older) */
.is-mobile div.reports table#report_surround thead td.sent {
  width: auto !important;
}

/* tfoot action row: keep all 3 buttons on one line even with GoldClub
   (delete + read all + archive = 97*3 + margins would wrap at 412px) */
.is-mobile div.reports table#overview tfoot th.sel {
  width: 20px !important;
  padding: 2px 1px !important;
}
.is-mobile div.reports table#overview tfoot th.buttons {
  white-space: nowrap !important;
  text-align: center !important;
  padding: 3px 1px !important;
}
.is-mobile div.reports table#overview tfoot th.buttons input {
  margin-left: 2px !important;
  vertical-align: middle;
}
.is-mobile div.reports table#overview tfoot th.buttons input:first-of-type {
  margin-left: 0 !important;
}
.is-mobile div.reports table#overview tfoot th.navi {
  white-space: nowrap !important;
  padding: 2px 1px !important;
}

/* ============================================
   20. MESSAGES PAGE (msg.php)
   Desktop: div.messages { width: 502px }
   Notebook sprites (msg_head/msg_content/msg_foot) are fixed 440px bg images.
   Shared by both read view and write view (both use write_* IDs w/ msg_* classes).
   Fix: shrink container + scale notebook via CSS zoom to fit mobile viewport.
   =========================================== */

.is-mobile div.messages {
  width: 100% !important;
  padding: 8px 0 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Scale notebook (440px native) to ~396px via zoom — fits 412px viewport.
   zoom affects layout size (unlike transform:scale) so margin:auto centers. */
.is-mobile div.messages div.msg_head,
.is-mobile div.messages div.msg_content,
.is-mobile div.messages div.msg_foot {
  zoom: 0.9;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Narrower phones (iPhone SE 375, etc.) — scale down further so 440px fits */
@media (max-width: 400px) {
  .is-mobile div.messages div.msg_head,
  .is-mobile div.messages div.msg_content,
  .is-mobile div.messages div.msg_foot {
    zoom: 0.82;
  }
}

/* Error banner + alliance tip at the bottom should fit viewport */
.is-mobile div.messages span.error,
.is-mobile div.messages > span.error {
  display: block;
  margin: 4px 8px;
  word-break: break-word;
}

/* ============================================
   21. PLAYER PROFILE PAGE (profile.php)
   Desktop: div.player { width: 502px }
   Profile tab table#edit has 3 cols: label | value | desc1 rowspan=8 textarea (249px).
   Fix: container full width, table-layout:fixed with mobile col widths,
        shrink desc1/desc2 textareas to fill their cells.
   =========================================== */

.is-mobile div.player {
  width: 100% !important;
  padding: 8px !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Profile edit form: 3 columns (label | value | description) */
.is-mobile div.player table#edit {
  width: 100% !important;
  table-layout: fixed !important;
}
.is-mobile div.player table#edit tbody th {
  width: 28% !important;
  white-space: normal !important;
  word-break: break-word;
  padding: 2px 4px !important;
  font-size: 12px;
}
.is-mobile div.player table#edit tbody td.birth,
.is-mobile div.player table#edit tbody td.gend,
.is-mobile div.player table#edit tbody tr > td:not(.desc1):not(.desc2):not(.empty) {
  width: 32% !important;
  padding: 2px 2px !important;
}
.is-mobile div.player table#edit tbody td.desc1 {
  width: 40% !important;
}
.is-mobile div.player table#edit thead td {
  width: auto !important;
}

/* Inputs and textareas: fill their cell */
.is-mobile div.player table#edit input.text {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.is-mobile div.player table#edit td.desc1 textarea,
.is-mobile div.player table#edit td.desc2 textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.is-mobile div.player table#edit td.desc1 textarea {
  height: 180px !important;
}
.is-mobile div.player table#edit td.desc2 textarea {
  height: 120px !important;
}

/* Date triple: day + month + year — allow wrap if needed */
.is-mobile div.player table#edit td.birth {
  white-space: normal !important;
}
.is-mobile div.player table#edit td.birth input.day {
  width: 28px !important;
}
.is-mobile div.player table#edit td.birth select.month,
.is-mobile div.player table#edit td.birth select.year {
  max-width: 100%;
}

/* Gender radios: compact, wrap-friendly */
.is-mobile div.player table#edit td.gend {
  white-space: normal !important;
  font-size: 12px;
}
.is-mobile div.player table#edit td.gend label {
  display: inline-block;
  margin-right: 4px;
}

/* Nav tabs (Overview | Profile | Preferences | ...) — let them wrap on mobile */
.is-mobile div.player > ul,
.is-mobile div.player p.menu,
.is-mobile div.player div#textmenu {
  white-space: normal !important;
  word-spacing: 0;
  line-height: 1.6;
}

/* Other profile sub-tables default to 100% width */
.is-mobile div.player table#medals,
.is-mobile div.player table#links,
.is-mobile div.player table#change_pass,
.is-mobile div.player table#gpack,
.is-mobile div.player table.account,
.is-mobile div.player table#del_acc,
.is-mobile div.player table#adsettings,
.is-mobile div.player table#time {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto;
}

/* Direct links: let the text inputs shrink to fill their column instead of
   keeping their fixed desktop widths (the URL input's cell is td.txt, not the
   stale td.link the desktop rule targets), so the 4-col table fits the viewport. */
.is-mobile div.player table#links td.nr input.text,
.is-mobile div.player table#links td.nam input.text,
.is-mobile div.player table#links td.txt input.text {
  width: 100% !important;
  box-sizing: border-box;
}

/* ============================================
   22. ALLIANCE PAGE (alliance.php)
   Desktop: div.alliance { width: 502px }
   About Us tab uses same table#edit pattern as profile.php:
   3 cols (label | value | desc1 rowspan=4 textarea 249px), final row colspan=2 desc2.
   =========================================== */

.is-mobile div.alliance {
  width: 100% !important;
  padding: 8px !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

.is-mobile div.alliance table#edit {
  width: 100% !important;
  table-layout: fixed !important;
}
.is-mobile div.alliance table#edit tbody th {
  width: 28% !important;
  white-space: normal !important;
  word-break: break-word;
  padding: 2px 4px !important;
  font-size: 12px;
}
.is-mobile div.alliance table#edit tbody td.birth,
.is-mobile div.alliance table#edit tbody td.gend,
.is-mobile div.alliance table#edit tbody tr > td:not(.desc1):not(.desc2):not(.empty) {
  width: 32% !important;
  padding: 2px 2px !important;
}
.is-mobile div.alliance table#edit tbody td.desc1 {
  width: 40% !important;
}
.is-mobile div.alliance table#edit thead td {
  width: auto !important;
}

.is-mobile div.alliance table#edit input.text {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.is-mobile div.alliance table#edit td.desc1 textarea,
.is-mobile div.alliance table#edit td.desc2 textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.is-mobile div.alliance table#edit td.desc1 textarea {
  height: 180px !important;
}
.is-mobile div.alliance table#edit td.desc2 textarea {
  height: 120px !important;
}

/* Other alliance sub-tables default to 100% width (preemptive for other tabs) */
.is-mobile div.alliance table#medals,
.is-mobile div.alliance table#members,
.is-mobile div.alliance table#overview,
.is-mobile div.alliance table#profile {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================
   23. CROPPER FINDER (cropfinder.php)
   Wrapped by div.player (#cropfinder). Two 225px map previews sit side-by-side
   on desktop but stack on mobile. Form has X/Y ref inputs that wrap ugly.
   =========================================== */

/* Two map previews — force side-by-side, scale to fit */
.is-mobile #cropfinder .cropfinder-images {
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 12px !important;
  flex-wrap: nowrap;
}
.is-mobile #cropfinder .cropfinder-images img {
  width: calc(50% - 6px) !important;
  max-width: 225px;
  height: auto !important;
  margin: 0 !important;
}

/* Search form table: tighten column widths and inputs */
.is-mobile #cropfinder form table.default.vis {
  width: 100% !important;
  table-layout: fixed;
}
.is-mobile #cropfinder form table.default.vis tbody td:first-child {
  width: 45% !important;
  white-space: normal;
  word-break: break-word;
  font-size: 12px;
  padding: 4px 6px !important;
}
.is-mobile #cropfinder form table.default.vis tbody td:nth-child(2) {
  padding: 4px 6px !important;
}

/* Radio options (Both/15c/9c) — allow wrap, smaller font */
.is-mobile #cropfinder form table.default.vis tbody tr:first-child td:nth-child(2) {
  font-size: 12px;
  line-height: 1.6;
}

/* X/Y ref-position row: force inline pairs, compact inputs */
.is-mobile #cropfinder .cf-xy-cell {
  white-space: nowrap !important;
  text-align: center;
}
.is-mobile #cropfinder .cf-xy-pair {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 4px;
}
.is-mobile #cropfinder .cf-xy-pair label {
  font-weight: bold;
  font-size: 12px;
}
.is-mobile #cropfinder .cf-xy-pair input.text {
  width: 46px !important;
  padding: 2px 3px !important;
  text-align: center;
  box-sizing: border-box;
}

/* Max Distance input — compact */
.is-mobile #cropfinder form table.default.vis tbody tr input[name="cropper_max_dist"] {
  width: 56px !important;
  padding: 2px 3px !important;
  text-align: center;
}

/* Oasis bonus dropdown — fit cell */
.is-mobile #cropfinder form table.default.vis select.dropdown {
  max-width: 100%;
}

/* Results table — 6 columns must fit mobile viewport.
   Columns: Type | Coordinates | Owner | Status | Distance | Oasis */
.is-mobile #cropfinder table.row_table_data {
  width: 100% !important;
  table-layout: fixed !important;
  font-size: 11px;
}
.is-mobile #cropfinder table.row_table_data thead tr.title-row th {
  font-size: 12px;
  white-space: normal;
  word-break: break-word;
  padding: 4px 2px !important;
  line-height: 1.3;
}
.is-mobile #cropfinder table.row_table_data thead tr:not(.title-row) td {
  font-size: 11px;
  padding: 3px 1px !important;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.2;
}
.is-mobile #cropfinder table.row_table_data tbody td {
  padding: 3px 1px !important;
  word-break: break-word;
  line-height: 1.3;
}

/* Column width distribution (total 100%) */
.is-mobile #cropfinder table.row_table_data thead tr:not(.title-row) td:nth-child(1),
.is-mobile #cropfinder table.row_table_data tbody tr td:nth-child(1) {
  width: 13% !important;  /* Type (9c/15c) */
}
.is-mobile #cropfinder table.row_table_data thead tr:not(.title-row) td:nth-child(2),
.is-mobile #cropfinder table.row_table_data tbody tr td:nth-child(2) {
  width: 20% !important;  /* Coordinates */
}
.is-mobile #cropfinder table.row_table_data thead tr:not(.title-row) td:nth-child(3),
.is-mobile #cropfinder table.row_table_data tbody tr td:nth-child(3) {
  width: 22% !important;  /* Owner */
}
.is-mobile #cropfinder table.row_table_data thead tr:not(.title-row) td:nth-child(4),
.is-mobile #cropfinder table.row_table_data tbody tr td:nth-child(4) {
  width: 20% !important;  /* Status */
}
.is-mobile #cropfinder table.row_table_data thead tr:not(.title-row) td:nth-child(5),
.is-mobile #cropfinder table.row_table_data tbody tr td:nth-child(5) {
  width: 12% !important;  /* Distance */
}
.is-mobile #cropfinder table.row_table_data thead tr:not(.title-row) td:nth-child(6),
.is-mobile #cropfinder table.row_table_data tbody tr td:nth-child(6) {
  width: 13% !important;  /* Oasis */
}

/* Colspan=6 "no results" / full-width rows */
.is-mobile #cropfinder table.row_table_data tbody td[colspan="6"] {
  width: auto !important;
}

/* Coordinates link — keep (X|Y) together */
.is-mobile #cropfinder table.row_table_data tbody td:nth-child(2) a {
  white-space: nowrap;
}

/* Status cell bold text should still be readable */
.is-mobile #cropfinder table.row_table_data tbody td:nth-child(4) b {
  font-size: 10px;
}

/* Pagination navi table */
.is-mobile #cropfinder table#search_navi {
  width: 100% !important;
  font-size: 12px;
}
.is-mobile #cropfinder table#search_navi div.navi {
  white-space: normal;
  line-height: 1.6;
}

/* ============================================
   24. CHAT PAGE (chat.php)
   Desktop: div.player #chat_container { width: 470px }, #chatbox { width: 448px }
   Both overflow on mobile. Toolbar has 11+ bb buttons that need to wrap.
   =========================================== */

.is-mobile div.player #chat_container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Tab row: keep inline, font-size friendly, allow online counter to sit right */
.is-mobile div.player #chat_tabs {
  flex-wrap: wrap;
  gap: 2px;
}
.is-mobile div.player #chat_tabs .chat_tab {
  padding: 6px 14px !important;
  font-size: 12px;
}
.is-mobile div.player #chat_online {
  font-size: 11px;
  margin-left: auto;
}

/* Chatbox: fill width, slightly shorter height for mobile viewport */
.is-mobile div.player #chatbox {
  width: 100% !important;
  max-width: 100% !important;
  height: 320px !important;
  box-sizing: border-box;
  font-size: 12px;
}
.is-mobile div.player #chatbox .chatMsg {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Grouped message time becomes visible on tap (desktop uses :hover) */
.is-mobile div.player #chatbox .chatMsgGrouped .chatTime {
  visibility: visible !important;
  font-size: 9px !important;
  width: auto !important;
  margin-left: 4px;
  color: #aaa;
}

/* BB toolbar: allow buttons to wrap onto multiple rows */
.is-mobile div.player #chat_toolbar {
  padding: 6px 4px !important;
  overflow: visible !important;
}
.is-mobile div.player #chat_toolbar .bb_btn {
  padding: 4px 8px !important;
  margin: 2px !important;
  font-size: 11px;
  min-height: 28px;
  box-sizing: border-box;
}
.is-mobile div.player #chat_toolbar select.bb_btn {
  max-width: 80px;
  height: 28px !important;
}
.is-mobile div.player #chat_toolbar .chatAdminClear {
  float: none !important;
}

/* Scroll-to-latest button: keep within container right edge */
.is-mobile div.player #chat_scroll_btn {
  right: 10px !important;
  bottom: 84px !important;
}

/* Input row: flex with min-width defence + touch-friendly sizes */
.is-mobile div.player #chat_input {
  padding: 8px 6px !important;
  box-sizing: border-box;
}
.is-mobile div.player #chat_input form {
  flex-wrap: nowrap;
  gap: 6px;
}
.is-mobile div.player #chat_input #usermsg {
  flex: 1 1 auto !important;
  min-width: 0 !important;         /* prevent flex overflow */
  width: auto !important;
  padding: 8px 8px !important;
  font-size: 14px !important;      /* 16px causes iOS zoom; 14 is safe */
  box-sizing: border-box;
  min-height: 36px;
}
.is-mobile div.player #chat_input #submitmsg {
  flex: 0 0 auto !important;
  padding: 8px 14px !important;
  font-size: 12px;
  min-height: 36px;
}
.is-mobile div.player #chat_charcount {
  flex: 0 0 auto;
  min-width: 22px;
  font-size: 10px;
}

/* Toast sits over the input row, centered */
.is-mobile div.player #chat_toast {
  left: 50% !important;
  max-width: 90%;
  font-size: 11px;
}

/* ============================================
   NPC MERCHANT SHOP — MOBILE
   ============================================ */

/* Header: stack balances and exchange vertically */
.is-mobile .npc-shop-header {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 6px 8px !important;
  gap: 6px;
}

.is-mobile .npc-shop-balances {
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 4px !important;
}

.is-mobile .npc-shop-balance {
  font-size: 13px !important;
}

/* Exchange: stack the two groups vertically, compact */
.is-mobile .npc-exchange-row {
  flex-direction: column !important;
  gap: 6px !important;
}

.is-mobile .npc-exchange-group {
  justify-content: center;
}

.is-mobile .npc-exchange-input {
  width: 42px !important;
  height: 20px !important;
  font-size: 11px !important;
}

.is-mobile .npc-exchange-btn {
  padding: 2px 6px !important;
  height: 22px !important;
  font-size: 10px !important;
}

.is-mobile .npc-exchange-rate {
  font-size: 9px !important;
}

/* Merchant image: slightly smaller */
.is-mobile .npc-merchant-frame {
  width: 200px !important;
  height: 200px !important;
}

.is-mobile .npc-merchant-frame.tribe-gaul {
  height: 220px !important;
}

/* Cards: adaptive width, fill available space */
.is-mobile .npc-shop-cards {
  gap: 3px !important;
  margin-top: -25px !important;
  padding: 0 2px;
}

.is-mobile .npc-shop-card {
  width: 0 !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  padding: 6px 4px !important;
}

.is-mobile .npc-card-header-label {
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.is-mobile .npc-card-name {
  font-size: 10px !important;
}

.is-mobile .npc-card-price {
  font-size: 11px !important;
}

.is-mobile .npc-card-price-per {
  font-size: 9px !important;
}

.is-mobile .npc-card-stock {
  font-size: 10px !important;
}

/* Quantity selector: compact */
.is-mobile .npc-qty-selector {
  margin-bottom: 3px !important;
}

.is-mobile .npc-qty-btn {
  width: 18px !important;
  height: 18px !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.is-mobile .npc-qty-input {
  width: 24px !important;
  height: 18px !important;
  font-size: 10px !important;
}

.is-mobile .npc-card-total {
  font-size: 9px !important;
  margin-bottom: 3px !important;
}

.is-mobile .npc-card-buy-section {
  padding-top: 4px !important;
}

.is-mobile .npc-buy-btn {
  padding: 2px 8px !important;
  font-size: 9px !important;
}

.is-mobile .npc-card-timer {
  font-size: 9px !important;
}

/* SOLD stamp smaller */
.is-mobile .npc-card-sold-stamp {
  font-size: 22px !important;
  letter-spacing: 2px !important;
}

/* Reroll section compact */
.is-mobile .npc-shop-reroll {
  padding: 8px !important;
}

.is-mobile .npc-reroll-btn {
  padding: 5px 14px !important;
  font-size: 11px !important;
}

.is-mobile .npc-reroll-info {
  font-size: 10px !important;
}

.is-mobile .npc-shop-pity {
  font-size: 10px !important;
  gap: 4px !important;
  padding: 4px 8px !important;
}

.is-mobile .npc-shop-pity-dot {
  width: 8px !important;
  height: 8px !important;
}

.is-mobile .npc-shop-pity-text {
  font-size: 9px !important;
}

.is-mobile .npc-merchant-dialogue {
  font-size: 11px !important;
}

/* ============================================================
   FORK ADAPTER OVERRIDES (TravianZ / this repo)
   This fork's markup differs from the source fork the rest of
   this file was written for. The adapter JS (mobile.js) builds
   the #mobile-* scaffolding and moves nodes; these rules cover
   the small markup differences. Keep at the very end so they win.
   ============================================================ */

/* NOTE: the base display:none for the injected #mobile-* chrome lives in
   travian.css (always loaded), not here — this file is media-gated to
   <=768px so it can't hide the scaffolding on desktop. */

/* Gold lives in res.tpl's #goldbar table; the adapter moves the inner
   #gold_display span up into #mobile-header-right, so hide the leftover
   spacer table in the resource row. */
.is-mobile #goldbar { display: none !important; }

/* This fork's gold widget is a <span id="gold_display"> with a plain
   img + text (no img.gold class wrapper styling assumptions). */
.is-mobile #mobile-header-right #gold_display img { width: 14px; height: 14px; vertical-align: middle; }

/* Hero adventures widget here is #adv_count (an <a> with .adv-icon img +
   .adv-num badge) — the green pill. Keep it in the #mtop nav row with its
   native desktop pill styling (from travian.css), just realign it for the
   short mobile header and push it to the right edge of the row. */
.is-mobile #mtop a#adv_count {
  float: none !important;
  margin: 0 !important;   /* no auto-margin: let space-around space it evenly with the rest */
  align-self: center;
}

/* Current-page highlight: mobile.js adds .m-active to the active #nX. Show the
   coloured sprite region (same one #nX:hover uses) so the current page's icon
   stands out instead of all icons looking grey. */
.is-mobile #n1.m-active img, .is-mobile #n2.m-active img,
.is-mobile #n3.m-active img, .is-mobile #n4.m-active img {
  background-position: center -76px !important;
}

/* This fork's #n5 (reports + messages) has two anchors with NO .messages
   class (mobile.css positions the right half via #n5 a.messages). Without it
   both anchors sit on the left half and every tap hits messages. Position by
   document order instead: 1st anchor = reports (left half), 2nd = messages
   (right half), so each half is independently tappable. */
.is-mobile #n5 a:first-of-type { left: 0 !important; }
.is-mobile #n5 a:last-of-type  { left: 50% !important; }

/* top uses justify-content:space-between, which with this fork's
   icon set leaves big gaps between the nav icons. Group toggle + nav icons
   at the left (small gap) and push the gold/hero cluster to the right edge. */
.is-mobile #mtop { justify-content: flex-start !important; gap: 2px !important; }
.is-mobile #mobile-header-right { margin-left: auto !important; }

/* Hide the day/night moon/sun widget on mobile — the top bar omits it
   (only nav icons + gold + adventures are shown). It lives in #mtop > #wrapper
   (a header-local id, distinct from the page's .wrapper class). */
.is-mobile #mtop #wrapper { display: none !important; }

/* Resource row: this fork's res.tpl is a single <tr> of icon/value <td> pairs
   (wood, clay, iron, crop, consumption). Without help it bunches to one side.
   Make the row a flex container so the groups spread evenly across the full
   width; let long values shrink/ellipsis instead of overflowing. The gold
   table is #goldbar (hidden), so target only the first (resource) table. */
.is-mobile #resWrap > table:first-of-type {
  display: table !important;
  table-layout: fixed !important;   /* distribute columns evenly, not by content */
  width: 100% !important;
  margin: 0 !important;
}
.is-mobile #resWrap > table:first-of-type td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: 1px 0 !important;
}
/* Give the four resource value cells (#l1-#l4) the bulk of the width; the
   icon + consumption cells take the rest. Normal values fit; huge test-account
   values truncate with an ellipsis instead of breaking the layout. */
.is-mobile #resWrap #l1, .is-mobile #resWrap #l2,
.is-mobile #resWrap #l3, .is-mobile #resWrap #l4 { width: 19%; }

/* ===========================================
   CUSTOM (this fork): CSS-IN-PLACE mobile layout
   No JS node-moving. mobile.js only sets .is-mobile (at parse), flips
   body.m-*-open classes for drawers, and scales the maps. Everything below
   positions the EXISTING nodes for mobile:
     #res            -> fixed TOP bar (resources + gold, in place)
     #header/#mtop   -> fixed BOTTOM nav (hamburger + n1-n5, in place)
     #adv_count + .m-tab buttons -> fixed right-edge buttons (in place)
     #side_navi/#vlist -> slide-in drawers (in place) + #m-backdrop
     #troops         -> popup (in place), toggled by body.m-troops-open
   =========================================== */

/* Footer hidden on mobile (always). */
.is-mobile #footer { display: none !important; }

/* Reserve space for the fixed top resource bar + fixed bottom nav bar. */
.is-mobile .wrapper { padding-top: 50px !important; padding-bottom: var(--m-navh) !important; }

/* ---- TOP BAR: #res, fixed at top (resources left + gold right, in place) ---- */
.is-mobile #res {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
  width: 100% !important; min-width: 0 !important; height: auto !important;
  background: #fff !important; border-bottom: 1px solid #ddd !important;
  padding: 2px 72px 2px 4px !important;   /* right padding reserves the gold slot */
  z-index: 1000 !important; box-sizing: border-box !important;
}
.is-mobile #resWrap {
  position: static !important; left: 0 !important; margin: 0 !important; width: 100% !important;
}
/* Gold already lives in #res > #resWrap > #goldbar — show it, pinned top-right.
   Keep it a table so absolute+width:auto shrinks it to the gold content.
   Use #res #goldbar (2 IDs) to beat `.is-mobile #resWrap table { width:100% }`. */
.is-mobile #res #goldbar {
  display: table !important;
  position: absolute !important; top: 50% !important; right: 6px !important; left: auto !important;
  transform: translateY(-50%);
  background: none !important; margin: 0 !important; width: auto !important;
}
.is-mobile #res #goldbar td { display: none !important; }
.is-mobile #res #goldbar td:last-child { display: table-cell !important; padding: 0 !important; }
.is-mobile #gold_display { font-size: 11px !important; white-space: nowrap; }
.is-mobile #gold_display img.gold { width: 14px; height: 14px; vertical-align: middle; }

/* ---- BOTTOM NAV: #header/#mtop, fixed at bottom (in place) ---- */
/* Shared bottom-bar height: 58px base + the iOS home-indicator inset (0 in a
   browser, ~34px in the installed standalone app). Everything anchored to the
   bar (content reserve, left menu, right-edge tabs) references this so they stay
   flush with the bar in BOTH contexts — see #mtop padding-bottom below. */
.is-mobile { --m-navh: calc(58px + env(safe-area-inset-bottom, 0px)); }
.is-mobile #header {
  position: fixed !important;
  bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important;
  width: 100% !important; min-width: 0 !important; height: auto !important;
  background: #E0E0E0 !important; border-top: 1px solid #bdbaba !important; border-bottom: none !important;
  padding: 0 !important; margin: 0 !important; z-index: 1000 !important;
  box-shadow: none !important; border-radius: 0 !important;
}
.is-mobile #header #mtop {
  display: flex !important; align-items: center;
  /* all items (hamburger + nav icons + adventures) evenly spaced
     (overrides the old `.is-mobile #mtop { justify-content: flex-start !important }`) */
  justify-content: space-around !important;
  box-sizing: border-box !important;   /* so width:100% + padding stays within the bar */
  position: static !important; left: auto !important; top: auto !important;
  width: 100% !important; height: auto !important; margin: 0 !important;
  padding: 2px 4px !important;
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)) !important;
  background: none !important; gap: 0 !important;
}
.is-mobile #m-menu-toggle {
  display: flex !important; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px;
  border: none; padding: 0; flex-shrink: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* n5-ltr_mobile.png is a 70x200, 2-frame sprite (grey gear / green gear),
     same format as n1-n4. Show the grey (top) frame; green when the menu is open. */
  font-size: 0; color: transparent;
  background: url("img/l/New/n5-ltr_mobile.png") no-repeat center -10px;
  background-size: 44px auto;
}
.is-mobile #m-menu-toggle:active,
body.is-mobile.m-menu-open #m-menu-toggle {
  background-position: center -74px;   /* green gear */
}
.is-mobile #header #mtop #wrapper,
.is-mobile #header #mtop a#plus,
.is-mobile #header #mtop > .clear { display: none !important; }
.is-mobile #header #mtop a#n1,
.is-mobile #header #mtop a#n2,
.is-mobile #header #mtop a#n3,
.is-mobile #header #mtop a#n4,
.is-mobile #header #mtop div#n5 { margin: 0 !important; float: none !important; }

/* ---- RIGHT-EDGE BUTTONS: villages / quests / troops ----
   Static .m-tab buttons, each pinned to its own fixed bottom offset. */
.is-mobile .m-tab {
  position: fixed !important; right: 0 !important; z-index: 900;
  display: flex;   /* non-!important so availability() can hide a tab via inline display:none */
  align-items: center; justify-content: center;
  width: 46px !important; height: 48px !important; min-width: 0 !important;
  background: #fff !important; border: 1px solid #ccc !important; border-right: none !important;
  border-radius: 6px 0 0 6px !important; box-sizing: border-box !important;
  margin: 0 !important; padding: 0 !important; top: auto !important; left: auto !important;
  cursor: pointer; text-decoration: none; color: #333; overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.is-mobile .m-tab:active { background: #eee; }
.is-mobile .m-tab img { width: 16px !important; height: 16px !important; object-fit: contain; }
.is-mobile #m-tab-quests img { object-fit: cover; object-position: center top; border-radius: 2px; }
.is-mobile #m-tab-villages { font-size: 20px; line-height: 1; }
/* fixed vertical slots (bottom -> top), stacked 52px apart above the nav bar */
.is-mobile #m-tab-troops   { bottom: var(--m-navh) !important; }
.is-mobile #m-tab-quests   { bottom: calc(var(--m-navh) + 52px) !important; }
.is-mobile #m-tab-villages { bottom: calc(var(--m-navh) + 104px) !important; }

/* Adventures: keep the desktop pill design (icon + green count) but flow it in
   the bottom nav on the right, NOT as a right-edge button. Neutralise the
   desktop nav-row margins; the #mtop a#adv_count pill styling still applies. */
.is-mobile #adv_count {
  position: static !important; float: none !important;
  margin: 0 !important; top: auto !important; right: auto !important; bottom: auto !important;
  align-self: center; z-index: auto !important;
}

/* ---- DRAWERS: backdrop + #side_navi (left) + #vlist (right), in place ---- */
.is-mobile #m-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 3000;   /* above troops popup (2000) + everything else */
  -webkit-tap-highlight-color: transparent;
}
.is-mobile.m-menu-open #m-backdrop,
.is-mobile.m-vlist-open #m-backdrop { display: block; }
/* The hamburger menu is a small popup, not a full drawer -> no dimming, just a
   transparent tap-catcher so tapping outside closes it. Villages stays dimmed. */
.is-mobile.m-menu-open #m-backdrop { background: transparent; }
body.is-mobile.m-vlist-open { overflow: hidden; }

/* Hamburger menu = compact popup anchored bottom-LEFT (above the toggle), like
   the troops popup — easy to open/close. (Overrides the earlier
   `.is-mobile #side_navi { display:none !important }`.) */
.is-mobile #side_navi {
  display: none !important;
  position: fixed !important; left: 6px !important; bottom: var(--m-navh) !important;
  top: auto !important; right: auto !important;
  width: 210px !important; max-width: 72vw !important;
  height: auto !important; min-height: 0 !important; max-height: 70vh !important;
  background: #fff !important; z-index: 3100;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin: 0 !important; padding: 4px 0 !important;
  border: 1px solid #bbb !important; border-radius: 8px !important;
}
body.is-mobile.m-menu-open #side_navi { display: block !important; }
.is-mobile #side_navi #logo { display: none !important; }
.is-mobile #side_navi p { margin: 0 !important; padding: 0 !important; }
.is-mobile #side_navi a {
  display: block !important; padding: 10px 16px !important;
  border-bottom: 1px solid #eee; color: #333 !important; text-decoration: none; font-size: 15px;
}
.is-mobile #side_navi p:last-child a:last-child { border-bottom: none; }
.is-mobile #side_navi br { display: none; }
/* Kill the desktop menu-link hover sprite (img/a/n12.gif via compact.css +
   menu-bg-ltr.gif via new_images.css) that leaks into the popup as a stray
   arrow + squashed 20px row on tap — :hover is sticky on touch. Clean grey
   highlight instead, keep the roomy row height. */
.is-mobile #side_navi a:hover,
.is-mobile #side_navi a:active {
  background: #f5f5f5 !important;
  height: auto !important; width: auto !important;
}
/* In the installed app (standalone) never offer "Install app". These selectors
   carry `#side_navi a#pwa-install` (2 ids) on purpose so they out-specify
   `.is-mobile #side_navi a { display:block !important }` above (1 id) — a bare
   `.pwa-hidden`/`#pwa-install` loses that fight and the link stays visible.
   Primary: the JS `pwa-standalone` class (navigator.standalone, reliable on iOS).
   Fallback: the display-mode media query (no-JS / Android). */
.pwa-standalone #side_navi a#pwa-install { display: none !important; }
@media (display-mode: standalone) {
  #side_navi a#pwa-install { display: none !important; }
}

/* Right villages drawer = the #side_info wrapper becomes the sliding panel,
   with #vlist as a normal table inside it. (#side_info is `display:none` on
   mobile by default; a bare <table> drawer collapses its rows, so we slide the
   block wrapper instead.) Its other widgets (#qge quest-giver, #anm) are hidden;
   the quests popup uses #ce, not #qge, so that's safe. */
.is-mobile #side_info {
  display: block !important;
  position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
  width: 300px !important; max-width: 85vw !important; height: 100% !important;
  background: #fff !important; z-index: 3100;
  overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  margin: 0 !important; padding: 0 !important;
  transform: translateX(100%); transition: transform .3s ease;
  box-shadow: -2px 0 10px rgba(0,0,0,0.3);
}
.is-mobile.m-vlist-open #side_info { transform: translateX(0); }
.is-mobile #side_info > #anm,
.is-mobile #side_info > #qge,
.is-mobile #side_info > br,
.is-mobile #side_info > script { display: none !important; }
/* #vlist renders as a normal full-width table inside the panel */
.is-mobile #side_info #vlist {
  display: table !important;
  position: static !important; transform: none !important;
  width: 100% !important; max-width: 100% !important; height: auto !important;
  margin: 0 !important; background: transparent !important; box-shadow: none !important;
}

/* ---- TROOPS POPUP: the dorf1 village troops list (#map_details #troops),
   positioned in place, toggled by body.m-troops-open. Scoped to #map_details so
   it NEVER touches the a2b.php send-troops form (which also uses id="troops").
   Same design as the hamburger menu popup: rounded white box, roomy rows. ---- */
.is-mobile #map_details #troops {
  display: none !important;
  position: fixed !important;
  right: 54px !important; bottom: calc(var(--m-navh) - 8px) !important; left: auto !important; top: auto !important;
  width: auto !important; min-width: 0 !important; max-width: 72vw !important;
  overflow: hidden !important;   /* clip the rows to the rounded corners */
  background: #fff !important; border: 1px solid #bbb !important; border-radius: 8px !important;
  /* `separate` (not collapse) so border-radius actually rounds a <table> */
  border-collapse: separate !important; border-spacing: 0 !important;
  z-index: 2000 !important; font-size: 15px !important;
}
body.is-mobile.m-troops-open #map_details #troops { display: block !important; }
/* hide the troops popup while a drawer is open, so the menu is cleanly on top */
body.is-mobile.m-menu-open #map_details #troops,
body.is-mobile.m-vlist-open #map_details #troops { display: none !important; }
.is-mobile #map_details #troops thead { display: none !important; }
/* Flex rows (icon + count, right-aligned) come from travian.css; here just add
   the popup's inner padding + icon size. */
.is-mobile #map_details #troops tbody tr { padding: 2px 12px !important; }
.is-mobile #map_details #troops td { padding: 0 !important; border: none !important; }
.is-mobile #map_details #troops img.unit { width: 16px !important; height: 16px !important; }

/* Production: the desktop -29px top margin on #map_details overlaps the
   resource-fields map on mobile (no float here). Clear it so Production sits
   below the map even when there are no troop movements above it. */
.is-mobile #map_details { margin-top: 0 !important; }
.is-mobile #map_details #production { margin-top: 8px !important; }

/* dorf1: show troop movements (#movements) at the TOP-RIGHT, beside the village
   name, instead of below the map. Position it in place (it lives in #map_details)
   and drop the resource-fields map down a little to make room. Only applies when
   movements exist (:has). */
.is-mobile div.village1 #movements {
  position: absolute !important;
  top: 8px !important; right: 2px !important; left: auto !important;  /* align with the h1 name text */
  width: auto !important; max-width: 60% !important;   /* shrink to content (don't stretch) */
  margin: 0 !important; z-index: 6;
}
/* compact each movement row: icon + "N Attack" + "in M:SS" tight, right-aligned */
.is-mobile div.village1 #movements,
.is-mobile div.village1 #movements thead,
.is-mobile div.village1 #movements tbody { display: block; }
.is-mobile div.village1 #movements tbody tr { display: flex; align-items: center; gap: 4px; }
.is-mobile div.village1 #movements td { padding: 0 !important; border: none !important; }
.is-mobile div.village1 #movements td.typ { display: flex; align-items: center; flex: 0 0 auto; }
.is-mobile div.village1 #movements .mov,
.is-mobile div.village1 #movements .dur_r { display: inline; }     /* keep on one line */
/* drop the trailing "hours" label on mobile (the compact timer reads "in M:SS") */
.is-mobile div.village1 #movements .dur_h { display: none !important; }
/* name: truncate with … and keep a gap before the movements block */
.is-mobile div.village1 #content:has(#movements) > h1 {
  max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-mobile div.village1 #content:has(#movements) #village_map { margin-top: 34px !important; }

/* ---- a2b2.php (gold "Account transactions"): the .plusFunctions tables have
   5-6 columns and run off the right edge of a phone (the Balance column was
   unreachable). Each table is wrapped in `.m-scrollx` (added in a2b2.php) which
   scrolls horizontally; the table keeps a legible min-width so the user swipes
   sideways to reach the last columns. Columns stay aligned (one real table). */
/* the Plus pages give #products a fixed desktop width:512px -> overflows the
   phone. Constrain it to the content column first. */
.is-mobile #products { width: 100% !important; max-width: 100% !important; }
.is-mobile .m-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.is-mobile .m-scrollx .plusFunctions { min-width: 540px; width: 100%; }
.is-mobile .m-scrollx .plusFunctions td,
.is-mobile .m-scrollx .plusFunctions th { font-size: 11px; padding: 3px 5px; white-space: normal; }

/* (Hero's Mansion #distribution stat-table fixes live in the dedicated block
   higher up — ".is-mobile div#build.gid37 table#distribution …" — which has the
   specificity to beat the desktop rules.) */

/* ===========================================
   Hero's Mansion — Equipment + Items tables
   Desktop lays them side-by-side in a flex #heroInventory (heroEquip fixed
   270px, heroBag 190px). On mobile stack them and let each use the full width.
   =========================================== */
.is-mobile #heroInventory {
  display: block !important;
}
.is-mobile #heroInventory table.heroEquip,
.is-mobile #heroInventory table.heroBag {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  margin: 0 0 10px !important;
}
/* Items: spread the item icons across the full width as a responsive grid */
.is-mobile #heroInventory table.heroBag td .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  width: 100%;
}
.is-mobile #heroInventory table.heroBag .invItem,
.is-mobile #heroInventory table.heroBag .invItem .cell {
  width: 100% !important;
  margin: 0 !important;
}
.is-mobile #heroInventory table.heroBag .invItem .cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================================
   OUTGAME SCREENS (login / register / password)
   These pages don't include header.tpl, so there is no hamburger and no
   in-game chrome. The general rule above hides #side_navi (it normally lives
   inside the hamburger) — but here it's the ONLY navigation, so re-show it as
   a fixed BOTTOM nav bar that mirrors the in-game village bottom bar
   (#header/#mtop below). Scoped by the .outgame body class set on these pages
   so in-game screens are unaffected.
   =========================================== */

/* Reserve room so page content never hides behind the fixed bottom bar. */
.is-mobile.outgame .wrapper { padding-bottom: 56px !important; }

/* Bottom nav bar — Homepage / Login / Register. Same chrome as the in-game
   bottom bar: light-grey fill, top border + upward shadow, evenly spaced. */
.is-mobile.outgame #side_navi {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-around !important;
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: #E0E0E0 !important;
  border-top: 1px solid #bdbaba !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
}
.is-mobile.outgame #side_navi #logo { display: none !important; }
.is-mobile.outgame #side_navi p {
  display: flex !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.is-mobile.outgame #side_navi p a {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 4px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: #333 !important;
  text-decoration: none !important;
}
.is-mobile.outgame #side_navi p a:active { background: rgba(0, 0, 0, 0.08) !important; }

/* Login card — center it. */
.is-mobile.outgame #content.login {
  padding: 0 14px 28px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}
.is-mobile.outgame #content.login h1 { text-align: center !important; }
/* The login wordmark is a fixed 468px sprite — scale it to fit the screen. */
.is-mobile.outgame #content.login h1 img.img_login {
  width: 234px !important;
  max-width: 80% !important;
  height: 30px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Outgame side panel (news/info) sits off-canvas to the right and is what
   leaks in as a "menu from the right" on refresh — keep it hidden on mobile. */
.is-mobile.outgame #side_info { display: none !important; }
.is-mobile.outgame #content.login p.btn { text-align: center !important; }
.is-mobile.outgame #content.login .btn .trav_buttons {
  padding: 10px 26px !important;
  font-size: 16px !important;
}

/* Register card — same centering as login, and make the nickname/tribe/
   start-position tables fill the width so the radios (Random + the NW/NE/SW/SE
   coordinates) line up flush instead of sitting offset to the left. */
.is-mobile.outgame #content.signup {
  padding: 0 14px 28px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}
.is-mobile.outgame #content.signup h1,
.is-mobile.outgame #content.signup h5 { text-align: center !important; }
.is-mobile.outgame #content.signup table#sign_input,
.is-mobile.outgame #content.signup table#sign_select {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Trim the desktop left padding that pushes the columns inward on a phone. */
.is-mobile.outgame #content.signup table#sign_input th { padding-left: 6px !important; }
.is-mobile.outgame #content.signup table#sign_select th,
.is-mobile.outgame #content.signup table#sign_select td { padding-left: 4px !important; }
.is-mobile.outgame #content.signup p.btn { text-align: center !important; }
.is-mobile.outgame #content.signup .btn .trav_buttons {
  padding: 10px 26px !important;
  font-size: 16px !important;
}

/* The two starting-position columns (NW/NE, SW/SE) run off the right edge on a
   phone because the cells don't wrap. Pin the table to the viewport, give the
   tribe + two position columns even widths, and let the labels wrap so North/
   South East stay fully on-screen. */
/* Narrow the tribe column so the two Starting-position columns get enough room.
   The green header labels are fixed 160px sprite images that would otherwise
   force a wide tribe column AND look mismatched when scaled — replace them with
   real text on mobile, so both headers are a consistent size and don't dictate
   the column width. */
.is-mobile.outgame #content.signup #sign_select tr.top th img.img_u06,
.is-mobile.outgame #content.signup #sign_select tr.top th img.img_u07 { display: none !important; }
.is-mobile.outgame #content.signup #sign_select tr.top th:first-child::after { content: "Choose tribe"; }
.is-mobile.outgame #content.signup #sign_select tr.top th:last-child::after  { content: "Starting position"; }
.is-mobile.outgame #content.signup #sign_select tr.top th::after {
  color: #5cb800 !important;
  font-weight: bold !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
.is-mobile.outgame #content.signup table#sign_select td.nat  { width: 24% !important; }
.is-mobile.outgame #content.signup table#sign_select td.pos1,
.is-mobile.outgame #content.signup table#sign_select td.pos2 { width: 38% !important; }
.is-mobile.outgame #content.signup table#sign_select th,
.is-mobile.outgame #content.signup table#sign_select td {
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  vertical-align: top !important;
}
/* Belt-and-braces: never let the table push past the screen edge. */
.is-mobile.outgame #content.signup table#sign_select { max-width: 100% !important; }
.is-mobile.outgame #content.signup table#sign_select input.radio {
  margin: 1px 3px 0 0 !important;
  vertical-align: top !important;
}