/* ============================================================
   T26/T29 - Responsive safety net (monefa.net)
   Layout strategy (matches the game's own native design):
   - phones (<=620): native body.mobileOptimized UI, viewport
     width=620 -> phone browser scales the canvas
   - tablets 621-1180: full desktop layout on a fixed 1280
     canvas, viewport width=1280 -> browser scales it down
   - desktop >1180: unchanged
   T29: server-side detection now adds html.t26m (PHP) so the
   structural fixes below work from first paint, before JS.
   ============================================================ */

/* ---------- phones (<=620): native mobile UI is active ---------- */
@media (max-width:620px){
  /* JS-added horizontal scroll boxes for unusually wide tables */
  .t26scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;margin:4px 0;}
  .t26scroll table{min-width:max-content;}

  /* generic overflow guards */
  #content img{max-width:100%;height:auto;}
  .report,.details,.forecast,.description{max-width:100%;overflow-x:auto;}

  /* comfortable touch targets on small title buttons */
  .contentTitleButton{width:34px!important;height:34px!important;}

  /* dialogs must fit the phone screen */
  .dialogWrapper,.dialogContents,.dialogV2.dialogWrapper{max-width:96vw!important;}
  .dialogV2 .dialogContents{overflow-x:auto;}
}

/* ---------- tablets (621-1180): fixed 1280 canvas, scaled ----------
   Only guard against elements that would break uniform scaling */
@media (min-width:621px) and (max-width:1180px){
  html,body{overflow-x:hidden;}
  body{min-width:1280px;}
}

/* ============================================================
   T28/T29 - phone-layout structural fixes (monefa.net)
   The native mobile rules (compact.css imports) leave three
   structural defects on phones:
     1) #topBar (the bottom quick-bar) is parked 8px below the
        viewport and shifted 10px off-canvas (rtl) -> the round
        icons render half-cut.
     2) label.mobileMenuButton flows BELOW the icon row (half
        outside the bar) -> the hamburger is unreachable.
     3) div#map_details (village info slide-over) is a desktop
        "peek" element (margin-left:-180px); on phones it draws
        cut-off white boxes over the village map.
   T29: each rule now also fires from html.t26m (set by PHP
   server-side) so layout is correct from first paint.
   ============================================================ */
@media (max-width:620px){
  html.t26m #topBar,
  body.mobileOptimized #topBar{
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }
  html.t26m #topBar #header,
  body.mobileOptimized #topBar #header{
    left:0!important;
    height:120px!important;
  }
  /* dock the hamburger into the free left slot of the icon row */
  html.t26m #topBar label.mobileMenuButton,
  body.mobileOptimized #topBar label.mobileMenuButton{
    position:absolute!important;
    left:8px!important;
    top:15px!important;
    bottom:auto!important;
    margin:0!important;
    z-index:501;
  }
  /* hide the desktop peek panel over the map on phones */
  html.t26m div.village1 div#map_details,
  body.mobileOptimized div.village1 div#map_details{
    display:none!important;
  }
}

/* ============================================================
   T34 - v7: captcha gate page (captcha.php) on the 620 canvas.
   #center is over-constrained by the desktop sheet (right:10px plus
   margin:10px), so the beige frame sits at 0..600 while #header sits
   at 10..610 - the frame hugs/crosses the left edge and looks cut.
   Drop the extra margin so the frame centers symmetrically.
   Scoped with :has(.captchaButton) - only the captcha page matches.
   ============================================================ */
html.t26m #center:has(.captchaButton),
body.mobileOptimized #center:has(.captchaButton){margin-right:0!important}

/* ============================================================
   T36 - v8: side menu + gold shop button (mini-app report)
   1) #mobileMenu was malformed (help <li> nested inside a bare <li>,
      the discord link dangling outside its item). Browsers rebuilt
      the tree and the help/discord SVGs lost their sizing context ->
      giant glyphs covered the menu. HTML repaired in topheader.php;
      these caps keep any future SVG inside its slot.
   2) a.mobileShopButton had no icon rules of its own (the gold skin
      only fires on combined selectors), so it rendered as an empty
      circle stacked on the menu button at the left edge of the bottom
      bar - taps hit the wrong button and the menu seemed dead. It is
      now a real link to balemini.php with the native gold shop skin,
      parked right of the hamburger.
   ============================================================ */
html.t26m #mobileMenu .inlineIcon svg,
body.mobileOptimized #mobileMenu .inlineIcon svg{
  width:26px!important;height:26px!important;flex:0 0 26px;
}
@media (max-width:620px){
  html.t26m #topBar a.mobileShopButton,
  body.mobileOptimized #topBar a.mobileShopButton{
    position:absolute!important;
    left:74px!important;
    top:15px!important;
    bottom:auto!important;
    margin:0!important;
    width:58px;height:58px;
    background-image:linear-gradient(to bottom,#cba467 5%,#f3e2ae 13%,#efbf7b 32%,#aa8050 48%,#835e35 72%,#ad8a54 93%,#d7b672 100%);
    border:1px solid #34220d;
    box-shadow:none;
    z-index:501;
  }
  html.t26m #topBar a.mobileShopButton:after,
  body.mobileOptimized #topBar a.mobileShopButton:after{
    content:"";
    position:absolute;
    top:2px;left:2px;bottom:2px;right:2px;
    z-index:3;
    border-radius:50%;
    width:52px;height:52px;
    background-image:url('/gpackcdn/gpack/img_rtl/hud/topBar/header/shop.png');
    background-size:cover;
  }
}

/* ============================================================
   T39 - v9: build bubble (.buildingList, the "ساخت فوری" +
   construction-queue box) misplaced - user report: the confirm
   buttons end up below/outside the box ("دکمه تایید زیر کادر
   میروند").
   Root cause: the game's mobile CSS anchors the bubble with
   position:fixed (bottom:105px) INSIDE #resourceFieldContainer
   while scaling that same container with transform:scale(1.35).
   A fixed element inside a transformed ancestor takes the
   ancestor as its containing block, so the bubble anchors to
   the ~330px map band mid-screen; with the T35 body zoom
   Chromium additionally paints it detached from its hit-rect
   (bubble jumps up-right, oversized, taps miss).
   mobile-live.js v14 reparents the bubble to <body> (the layer
   where the game's own dialog overlay lives and renders
   correctly) and publishes --t26z = active body zoom. After the
   reparent the game's descendant selectors stop matching, so
   style body>div.buildingList here. Fixed offsets paint x zoom,
   hence bottom = 105px / --t26z: ~105 visual px above the bottom
   bar on zoomed webviews, the game's own 105px when the meta
   viewport is honored (--t26z = 1).
   ============================================================ */
html.t26m body > div.buildingList,
body.mobileOptimized > div.buildingList{
  position:fixed!important;
  left:auto!important;
  right:10px!important;
  top:auto!important;
  bottom:calc(105px / var(--t26z, 1))!important;
  width:405px!important;
  max-width:96vw;
  margin:0!important;
  z-index:35!important;
}


/* ---------- T40 - v10: map tooltip must not swallow taps ----------
   The map tile tooltip (Travian.Tip: a bare div > .tip child of body)
   is informational only. Under the T35 body zoom it drifted over the
   cursor, so the first tap on a map tile hit the tooltip instead of the
   map mover and died ("نقشه باگ دارد"). Kill its pointer events. */
body.mobileOptimized > div > .tip { pointer-events: none !important; }