/* ============================================================ * mobile.css (LTR) — travt44 mobile layout v3 * PHILOSOPHY (matches original Travian Legends mobile): * - keep original element sizes/positions intact * - use TRANSFORM SCALE for sizing the village field area * - #contentOuterContainer uses internal scroll (overflow:auto) * - body itself does NOT grow — fixed viewport * - top bar (stockBar) and bottom bar (navigation) are fixed * Activates when .mobileOptimized on body + viewport ≤ 820px * ============================================================ */ /* === DESKTOP: hide mobile-only elements completely (outside media query) === */ nav#mobileMenu, input#mobileMenuState, #mobileDrawerBackdrop, #mobileEdgeLeft, #mobileEdgeRight, .mobileOnly { display: none !important; } @media screen and (max-width: 820px) { /* mobile: hide desktop-only elements, show mobile-only ones (high specificity) */ .mobileOptimized .desktopOnly, .mobileOptimized ul#navigation li > a.desktopOnly, .mobileOptimized ul#navigation li > .desktopOnly { display: none !important; } .mobileOptimized .mobileOnly { display: block !important; } /* ---------- 0) lock viewport / no body scroll ---------- */ .mobileOptimized, .mobileOptimized body { margin: 0 !important; padding: 0 !important; min-width: 620px !important; width: 620px !important; max-width: 620px !important; overflow-x: hidden !important; height: 100vh !important; max-height: 100vh !important; overflow-y: hidden !important; } .mobileOptimized #background, .mobileOptimized.buildingsV1.perspectiveResources #background, body.mobileOptimized.buildingsV1.perspectiveResources div#background { width: 100vw !important; height: 100vh !important; min-width: 0 !important; max-width: 100vw !important; overflow: hidden !important; background-image: url('../img_rtl/layout/bgResources_mobile.jpg') !important; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; background-color: #67772e !important; position: relative !important; } /* village (dorf2.php) — buildings perspective background */ .mobileOptimized.perspectiveBuildings #background, body.mobileOptimized.perspectiveBuildings div#background { background-image: url('../img_rtl/layout/bgBuildings_mobile.jpg') !important; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; background-color: #67772e !important; } /* kill the 1280px-wide :before/:after sky-gradient pseudo-elements */ .mobileOptimized.buildingsV1.perspectiveResources:before, .mobileOptimized.buildingsV1.perspectiveResources:after, .mobileOptimized.perspectiveBuildings:before, .mobileOptimized.perspectiveBuildings:after, .mobileOptimized body.buildingsV1.perspectiveResources:before, .mobileOptimized body.buildingsV1.perspectiveResources:after, .mobileOptimized body.perspectiveBuildings:before, .mobileOptimized body.perspectiveBuildings:after, body.mobileOptimized:before, body.mobileOptimized:after { display: none !important; min-width: 0 !important; width: 0 !important; content: none !important; } .mobileOptimized #bodyWrapper { width: 100vw !important; height: 100vh !important; min-width: 0 !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; position: relative !important; } .mobileOptimized #center { width: 100vw !important; height: 100vh !important; min-width: 0 !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; background: none !important; position: relative !important; overflow: hidden !important; } /* ---------- 1) hide sidebars / toolbar / logo / footer ---------- */ .mobileOptimized #logo, .mobileOptimized #toolbar, .mobileOptimized #header .toolbar, .mobileOptimized #sideInfo, .mobileOptimized #rightSideInfor, .mobileOptimized #footer, .mobileOptimized #outOfGame, .mobileOptimized nav#outOfGame, .mobileOptimized #lswitch, .mobileOptimized img#lswitch, .mobileOptimized ul#navigation li#n4, .mobileOptimized .boxes.villageList.production { display: none !important; } /* troops box, sized to its content */ .mobileOptimized .boxes.villageList.units { margin-top: -33px !important; padding: 4px 8px !important; background: rgba(255,255,255,.9) !important; box-shadow: 0 0 3px rgba(0,0,0,.5) !important; border-radius: 7px !important; background-image: none !important; } .mobileOptimized .boxes.villageList.units .boxes-contents { width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; display: inline-block !important; overflow: visible !important; } /* hide all the decorative corner/edge frame divs inside it */ .mobileOptimized .boxes.villageList.units > .boxes-tl, .mobileOptimized .boxes.villageList.units > .boxes-tr, .mobileOptimized .boxes.villageList.units > .boxes-tc, .mobileOptimized .boxes.villageList.units > .boxes-ml, .mobileOptimized .boxes.villageList.units > .boxes-mr, .mobileOptimized .boxes.villageList.units > .boxes-mc, .mobileOptimized .boxes.villageList.units > .boxes-bl, .mobileOptimized .boxes.villageList.units > .boxes-br, .mobileOptimized .boxes.villageList.units > .boxes-bc { display: none !important; } .mobileOptimized .boxes.villageList.units .boxes-contents { background: none !important; background-image: none !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* buildingList — fixed above the bottom navigation, centered, fits content */ .mobileOptimized .boxes.buildingList { position: fixed !important; top: auto !important; bottom: 140px !important; left: 8px !important; right: 8px !important; width: auto !important; height: auto !important; max-height: 320px !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 9985 !important; padding: 4px 8px !important; background: rgba(255,255,255,.9) !important; background-image: none !important; box-shadow: 0 0 3px rgba(0,0,0,.5) !important; border-radius: 7px !important; } .mobileOptimized .boxes.buildingList .finishNow { margin-top: -10px !important; } .mobileOptimized .boxes.buildingList > .boxes-tl, .mobileOptimized .boxes.buildingList > .boxes-tr, .mobileOptimized .boxes.buildingList > .boxes-tc, .mobileOptimized .boxes.buildingList > .boxes-ml, .mobileOptimized .boxes.buildingList > .boxes-mr, .mobileOptimized .boxes.buildingList > .boxes-mc, .mobileOptimized .boxes.buildingList > .boxes-bl, .mobileOptimized .boxes.buildingList > .boxes-br, .mobileOptimized .boxes.buildingList > .boxes-bc { display: none !important; } .mobileOptimized .boxes.buildingList .boxes-contents { background: none !important; background-image: none !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; display: block !important; } /* movements box — same look as units box */ .mobileOptimized .boxes.villageList.movements { padding: 4px 8px !important; background: rgba(255,255,255,.9) !important; background-image: none !important; box-shadow: 0 0 3px rgba(0,0,0,.5) !important; border-radius: 7px !important; border: none !important; margin: -20px 0 0 0 !important; width: 250px !important; min-width: 250px !important; font-size: 16px !important; } .mobileOptimized .boxes.villageList.movements > .boxes-tl, .mobileOptimized .boxes.villageList.movements > .boxes-tr, .mobileOptimized .boxes.villageList.movements > .boxes-tc, .mobileOptimized .boxes.villageList.movements > .boxes-ml, .mobileOptimized .boxes.villageList.movements > .boxes-mr, .mobileOptimized .boxes.villageList.movements > .boxes-mc, .mobileOptimized .boxes.villageList.movements > .boxes-bl, .mobileOptimized .boxes.villageList.movements > .boxes-br, .mobileOptimized .boxes.villageList.movements > .boxes-bc { display: none !important; } .mobileOptimized .boxes.villageList.movements .boxes-contents { background: none !important; background-image: none !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* server time + ms placed at top of right drawer */ .mobileOptimized #mobileServerTimeHolder { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; padding: 6px 4px 8px 4px !important; margin-bottom: 6px !important; border-bottom: 1px solid rgba(92,74,34,.35) !important; background: rgba(58,45,18,.06) !important; color: #3a2d12 !important; font-size: 12px !important; font-weight: bold !important; } /* Hide servertime/pageloadtime everywhere on mobile by default — only show them when moved into #mobileServerTimeHolder */ .mobileOptimized #servertime, .mobileOptimized #pageloadtime { display: none !important; } .mobileOptimized #mobileServerTimeHolder #servertime, .mobileOptimized #mobileServerTimeHolder #pageloadtime { display: inline-flex !important; } .mobileOptimized #mobileServerTimeHolder #servertime, .mobileOptimized #mobileServerTimeHolder #pageloadtime { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 !important; padding: 0 8px !important; min-height: 22px !important; background: #f3e9cf !important; border: 1px solid #b39253 !important; border-radius: 4px !important; color: #3a2d12 !important; font-size: 12px !important; text-align: center !important; line-height: 1.2 !important; box-sizing: border-box !important; } .mobileOptimized #mobileServerTimeHolder #pageloadtime { font-size: 10px !important; color: #5c4a22 !important; } /* ---------- 1b) SIDEBAR DRAWERS (slide from edges) ---------- Override original div.sidebar rules (float, min-width, flex). */ .mobileOptimized div#sidebarBeforeContent, .mobileOptimized div#sidebarAfterContent, .mobileOptimized div.sidebar.beforeContent, .mobileOptimized div.sidebar.afterContent { position: fixed !important; top: 49px !important; bottom: 87px !important; width: 321px !important; min-width: 0 !important; max-width: 90vw !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0px 5px !important; float: none !important; display: block !important; background: linear-gradient(180deg, rgba(7, 6, 6, 0.3), rgba(217, 199, 155, 0.12)) !important; border: 1px solid #5c4a22 !important; box-shadow: 0 0 12px rgba(0,0,0,.5) !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; z-index: 9995 !important; transition: none !important; pointer-events: auto !important; align-items: stretch !important; visibility: hidden !important; } /* re-enable transition + visibility only when explicitly opened */ .mobileOptimized div#sidebarBeforeContent.mobileOpen, .mobileOptimized div#sidebarAfterContent.mobileOpen { visibility: visible !important; transition: transform .25s ease !important; } /* also make visible (without animation) right before opening so transition runs */ .mobileOptimized div#sidebarBeforeContent.mobileReady, .mobileOptimized div#sidebarAfterContent.mobileReady { visibility: visible !important; transition: transform .25s ease !important; } /* spacing between drawer boxes */ .mobileOptimized #sidebarBeforeContent .sidebarBox, .mobileOptimized #sidebarAfterContent .sidebarBox { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 25px 0 8px 0 !important; } /* LTR: before=left edge, after=right edge */ .mobileOptimized:not(.rtl) div#sidebarBeforeContent, body.mobileOptimized:not(.rtl) div#sidebarBeforeContent { left: 0 !important; right: auto !important; transform: translateX(-120%) !important; } .mobileOptimized:not(.rtl) div#sidebarAfterContent, body.mobileOptimized:not(.rtl) div#sidebarAfterContent { right: 0 !important; left: auto !important; transform: translateX(120%) !important; } /* RTL: before=right edge (visual start), after=left edge (visual end) */ .mobileOptimized.rtl div#sidebarBeforeContent, body.mobileOptimized.rtl div#sidebarBeforeContent { right: 0 !important; left: auto !important; transform: translateX(120%) !important; } .mobileOptimized.rtl div#sidebarAfterContent, body.mobileOptimized.rtl div#sidebarAfterContent { left: 0 !important; right: auto !important; transform: translateX(-120%) !important; } body.mobileOptimized.rtl div#sidebarBeforeContent.mobileOpen, body.mobileOptimized.rtl div#sidebarAfterContent.mobileOpen, body.mobileOptimized:not(.rtl) div#sidebarBeforeContent.mobileOpen, body.mobileOptimized:not(.rtl) div#sidebarAfterContent.mobileOpen, .mobileOptimized div#sidebarBeforeContent.mobileOpen, .mobileOptimized div#sidebarAfterContent.mobileOpen { transform: translateX(0) !important; } /* Shrink boxes inside the drawers to fit narrow width. Original .sidebar .sidebarBox = 300px + padding 0 35px. We force-scale + force-width everything below. */ .mobileOptimized #sidebarBeforeContent, .mobileOptimized #sidebarAfterContent { width: 260px !important; max-width: 90vw !important; } .mobileOptimized #sidebarBeforeContent *, .mobileOptimized #sidebarAfterContent * { max-width: 100% !important; box-sizing: border-box !important; } .mobileOptimized #sidebarBeforeContent .sidebarBox, .mobileOptimized #sidebarAfterContent .sidebarBox { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 25px 0 8px 0 !important; padding: 0 !important; transform: none !important; float: none !important; position: relative !important; } /* neutralize negative side margins on event rows in drawers */ .mobileOptimized #sidebarBeforeContent .fw-event-row, .mobileOptimized #sidebarAfterContent .fw-event-row, .mobileOptimized #sidebarBeforeContent .fw-card-row, .mobileOptimized #sidebarAfterContent .fw-card-row { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* push Questmaster box further down + reserve space for the absolute mentor image */ .mobileOptimized #sidebarBeforeContent #sidebarBoxQuestmaster, .mobileOptimized #sidebarAfterContent #sidebarBoxQuestmaster { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 140px 0 8px 0 !important; padding: 10px 0 0 0 !important; position: relative !important; overflow: visible !important; min-height: 50px !important; background-color: transparent !important; color: inherit !important; } /* keep the mentor button visible above its box, centered */ .mobileOptimized #sidebarBoxQuestmaster #questmasterButton { position: absolute !important; top: -127px !important; right: calc(50% - 102px) !important; left: auto !important; width: 204px !important; height: 135px !important; display: block !important; overflow: visible !important; z-index: 5 !important; } .mobileOptimized #sidebarBoxQuestmaster #questmasterButton img.mentor, .mobileOptimized #sidebarBoxQuestmaster #questmasterButton img.border, .mobileOptimized #sidebarBoxQuestmaster #questmasterButton img.animation { width: 204px !important; height: 135px !important; display: block !important; position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; } .mobileOptimized #sidebarBeforeContent .sidebarBox .sidebarBoxInnerBox, .mobileOptimized #sidebarAfterContent .sidebarBox .sidebarBoxInnerBox { width: 100% !important; } .mobileOptimized #sidebarBeforeContent .sidebarBox .sidebarBoxInnerBox .header, .mobileOptimized #sidebarBeforeContent .sidebarBox .sidebarBoxInnerBox .content, .mobileOptimized #sidebarBeforeContent .sidebarBox .sidebarBoxInnerBox .footer, .mobileOptimized #sidebarAfterContent .sidebarBox .sidebarBoxInnerBox .header, .mobileOptimized #sidebarAfterContent .sidebarBox .sidebarBoxInnerBox .content, .mobileOptimized #sidebarAfterContent .sidebarBox .sidebarBoxInnerBox .footer { padding: 6px 10px !important; width: 100% !important; } .mobileOptimized #sidebarBeforeContent .sidebarBox img, .mobileOptimized #sidebarAfterContent .sidebarBox img, .mobileOptimized #sidebarBeforeContent .sidebarBox table, .mobileOptimized #sidebarAfterContent .sidebarBox table { max-width: 100% !important; height: auto !important; } .mobileOptimized #sidebarBeforeContent .sidebarBox table, .mobileOptimized #sidebarAfterContent .sidebarBox table { width: 100% !important; font-size: 11px !important; } /* Hero box has its OWN floating position - hidden ONLY while still nested in a drawer. JS moves #sidebarBoxHero to on mobile init, after which the position:fixed rule below applies. Selector restricted so it doesn't kill the floating hero. */ .mobileOptimized #sidebarBeforeContent > #sidebarBoxHero, .mobileOptimized #sidebarAfterContent > #sidebarBoxHero { display: none !important; } /* Edge grab handles (small visible tabs to hint swipe) */ .mobileOptimized #mobileEdgeLeft, .mobileOptimized #mobileEdgeRight { position: fixed !important; top: 50% !important; width: 14px !important; height: 60px !important; background: rgba(58,45,18,.6) !important; z-index: 9994 !important; transform: translateY(-50%) !important; border-radius: 0 6px 6px 0 !important; cursor: pointer !important; } .mobileOptimized #mobileEdgeRight { right: 0 !important; left: auto !important; border-radius: 6px 0 0 6px !important; } .mobileOptimized #mobileEdgeLeft { left: 0 !important; right: auto !important; } /* Backdrop when drawer open — sits BEHIND the drawer (9995) */ .mobileOptimized #mobileDrawerBackdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,.35) !important; z-index: 9993 !important; display: none !important; pointer-events: none !important; } .mobileOptimized #mobileDrawerBackdrop.show { display: block !important; pointer-events: auto !important; } /* ensure the drawer + everything inside it is clickable above backdrop */ .mobileOptimized div#sidebarBeforeContent.mobileOpen, .mobileOptimized div#sidebarAfterContent.mobileOpen { z-index: 9996 !important; pointer-events: auto !important; } .mobileOptimized div#sidebarBeforeContent.mobileOpen *, .mobileOptimized div#sidebarAfterContent.mobileOpen * { pointer-events: auto !important; } /* ---------- 2) HEADER → fixed BOTTOM bar (holds #navigation) ---------- */ .mobileOptimized #header { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; height: 95px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border-top: none !important; box-shadow: 0 -4px 12px rgba(0,0,0,.5) !important; box-sizing: border-box !important; z-index: 9999 !important; overflow: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* dark backdrop only — keeps original sprite buttons fully visible */ .mobileOptimized #header::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; } body.mobileOptimized ul#navigation, body.mobileOptimized #navigation { position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; inset: auto 0 0 0 !important; width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; height: 95px !important; margin: 0 !important; padding: 0 4px !important; list-style: none !important; background: linear-gradient(0deg, #6449004d 0%, #866b301a 76%) !important; box-shadow: 0 -4px 12px rgba(0,0,0,.5) !important; display: flex !important; flex-direction: row !important; justify-content: space-around !important; align-items: center !important; box-sizing: border-box !important; transform: none !important; transition: none !important; z-index: 9999 !important; grid-template-columns: none !important; grid-template-rows: none !important; } /* prevent flash of desktop navigation before mobileOptimized class lands on body. Apply mobile layout directly via html.mobileReady (set instantly, before render). */ html.mobileReady #navigation, html.mobileReady ul#navigation { position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; inset: auto 0 0 0 !important; width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; height: 95px !important; margin: 0 !important; padding: 0 4px !important; background: linear-gradient(0deg, #6449004d 0%, #866b301a 76%) !important; box-shadow: 0 -4px 12px rgba(0,0,0,.5) !important; display: flex !important; justify-content: space-around !important; align-items: center !important; box-sizing: border-box !important; transform: none !important; transition: none !important; z-index: 9999 !important; grid-template-columns: none !important; grid-template-rows: none !important; } /* === NEUTRALIZE OLD DESKTOP navigation styles completely === The original headerNavigation.css paints a desktop button bar BEHIND our mobile bar. On :active/:focus the desktop layer shows through as a flash. We kill every visual property of the desktop layer so nothing can show. */ html.mobileReady #navigation::before, html.mobileReady #navigation::after, html.mobileReady ul#navigation::before, html.mobileReady ul#navigation::after { display: none !important; content: none !important; background: none !important; } html.mobileReady #navigation li, html.mobileReady ul#navigation li { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* DO NOT kill li::before/::after — they hold the sprite icons */ /* kill focus/outline ring on buttons (green ring in screenshot) */ html.mobileReady #navigation li, html.mobileReady #navigation li > a, html.mobileReady #navigation li > a:focus, html.mobileReady #navigation li > a:focus-visible, html.mobileReady #navigation li > a:active, html.mobileReady #navigation li > a:hover { outline: none !important; -webkit-tap-highlight-color: transparent !important; } html.mobileReady #header { position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 95px !important; margin: 0 !important; background: transparent !important; border: none !important; z-index: 9999 !important; } .mobileOptimized ul#navigation li { flex: 1 1 0 !important; margin: 0 !important; padding: 0 !important; height: 70px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; background: none !important; width: auto !important; } /* === Legends-style circular buttons (applied to the inner ) === */ .mobileOptimized ul#navigation li > a { width: 66px !important; height: 66px !important; display: block !important; position: relative !important; border: 1px solid #553420 !important; border-radius: 50% !important; background-image: linear-gradient(to bottom, #cbb198, #7b6050) !important; box-shadow: inset 0 1px 0 0 #ddcbb7, inset 0 -1px 0 0 #664f3d, inset 1px 0 0 0 #bba693, inset -1px 0 0 0 #7d6651, 0 3px 3px 0 rgba(0,0,0,0.3) !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent !important; transition-duration: 150ms !important; } /* inner ring (the dark crater) */ .mobileOptimized ul#navigation li > a::before { content: "" !important; position: absolute !important; top: 4px !important; left: 4px !important; right: 4px !important; bottom: 4px !important; border: 1px solid #553420 !important; border-radius: 50% !important; background-color: #5e4538 !important; box-shadow: 0 -1px 0 0 #89735d, 0 1px 0 0 #aa9789, -1px 0 0 0 #8e7360, 1px 0 0 0 #8e7360, inset 0 0 3px 0 rgba(0,0,0,0.5) !important; transition-duration: 150ms !important; } /* icon sprite (the symbol) */ .mobileOptimized ul#navigation li > a::after { content: "" !important; position: absolute !important; width: 72px !important; height: 72px !important; top: -6px !important; right: -6px !important; left: auto !important; background-image: url('../img_rtl/hud/topBar/navigation/navigation.png') !important; background-repeat: no-repeat !important; background-size: 72px auto !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none !important; transition: none !important; } /* prevent any state change on tap — keep button identical when pressed */ .mobileOptimized ul#navigation li > a { -webkit-tap-highlight-color: transparent !important; } /* neutralize desktop headerNavigation rule that targets :not(.gold):not(.events) a:not(.background)::after */ .mobileOptimized ul#navigation li:not(.gold):not(.events) > a:not(.background)::after { background-image: url('../img_rtl/hud/topBar/navigation/navigation.png') !important; width: 72px !important; height: 72px !important; background-size: 72px auto !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* === icon sprite positions (scaled 62→72 = ×1.16) === */ .mobileOptimized ul#navigation li#n1 > a::after { background-position: 0 0 !important; } .mobileOptimized.perspectiveResources ul#navigation li#n1 > a::after, .mobileOptimized ul#navigation li#n1 > a.active::after, .mobileOptimized ul#navigation li#n1 > a:hover::after { background-position: 0 -72px !important; } .mobileOptimized ul#navigation li#n2 > a::after { background-position: 0 -144px !important; } .mobileOptimized.perspectiveBuildings ul#navigation li#n2 > a::after, .mobileOptimized ul#navigation li#n2 > a.active::after, .mobileOptimized ul#navigation li#n2 > a:hover::after { background-position: 0 -216px !important; } .mobileOptimized ul#navigation li#n3 > a::after { background-position: 0 -288px !important; } .mobileOptimized ul#navigation li#n3 > a.active::after, .mobileOptimized ul#navigation li#n3 > a:hover::after { background-position: 0 -360px !important; } .mobileOptimized ul#navigation li#n4 > a::after { background-position: 0 -432px !important; } .mobileOptimized ul#navigation li#n4 > a.active::after, .mobileOptimized ul#navigation li#n4 > a:hover::after { background-position: 0 -504px !important; } .mobileOptimized ul#navigation li#n5 > a::after { background-position: 0 -576px !important; } .mobileOptimized ul#navigation li#n5 > a.active::after, .mobileOptimized ul#navigation li#n5 > a:hover::after { background-position: 0 -648px !important; } .mobileOptimized ul#navigation li#n6 > a::after { background-position: 0 -720px !important; } .mobileOptimized ul#navigation li#n6 > a.active::after, .mobileOptimized ul#navigation li#n6 > a:hover::after { background-position: 0 -792px !important; } /* n8 is now the mobileMenu button (label, not ) — use sprite from navigation.png */ .mobileOptimized ul#navigation li#n8 > label.mobileMenuButton { width: 66px !important; height: 66px !important; display: block !important; position: relative !important; border: 1px solid #553420 !important; border-radius: 50% !important; background-image: linear-gradient(to bottom, #cbb198, #7b6050) !important; box-shadow: inset 0 1px 0 0 #ddcbb7, inset 0 -1px 0 0 #664f3d, inset 1px 0 0 0 #bba693, inset -1px 0 0 0 #7d6651, 0 3px 3px 0 rgba(0,0,0,0.3) !important; box-sizing: border-box !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } .mobileOptimized ul#navigation li#n8 > label.mobileMenuButton::before { content: "" !important; position: absolute !important; top: 4px !important; left: 4px !important; right: 4px !important; bottom: 4px !important; border: 1px solid #553420 !important; border-radius: 50% !important; background-color: #5e4538 !important; box-shadow: 0 -1px 0 0 #89735d, 0 1px 0 0 #aa9789, -1px 0 0 0 #8e7360, 1px 0 0 0 #8e7360, inset 0 0 3px 0 rgba(0,0,0,0.5) !important; } .mobileOptimized ul#navigation li#n8 > label.mobileMenuButton::after { content: "" !important; position: absolute !important; width: 72px !important; height: 72px !important; top: -6px !important; right: -6px !important; left: auto !important; background-image: url('../img_rtl/hud/topBar/navigation/navigation.png') !important; background-repeat: no-repeat !important; background-size: 72px auto !important; background-position: 0 -1008px !important; /* 868 * (72/62) ≈ 1008 */ pointer-events: none !important; } /* checked state — visually active when menu is open */ #mobileMenuState:checked ~ ul#navigation li#n8 > label.mobileMenuButton { background-image: linear-gradient(to bottom, #dbc1a8, #b49581) !important; } #mobileMenuState:checked ~ ul#navigation li#n8 > label.mobileMenuButton::before { background-color: #7a6153 !important; } #mobileMenuState:checked ~ ul#navigation li#n8 > label.mobileMenuButton::after { background-position: 0 -1080px !important; /* 930 * (72/62) ≈ 1080 */ } /* hide checkbox itself */ #mobileMenuState { display: none !important; } /* === nav#mobileMenu — drop-up panel above the bottom nav === */ .mobileOptimized nav#mobileMenu { position: fixed !important; bottom: 80px !important; /* above bottom #navigation (80px) */ left: 8px !important; right: auto !important; max-width: 260px !important; width: 260px !important; max-height: calc(100vh - 180px) !important; overflow-y: auto !important; background-color: #e3d8c4 !important; color: #5e463a !important; font-size: 16px !important; padding: 18px 20px 10px !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,.4) !important; opacity: 0 !important; transform: rotateX(-90deg) !important; transform-origin: bottom center !important; transition: none !important; pointer-events: none !important; visibility: hidden !important; z-index: 9998 !important; display: block !important; } #mobileMenuState:checked ~ nav#mobileMenu { opacity: 1 !important; transform: rotateX(0) !important; pointer-events: auto !important; visibility: visible !important; z-index: 10002 !important; transition: opacity .25s ease, transform .25s ease !important; } .mobileOptimized nav#mobileMenu ul { padding: 0 !important; margin: 0 !important; list-style: none !important; } .mobileOptimized nav#mobileMenu ul li { line-height: 21px !important; margin-bottom: 16px !important; } .mobileOptimized nav#mobileMenu ul li:last-child { margin-bottom: 0 !important; } .mobileOptimized nav#mobileMenu ul li a { color: #5e463a !important; font-weight: 700 !important; text-decoration: none !important; display: block !important; } .mobileOptimized nav#mobileMenu .inlineIcon { display: inline-grid !important; grid-template-columns: 22px 1fr !important; align-items: center !important; column-gap: 8px !important; width: 100% !important; } .mobileOptimized nav#mobileMenu .inlineIcon svg { width: 22px !important; height: 22px !important; fill: #5e463a !important; } .mobileOptimized nav#mobileMenu svg.divider { width: 100% !important; height: auto !important; margin: 16px auto !important; fill: rgba(94, 70, 58, 0.4) !important; display: block !important; } .mobileOptimized nav#mobileMenu ul:last-of-type { font-size: 16px !important; } /* alert badge inside menu items — absolute so it adds no space */ .mobileOptimized nav#mobileMenu ul li a { position: relative !important; } .mobileOptimized nav#mobileMenu .menuItemAlert { position: absolute !important; top: 50% !important; left: 0 !important; right: auto !important; transform: translateY(-50%) !important; background: #e53535 !important; color: #fff !important; font-weight: bold !important; border-radius: 50% !important; width: 18px !important; height: 18px !important; line-height: 18px !important; text-align: center !important; font-size: 12px !important; box-shadow: 0 1px 2px rgba(0,0,0,.4) !important; margin: 0 !important; } /* n7 = gold → golden button */ .mobileOptimized ul#navigation li#n7 > a { background-image: linear-gradient(to bottom, #ffe08a, #c08a1e) !important; border-color: #6b4a10 !important; box-shadow: inset 0 1px 0 0 #fff3c4, inset 0 -1px 0 0 #8a5e10, 0 3px 4px rgba(0,0,0,0.4), 0 0 8px rgba(255,200,60,0.4) !important; } .mobileOptimized ul#navigation li#n7 > a::before { background-color: #b8830f !important; border-color: #6b4a10 !important; } .mobileOptimized ul#navigation li#n7 > a::after { content: "" !important; position: absolute !important; display: block !important; background-image: url('../img_rtl/hud/topBar/shop.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 66px auto !important; background-color: transparent !important; width: 62px !important; height: 65px !important; top: 0px !important; right: 1px !important; left: auto !important; z-index: 5 !important; pointer-events: none !important; } /* speech bubble (notifications) */ .mobileOptimized #navigation .speechBubbleContainer { position: absolute !important; top: -6px !important; left: 8px !important; right: auto !important; z-index: 10 !important; transform: scale(.95) !important; transform-origin: top left !important; } .mobileOptimized #navigation .navEventAlert { position: absolute !important; top: 3px !important; right: 18px !important; background: #e53535 !important; color: #fff !important; font-weight: bold !important; border-radius: 50% !important; width: 18px !important; height: 18px !important; line-height: 18px !important; text-align: center !important; font-size: 13px !important; z-index: 10 !important; box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } /* ---------- 3) STOCKBAR → fixed TOP bar, original look preserved ---------- */ .mobileOptimized ul#stockBar { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; height: 49px !important; margin: 0 !important; padding: 0 4px !important; z-index: 9998 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; } .mobileOptimized ul#stockBar:before, .mobileOptimized ul#stockBar:after { display: none !important; } /* hide non-resource items on mobile */ .mobileOptimized ul#stockBar #stockBarWarehouseWrapper, .mobileOptimized ul#stockBar #stockBarGranaryWrapper, .mobileOptimized ul#stockBar #stockBarFreeCropWrapper { display: none !important; } /* distribute the 4 resources evenly across the bar */ .mobileOptimized ul#stockBar > li.stockBarButton { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: 45px !important; margin: 0 3px !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: stretch !important; box-sizing: border-box !important; position: relative !important; overflow: visible !important; box-shadow: 1px -1px 8px rgba(37, 37, 37, 0.7) !important; border: 1px solid #0418187a !important; } /* hide the clickable img inside middle */ .mobileOptimized ul#stockBar > li.stockBarButton .middle > a { display: none !important; } /* middle = the grid: row1 = value (full width), row2 = icon | barBox */ .mobileOptimized ul#stockBar > li.stockBarButton .middle { display: grid !important; grid-template-columns: auto 1fr !important; grid-template-rows: auto 1fr !important; grid-template-areas: "val val" "ico bar" !important; column-gap: 5px !important; row-gap: 0 !important; flex: 1 1 auto !important; height: 100% !important; padding: 2px 6px 4px !important; box-sizing: border-box !important; align-items: end !important; } .mobileOptimized ul#stockBar > li.stockBarButton .middle .value { align-self: start !important; } /* row 1: number — centered, full width */ .mobileOptimized ul#stockBar > li.stockBarButton .middle .value { grid-area: val !important; width: 100% !important; text-align: center !important; position: absolute !important; top: 0 !important; right: 0 !important; left: 0 !important; margin: auto !important; font-weight: bold !important; color: #2a1d0a !important; text-shadow: 0 1px 0 rgba(255,255,255,.7) !important; line-height: 1.1 !important; white-space: nowrap !important; padding: 0 !important; margin: 0 !important; } /* row 2 left: resource icon */ .mobileOptimized ul#stockBar > li.stockBarButton .middle > i { grid-area: ico !important; display: inline-block !important; width: 18px !important; height: 18px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; margin: 0 !important; padding: 0 !important; position: static !important; float: none !important; } /* row 2 right: progress bar (barBox) */ .mobileOptimized ul#stockBar > li.stockBarButton .middle .barBox { grid-area: bar !important; position: relative !important; width: 100% !important; height: 10px !important; margin: 0 !important; padding: 0 !important; background-color: #d8d8d8 !important; border: 1px solid #6b5a30 !important; border-radius: 3px !important; box-sizing: border-box !important; overflow: hidden !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; float: none !important; } .mobileOptimized ul#stockBar > li.stockBarButton .middle .barBox .bar { height: 100% !important; background: linear-gradient(to bottom, #2fa02f 0%, #006900 100%) !important; position: absolute !important; bottom: 0 !important; right: 0 !important; left: auto !important; top: 0 !important; } .mobileOptimized ul#stockBar > li.stockBarButton .middle .barBox .bar.stockFull { background: linear-gradient(to bottom, #e53535 0%, #b00000 100%) !important; } /* let original stockBar.css handle the look (sizes, sprites, bar) */ /* gold + silver compact box at start of stockBar */ .mobileOptimized ul#stockBar > li#mobileGoldHolder { flex: 0 0 84px !important; width: 84px !important; height: 44px !important; margin: 0 2px 0 0 !important; padding: 2px 3px !important; background: rgba(255,255,255,.7) !important; border: 1px solid #8c7544 !important; border-radius: 4px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: center !important; line-height: 1 !important; overflow: hidden !important; } .mobileOptimized #mobileGoldHolder > div#goldSilver { display: flex !important; flex-direction: column !important; gap: 2px !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: none !important; position: static !important; } .mobileOptimized #mobileGoldHolder #goldSilver > div.gold, .mobileOptimized #mobileGoldHolder #goldSilver > div.silver { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 3px !important; width: 100% !important; height: 18px !important; margin: 0 !important; padding: 0 !important; background: none !important; position: relative !important; font-size: 10px !important; font-weight: bold !important; color: #3a2d12 !important; line-height: 1 !important; } /* keep original sprite icons on imgs - DO NOT override background */ .mobileOptimized #mobileGoldHolder img.gold, .mobileOptimized #mobileGoldHolder img.silver { flex: 0 0 12px !important; margin: 0 !important; display: inline-block !important; } /* shrink amount text */ .mobileOptimized #mobileGoldHolder .ajaxReplaceableGoldAmount, .mobileOptimized #mobileGoldHolder .ajaxReplaceableSilverAmount { flex: 1 1 auto !important; font-size: 10px !important; font-weight: bold !important; color: #3a2d12 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1 !important; direction: ltr !important; text-align: left !important; } .mobileOptimized #mobileGoldHolder #goldInfoBtn, .mobileOptimized #mobileGoldHolder #goldBreakdown, .mobileOptimized #goldInfoBtn, .mobileOptimized #goldBreakdown { display: none !important; } /* ---------- 4) Floating HERO (top-right) — Travian Legends mobile style ---------- Shown only on village pages (dorf1/dorf2). Hidden everywhere else. */ .mobileOptimized #sidebarBoxHero { display: none !important; } .mobileOptimized.village1 #sidebarBoxHero, body.mobileOptimized.village1 #sidebarBoxHero { display: block !important; position: fixed !important; top: 62px !important; right: 4px !important; left: auto !important; width: 135px !important; height: 178px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; z-index: 5000 !important; pointer-events: none !important; } /* hide the heavy decorations: baseBox frames, sidebarBoxInnerBox base */ .mobileOptimized #sidebarBoxHero .sidebarBoxBaseBox, .mobileOptimized #sidebarBoxHero .playerName, .mobileOptimized #sidebarBoxHero .heroStatusMessage { display: none !important; } /* keep innerBox.content visible because it hosts .progressBars (health/xp) */ .mobileOptimized #sidebarBoxHero .sidebarBoxInnerBox > .innerBox.content { display: block !important; position: absolute !important; top: 143px !important; right: 0 !important; left: 0 !important; width: 135px !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; } .mobileOptimized #sidebarBoxHero .sidebarBoxInnerBox > .innerBox.content .progressBars { display: block !important; position: relative !important; width: 100% !important; padding: 0 5px !important; box-sizing: border-box !important; } /* action buttons hugging the bottom edge of the hero circle in a half-arc */ .mobileOptimized #sidebarBoxHero .buttonsWrapper { display: block !important; position: absolute !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 135px !important; height: 135px !important; pointer-events: none !important; z-index: 4 !important; padding: 0 !important; margin: 0 !important; } /* auction button — bottom-left, on the circle's lower edge */ .mobileOptimized #sidebarBoxHero .buttonsWrapper .layoutButton.auctionWhite { position: absolute !important; top: auto !important; bottom: -2px !important; left: 2px !important; right: auto !important; pointer-events: auto !important; z-index: 6 !important; } /* adventure button — stacked ABOVE auction (same left side) */ .mobileOptimized #sidebarBoxHero .buttonsWrapper .layoutButton.adventureWhite { position: absolute !important; top: auto !important; bottom: 60px !important; left: -20px !important; right: auto !important; pointer-events: auto !important; z-index: 6 !important; } .mobileOptimized #sidebarBoxHero .buttonsWrapper .layoutButton { width: 44px !important; height: 42px !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; flex: 0 0 44px !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } .mobileOptimized #sidebarBoxHero .buttonsWrapper .layoutButton .button-container { width: 42px !important; height: 40px !important; position: relative !important; } .mobileOptimized #sidebarBoxHero .buttonsWrapper .layoutButton .button-container i { position: relative !important; top: 1px !important; right: 2px !important; } /* speech bubble (adventure count) — small badge on top-right of button */ .mobileOptimized #sidebarBoxHero .buttonsWrapper .speechBubbleContainer, .mobileOptimized #sidebarBoxHero .buttonsWrapper .layoutButton .speechBubbleContainer, .mobileOptimized #sidebarBoxHero .buttonsWrapper .layoutButton:not(:hover):not(:active) .speechBubbleContainer, .mobileOptimized #sidebarBoxHero .buttonsWrapper button.layoutButton .speechBubbleContainer { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: -10px !important; right: 28px !important; left: auto !important; z-index: 10 !important; transform: none !important; pointer-events: none !important; } .mobileOptimized #sidebarBoxHero .buttonsWrapper .speechBubbleContainer .speechBubbleContent, .mobileOptimized #sidebarBoxHero .buttonsWrapper .speechBubbleContainer .speechBubbleBackground, .mobileOptimized #sidebarBoxHero .buttonsWrapper .speechBubbleContainer .speechBubbleBackground div { display: block !important; visibility: visible !important; opacity: 1 !important; } /* desktop sidebar gives the bubble text color #333; we lost that inheritance when JS moved #sidebarBoxHero out of the sidebar — restore it explicitly */ .mobileOptimized #sidebarBoxHero .buttonsWrapper .speechBubbleContainer .speechBubbleContent { color: #333333 !important; } .mobileOptimized #sidebarBoxHero .sidebarBoxInnerBox, .mobileOptimized #sidebarBoxHero .innerBox.header { position: static !important; width: 110px !important; height: 110px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; overflow: visible !important; pointer-events: auto !important; } /* Hero circle — same structure as desktop sidebarBoxHero .heroImageButton, sized 90x90. - ::before = inner gradient circle (background of the portrait) - .heroImage = hero portrait - ::after = heroBorder.png overlay (the decorative frame) */ .mobileOptimized #sidebarBoxHero .heroImageButton { position: absolute !important; top: 0 !important; right: calc(50% - 67.5px) !important; left: auto !important; width: 135px !important; height: 135px !important; border-radius: 50% !important; overflow: visible !important; pointer-events: auto !important; cursor: pointer !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; box-sizing: border-box !important; text-align: center !important; } .mobileOptimized #sidebarBoxHero .heroImageButton::before { content: "" !important; position: absolute !important; top: 10px !important; left: 12px !important; bottom: 13px !important; right: 10px !important; z-index: 1 !important; border-radius: 50% !important; background-image: linear-gradient(to bottom, #e7e1c9, #e8e2ca, #cac4aa) !important; box-shadow: inset 0 0 15px 3px rgba(0,0,0,0.5) !important; } .mobileOptimized #sidebarBoxHero .heroImageButton .heroImage { position: relative !important; bottom: 0 !important; top: auto !important; left: auto !important; right: auto !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; z-index: 2 !important; border: none !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; object-fit: initial !important; } .mobileOptimized #sidebarBoxHero .heroImageButton::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; z-index: 3 !important; background-image: url('../img_rtl/layout/heroBorder.png') !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; border-radius: 50% !important; pointer-events: none !important; } /* horizontal health bar — below the circle */ .mobileOptimized #sidebarBoxHero .heroHealthBarBox { display: block !important; position: relative !important; top: 0 !important; right: auto !important; left: auto !important; width: auto !important; height: 8px !important; margin: 0 0 2px 0 !important; padding: 1px !important; background-color: #52372a !important; border: 1px solid #A6A6A6 !important; border-radius: 3px !important; z-index: 3 !important; pointer-events: auto !important; } .mobileOptimized #sidebarBoxHero .heroHealthBarBox .bar { height: 100% !important; background-color: #5fa83a !important; border-radius: 2px !important; } .mobileOptimized #sidebarBoxHero .heroHealthBarBox a, .mobileOptimized #sidebarBoxHero .heroHealthBarBox img { display: none !important; } /* horizontal xp bar — below the health bar */ .mobileOptimized #sidebarBoxHero .heroXpBarBox { display: block !important; position: relative !important; top: 0 !important; right: auto !important; left: auto !important; width: auto !important; height: 8px !important; margin: 0 !important; padding: 1px !important; background-color: #52372a !important; border: 1px solid #A6A6A6 !important; border-radius: 3px !important; z-index: 3 !important; pointer-events: auto !important; } .mobileOptimized #sidebarBoxHero .heroXpBarBox .bar { height: 100% !important; background-color: #3aa9ff !important; border-radius: 2px !important; } .mobileOptimized #sidebarBoxHero .heroXpBarBox a, .mobileOptimized #sidebarBoxHero .heroXpBarBox img { display: none !important; } /* keep .progressBars visible to host the bars */ .mobileOptimized #sidebarBoxHero .progressBars { display: block !important; position: static !important; } /* mobile: bigSpeechBubble (levelUp/dead indicators) — restore visibility after hero moved to . desktop selector requires `.sidebar` parent which is lost. */ @media screen and (max-width: 820px) { .mobileOptimized.village1 #sidebarBoxHero .bigSpeechBubble { position: absolute !important; top: 78px !important; right: 4px !important; left: auto !important; z-index: 9001 !important; pointer-events: none !important; transform: scale(0.7) !important; transform-origin: top right !important; } .mobileOptimized #sidebarBoxHero .bigSpeechBubble.levelUp img { background-image: url('../img_rtl/layout/icons/star-rtl.png') !important; } .mobileOptimized #sidebarBoxHero .bigSpeechBubble.dead img { background-image: url('../img_rtl/layout/icons/skull-rtl.png') !important; } } /* ---------- 5) CONTENT — Travian's own technique Keep original sizes. Use overflow:auto for internal scroll. Use transform:scale on village field to fit width. ---------- */ .mobileOptimized.village1 #contentOuterContainer, .mobileOptimized.village2 #contentOuterContainer { position: absolute !important; top: 50px !important; /* below stockBar */ bottom: 60px !important; /* above navigation bar */ left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; box-sizing: border-box !important; overflow: auto !important; -webkit-overflow-scrolling: touch !important; } /* === content pages (not dorf1/dorf2) — keep desktop layout untouched. viewport=620 means the browser will visually fit it to the device. Only adjust #center padding so content sits between top stockBar (~50px) and bottom navigation (~60px). === */ body.mobileOptimized:not(.village1):not(.village2) #center { width: 620px !important; padding-top: 55px !important; padding-bottom: 65px !important; box-sizing: border-box !important; height: auto !important; min-height: 100vh !important; overflow: visible !important; } /* allow text pages to scroll vertically (override default overflow:hidden chain). Specificity boosted with div#background + repeated body class to win over the desktop-style body.mobileOptimized.buildingsV1.perspectiveResources rule. */ body.mobileOptimized:not(.village1):not(.village2) div#background, body.mobileOptimized.buildingsV1.perspectiveResources:not(.village1):not(.village2) div#background, body.mobileOptimized.perspectiveBuildings:not(.village1):not(.village2) div#background { height: auto !important; min-height: 100vh !important; overflow: visible !important; } body.mobileOptimized:not(.village1):not(.village2) #bodyWrapper { height: auto !important; min-height: 100vh !important; overflow: visible !important; } body.mobileOptimized:not(.village1):not(.village2), html:has(body.mobileOptimized:not(.village1):not(.village2)) { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; } /* drawers (sidebars) are moved to by JS; on text pages center has no sidebar column */ body.mobileOptimized:not(.village1):not(.village2) #center > .sidebar { display: none !important; } /* contentOuterContainer: cancel float, fit center width (600 like desktop size1) */ body.mobileOptimized:not(.village1):not(.village2) #contentOuterContainer { float: none !important; width: 882px !important; margin: 0 auto !important; } body.mobileOptimized:not(.village1):not(.village2) #contentOuterContainer.size2 { width: 882px !important; } body.mobileOptimized:not(.village1):not(.village2) #contentOuterContainer.size2 #content { width: 554px !important; } /* inner padding on #content for all text pages so content stays inside container */ body.mobileOptimized:not(.village1):not(.village2) #contentOuterContainer #content { padding: 11px !important; box-sizing: border-box !important; } /* chat page: taller chat container on mobile (desktop default is 550px) */ body.mobileOptimized #content.chat #chatContainer { height: 800px !important; } /* small inner padding on #build so content doesn't touch container borders */ body.mobileOptimized #build { box-sizing: border-box !important; } body.mobileOptimized form[action^="berichte.php"], body.mobileOptimized form[action^="nachrichten.php"] { padding: 11px !important; box-sizing: border-box !important; } /* subNavi: place as a normal row below contentTitle (cancel desktop float offsets). negative side margins cancel #content's 11px padding so subNavi spans full width */ body.mobileOptimized:not(.village1):not(.village2) .subNavi { position: relative !important; left: 0 !important; right: 0 !important; top: 0 !important; width: auto !important; margin: -11px -11px 12px -11px !important; box-sizing: border-box !important; } /* h1.titleInHeader: keep absolute positioning but place it inside contentTitle (37px height) */ body.mobileOptimized:not(.village1):not(.village2) h1.titleInHeader { top: 6px !important; right: 10px !important; left: 10px !important; width: auto !important; pointer-events: none !important; } .mobileOptimized.village1 #contentOuterContainer .contentContainer, .mobileOptimized.village2 #contentOuterContainer .contentContainer, body.mobileOptimized.village1 #contentOuterContainer .contentContainer, body.mobileOptimized.village2 #contentOuterContainer .contentContainer { width: 100% !important; max-width: 100vw !important; height: auto !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; box-sizing: border-box !important; position: relative !important; overflow-x: hidden !important; } .mobileOptimized.village1 #contentOuterContainer .contentTitle, .mobileOptimized.village2 #contentOuterContainer .contentTitle, body.mobileOptimized.village1 #contentOuterContainer .contentTitle, body.mobileOptimized.village2 #contentOuterContainer .contentTitle { display: none !important; } .mobileOptimized #content { width: 100% !important; min-width: 0 !important; max-width: 100vw !important; margin: 0 !important; padding: 0px !important; background: none !important; border: none !important; box-shadow: none !important; box-sizing: border-box !important; min-height: 100% !important; } /* Village fields page (dorf1) — TRAVIAN'S OWN APPROACH: Original #resourceFieldContainer is 473×304px positioned absolutely. Scale it down to fit ~412px viewport. */ /* Village content wrapper: NO scale here (so troops/movements stay normal size). */ .mobileOptimized #content.village1 { position: relative !important; width: 100% !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* Resource fields image: scale + reposition. --- TUNE THESE --- --rf-top : how far DOWN from top (original 91px). Increase = lower. --rf-side : how far from start side (original right:281px in LTR; right:281 in RTL too via flip). Decrease = move toward edge. --rf-scale : zoom factor. */ /* travt44 #village_map — scale up to fill the 620 mobile viewport area (mirrors Travian Legends' scale(1.35) on the resource fields) */ .mobileOptimized #village_map { position: relative !important; margin: 90px auto 0 !important; transform: scale(1.4) !important; transform-origin: top center !important; } /* village2 (dorf2.php) — building view scaled to fit 620 viewport original size: 628w × 534h. Scale ~0.95 to fit nicely, push down ~80px */ .mobileOptimized #content.village2 { position: relative !important; min-height: 0 !important; height: calc(100vh - 64px - 49px) !important; width: 100% !important; overflow: hidden !important; touch-action: pan-x pan-y pinch-zoom !important; } .mobileOptimized #content.village2 .villageMapWrapper { width: 100% !important; max-width: 620px !important; height: auto !important; margin: 0 auto !important; position: relative !important; overflow: visible !important; } .mobileOptimized #content.village2 #village_map { position: relative !important; width: 703px !important; height: 539px !important; margin: 95px -34px 0 !important; transform: scale(0.99) !important; transform-origin: top center !important; left: auto !important; right: auto !important; } .mobileOptimized #content.village2 #village_map img.clickareas { width: 703px !important; height: 539px !important; } .mobileOptimized #content.village1 { position: relative !important; min-height: 0 !important; height: calc(100vh - 64px - 49px) !important; overflow: hidden !important; } /* prevent extra scroll on village1 — the map is transform-scaled so its real box is smaller than visual size; locking overflow avoids the page scrolling the map image instead of the page */ .mobileOptimized body.village1 #contentOuterContainer, .mobileOptimized .village1 #contentOuterContainer { overflow: hidden !important; } .mobileOptimized #content.village1 #map_details { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; clear: both !important; } .mobileOptimized #content.village1 #movementsContainer, .mobileOptimized #movementsContainer { position: fixed !important; top: 117px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 4px !important; display: block !important; clear: both !important; z-index: 9990 !important; box-sizing: border-box !important; pointer-events: auto !important; transform: none !important; } /* Do NOT touch #resourceFieldContainer dimensions or positioning - the original absolute positioning right:281px / top:91px must work. */ /* generic content tables */ .mobileOptimized table { max-width: 100% !important; font-size: 12px !important; } .mobileOptimized .contentBox, .mobileOptimized .contentBoxBody { width: auto !important; max-width: 100% !important; margin: 4px !important; padding: 6px !important; box-sizing: border-box !important; } /* keep dlBox at desktop size on mobile (override max-width:700 in travianEvents.css) */ .mobileOptimized .epModal .dlBox { width: 58px !important; } .mobileOptimized .epModal .dlBoxImg { width: 48px !important; height: 48px !important; } /* epModal overlay — force viewport-sized fixed positioning on mobile */ .mobileOptimized .epModalOverlay { width: 100vw !important; height: 100vh !important; left: 0 !important; right: auto !important; top: 0 !important; } .mobileOptimized .epModal { width: 540px !important; max-width: calc(100vw - 20px) !important; } /* ===== login / anmelden / logout — enlarged centered form on mobile ===== */ /* hide bottom navigation/header bars (no game UI on these auth pages) */ body.mobileOptimized.login #header, body.mobileOptimized.login #navigation, body.mobileOptimized.login ul#navigation, body.mobileOptimized.login #stockBar, body.mobileOptimized.login #sidebarBoxHero, body.mobileOptimized.logout #header, body.mobileOptimized.logout #navigation, body.mobileOptimized.logout ul#navigation, body.mobileOptimized.logout #stockBar, body.mobileOptimized.logout #sidebarBoxHero { display: none !important; } /* center page vertically, remove padding meant for stockBar/navigation */ body.mobileOptimized.login #center, body.mobileOptimized.logout #center { padding: 20px 10px !important; min-height: 100vh !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; } /* contentOuterContainer fills width on auth pages */ body.mobileOptimized.login div#center div#contentOuterContainer, body.mobileOptimized.login div#center div#contentOuterContainer.size1, body.mobileOptimized.logout div#center div#contentOuterContainer, body.mobileOptimized.logout div#center div#contentOuterContainer.size1 { float: none !important; width: 882px !important; max-width: 100% !important; margin: 0 auto !important; padding-top: 0 !important; } /* enlarge login form text inputs */ body.mobileOptimized.login div.login table td input.text, body.mobileOptimized.login div#content.login input.text, body.mobileOptimized.logout div#content.logout input.text { width: 100% !important; max-width: 320px !important; box-sizing: border-box !important; padding: 10px 12px !important; font-size: 18px !important; height: auto !important; margin: 4px 0 !important; border: 1px solid #b39253 !important; border-radius: 4px !important; } /* password field wrapper must take full width so the input inside fills it */ body.mobileOptimized.login #pwFieldContainer { display: block !important; width: 100% !important; max-width: 320px !important; position: relative !important; } body.mobileOptimized.login #pwFieldContainer input.text { width: 100% !important; max-width: 100% !important; padding-right: 40px !important; /* room for the eye toggle */ } body.mobileOptimized.login #pwFieldContainer .pw-toggle-btn { position: absolute !important; top: 50% !important; left: 8px !important; right: auto !important; transform: translateY(-50%) !important; } /* enlarge labels (th) and cell text */ body.mobileOptimized.login div.login table th, body.mobileOptimized.login div.login table td, body.mobileOptimized.logout div.relogin table th, body.mobileOptimized.logout div.relogin table td { font-size: 16px !important; padding: 6px 4px !important; line-height: 1.4 !important; } /* stack table cells vertically on small screens */ body.mobileOptimized.login div.login table, body.mobileOptimized.logout div.relogin table { width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } /* login submit button — desktop is 25px tall; bump to 40px for mobile tap-area */ body.mobileOptimized.login div#content.login button.green, body.mobileOptimized.logout div#content.logout button.green { height: 40px !important; padding: 8px 28px !important; font-size: 15px !important; line-height: 1 !important; margin: 12px auto !important; display: inline-block !important; vertical-align: middle !important; } body.mobileOptimized.login div#content.login button.green .button-content, body.mobileOptimized.logout div#content.logout button.green .button-content { color: #fff !important; font-weight: bold !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important; display: inline !important; } /* hide the empty legacy decoration divs that inflate the button's height */ body.mobileOptimized.login div#content.login button.green .button-container, body.mobileOptimized.logout div#content.logout button.green .button-container { display: contents !important; } body.mobileOptimized.login div#content.login button.green .button-background, body.mobileOptimized.login div#content.login button.green .buttonStart, body.mobileOptimized.login div#content.login button.green .buttonEnd, body.mobileOptimized.login div#content.login button.green .buttonMiddle, body.mobileOptimized.logout div#content.logout button.green .button-background, body.mobileOptimized.logout div#content.logout button.green .buttonStart, body.mobileOptimized.logout div#content.logout button.green .buttonEnd, body.mobileOptimized.logout div#content.logout button.green .buttonMiddle { display: none !important; } /* center the submit row + leave space before greenbox */ body.mobileOptimized.login div.login table tr:last-child td { text-align: center !important; padding-bottom: 20px !important; } /* mobile mode toggle switch on login (inherits desktop styles; just ensure size) */ body.mobileOptimized.login label.mobileSwitchLabel { font-size: 15px !important; gap: 14px !important; } body.mobileOptimized.login .mobileSwitchText { font-size: 15px !important; } body.mobileOptimized.login .mobileSwitch { width: 48px !important; height: 26px !important; } body.mobileOptimized.login .mobileSwitchSlider::before { height: 22px !important; width: 22px !important; } body.mobileOptimized.login .mobileSwitch input:checked + .mobileSwitchSlider::before { transform: translateX(22px) !important; } /* greenbox children float: right on desktop with width:551px (general.css) — both cause overlap in our 320px column. Reset for mobile. */ body.mobileOptimized.login #content.login .greenbox { margin-top: 100px !important; clear: both !important; } body.mobileOptimized.login #content.login .greenbox > div.greenbox-top, body.mobileOptimized.login #content.login .greenbox > div.greenbox-content, body.mobileOptimized.login #content.login .greenbox > div.greenbox-bottom { float: none !important; width: auto !important; } /* page heading bigger and visible */ body.mobileOptimized.login #content.login h1.titleInHeader, body.mobileOptimized.logout #content.logout h1.titleInHeader { position: static !important; width: auto !important; height: auto !important; text-align: center !important; font-size: 22px !important; margin: 0 0 16px 0 !important; padding: 8px 0 !important; pointer-events: auto !important; } /* greenbox (relogin section in logout) */ body.mobileOptimized.logout #content.logout .greenbox { width: auto !important; max-width: 100% !important; margin: 16px 0 !important; } body.mobileOptimized.logout #content.logout .greenbox-content { padding: 12px !important; } /* center the relogin submit button (it lives in
, not a table row). desktop sets position:absolute; left:10px; bottom:10px (travianLogout.css) — undo it. */ body.mobileOptimized.logout #content.logout div.relogin div.submitButton, body.mobileOptimized.logout #content.logout .submitButton { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; text-align: center !important; width: 100% !important; margin: 8px 0 !important; padding: 0 !important; float: none !important; clear: both !important; } /* ===== anmelden.php (signup) — same look as login ===== */ /* body class is .login but #content class is .signup, so login rules above don't fully apply. Replicate the key sizing rules here. */ body.mobileOptimized.login div#content.signup input.text { width: 100% !important; max-width: 320px !important; box-sizing: border-box !important; padding: 10px 12px !important; font-size: 18px !important; height: auto !important; margin: 4px 0 !important; border: 1px solid #b39253 !important; border-radius: 4px !important; } body.mobileOptimized.login div#content.signup #pwFieldContainer { display: block !important; width: 100% !important; max-width: 320px !important; position: relative !important; margin: 0 auto !important; } body.mobileOptimized.login div#content.signup #pwFieldContainer input.text { width: 100% !important; max-width: 100% !important; padding-right: 40px !important; } body.mobileOptimized.login div#content.signup #pwFieldContainer .pw-toggle-btn { position: absolute !important; top: 50% !important; left: 8px !important; right: auto !important; transform: translateY(-50%) !important; } body.mobileOptimized.login div#content.signup table { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; table-layout: fixed !important; border-collapse: separate !important; border-spacing: 0 !important; } body.mobileOptimized.login div#content.signup table th { width: 110px !important; font-size: 16px !important; padding: 8px 6px !important; line-height: 1.4 !important; text-align: right !important; /* RTL: label sits on right edge */ vertical-align: middle !important; white-space: nowrap !important; } body.mobileOptimized.login div#content.signup table td { font-size: 16px !important; padding: 6px 4px !important; line-height: 1.4 !important; vertical-align: middle !important; } body.mobileOptimized.login div#content.signup table td[colspan="2"] { width: auto !important; padding: 4px 6px !important; } /* every input fills its td uniformly (no max-width per-input) */ body.mobileOptimized.login div#content.signup table td input.text, body.mobileOptimized.login div#content.signup table td #pwFieldContainer input.text { width: 100% !important; max-width: 100% !important; margin: 0 !important; display: block !important; } body.mobileOptimized.login div#content.signup table td #pwFieldContainer { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* signup submit button (lives in
, not a table cell) */ body.mobileOptimized.login div#content.signup div.btn { text-align: center !important; width: 100% !important; margin: 8px 0 !important; float: none !important; clear: both !important; } body.mobileOptimized.login div#content.signup button.green { height: 40px !important; padding: 8px 28px !important; font-size: 15px !important; line-height: 1 !important; margin: 12px auto !important; display: inline-block !important; vertical-align: middle !important; } body.mobileOptimized.login div#content.signup button.green .button-content { color: #fff !important; font-weight: bold !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important; display: inline !important; } body.mobileOptimized.login div#content.signup button.green .button-container { display: contents !important; } body.mobileOptimized.login div#content.signup button.green .button-background, body.mobileOptimized.login div#content.signup button.green .buttonStart, body.mobileOptimized.login div#content.signup button.green .buttonEnd, body.mobileOptimized.login div#content.signup button.green .buttonMiddle { display: none !important; } body.mobileOptimized.login div#content.signup h1.titleInHeader { position: static !important; width: auto !important; height: auto !important; text-align: center !important; font-size: 22px !important; margin: 0 0 16px 0 !important; padding: 8px 0 !important; pointer-events: auto !important; } body.mobileOptimized.login div#content.signup h4.round { font-size: 15px !important; text-align: center !important; margin: 12px 0 8px !important; padding: 6px 8px !important; } /* terms checkbox row */ body.mobileOptimized.login div#content.signup div.checks { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 10px auto !important; max-width: 320px !important; font-size: 16px !important; line-height: 1.4 !important; } body.mobileOptimized.login div#content.signup div.checks input.check { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin: 0 !important; } body.mobileOptimized.login div#content.signup div.checks label { margin: 0 !important; cursor: pointer !important; } /* inline field errors (.error spans under inputs) */ body.mobileOptimized.login div#content.signup span.error { display: block !important; color: #931414 !important; font-size: 12px !important; margin: 2px 0 4px !important; text-align: center !important; } /* agree-terms validation alert */ body.mobileOptimized.login div#content.signup div.maRegAlert { color: #931414 !important; font-size: 13px !important; text-align: center !important; margin: 6px auto !important; max-width: 320px !important; } /* password requirements box — bigger, fits column width */ body.mobileOptimized.login div#content.signup .pw-requirements { max-width: 320px !important; margin: 6px auto 0 !important; box-sizing: border-box !important; } body.mobileOptimized.login div#content.signup .pw-req-item { font-size: 13px !important; } /* leave breathing room at the bottom so server-side error messages have space */ body.mobileOptimized.login div#content.signup { padding-bottom: 80px !important; } /* ===== captcha row — horizontal inline layout (login/anmelden/logout) ===== */ /* row uses + (no ); first cell is the label, second has question + input + error. Render question and input side by side. */ body.mobileOptimized.login tr.captchaRow td:first-child, body.mobileOptimized.logout tr.captchaRow td:first-child { width: 110px !important; font-size: 16px !important; padding: 8px 6px !important; text-align: right !important; /* RTL */ vertical-align: middle !important; white-space: nowrap !important; font-weight: bold !important; color: inherit !important; } body.mobileOptimized.login tr.captchaRow td:last-child, body.mobileOptimized.logout tr.captchaRow td:last-child { padding: 6px 4px !important; vertical-align: middle !important; } body.mobileOptimized.login tr.captchaRow td:last-child, body.mobileOptimized.logout tr.captchaRow td:last-child { display: table-cell !important; } /* inline-flex wrapper around question + input via direct children layout */ body.mobileOptimized.login tr.captchaRow .captchaQuestion, body.mobileOptimized.logout tr.captchaRow .captchaQuestion { display: inline-block !important; vertical-align: middle !important; font-size: 16px !important; font-weight: bold !important; padding: 6px 10px !important; margin: 0 6px 0 0 !important; /* RTL: gap on left side of question */ background: #f3e9cf !important; border: 1px solid #b39253 !important; border-radius: 4px !important; color: #3a2d12 !important; min-width: 90px !important; text-align: center !important; white-space: nowrap !important; } body.mobileOptimized.login tr.captchaRow input.captchaInput, body.mobileOptimized.logout tr.captchaRow input.captchaInput { display: inline-block !important; vertical-align: middle !important; width: 70px !important; max-width: 70px !important; padding: 8px 10px !important; font-size: 16px !important; text-align: center !important; margin: 0 !important; box-sizing: border-box !important; border: 1px solid #b39253 !important; border-radius: 4px !important; height: auto !important; } body.mobileOptimized.login tr.captchaRow span.error, body.mobileOptimized.logout tr.captchaRow span.error { display: block !important; color: #931414 !important; font-size: 12px !important; margin: 4px 0 0 !important; text-align: center !important; } /* captcha warning row spans full width below */ body.mobileOptimized.login tr.captchaWarningRow td, body.mobileOptimized.logout tr.captchaWarningRow td { padding: 6px 8px !important; text-align: center !important; } body.mobileOptimized.login .captchaWarning, body.mobileOptimized.logout .captchaWarning { font-size: 12px !important; color: #931414 !important; margin: 4px auto !important; max-width: 320px !important; line-height: 1.4 !important; } /* ===== Dark Mode switch row inside #mobileMenu ===== */ .mobileOptimized #mobileMenu li.darkModeSwitchItem { list-style: none !important; padding: 0 !important; margin: 0 !important; } .mobileOptimized #mobileMenu .darkModeSwitchRow { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 10px 14px !important; cursor: pointer !important; user-select: none !important; box-sizing: border-box !important; color: inherit !important; gap: 12px !important; } .mobileOptimized #mobileMenu .darkModeSwitchLabel { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 16px !important; line-height: 1.2 !important; flex: 1 1 auto !important; } .mobileOptimized #mobileMenu .darkModeSwitchLabel .darkModeIcon { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; } /* green iOS-style switch */ .mobileOptimized #mobileMenu .darkModeSwitch { position: relative !important; display: inline-block !important; width: 44px !important; height: 24px !important; flex-shrink: 0 !important; } .mobileOptimized #mobileMenu .darkModeSwitch input { opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; pointer-events: none !important; } .mobileOptimized #mobileMenu .darkModeSwitchSlider { position: absolute !important; inset: 0 !important; background-color: #999 !important; border-radius: 24px !important; transition: background-color .25s !important; cursor: pointer !important; } .mobileOptimized #mobileMenu .darkModeSwitchSlider::before { content: "" !important; position: absolute !important; height: 20px !important; width: 20px !important; left: 2px !important; bottom: 2px !important; background-color: #fff !important; border-radius: 50% !important; transition: transform .25s !important; box-shadow: 0 1px 3px rgba(0,0,0,.4) !important; } .mobileOptimized #mobileMenu .darkModeSwitch input:checked + .darkModeSwitchSlider { background-color: #2ea043 !important; /* green ON */ } .mobileOptimized #mobileMenu .darkModeSwitch input:checked + .darkModeSwitchSlider::before { transform: translateX(20px) !important; } /* ===== Dark Mode — mobile background images (RTL) ===== */ html.darkMode body.mobileOptimized.buildingsV1.perspectiveResources div#background, html.darkMode body.mobileOptimized.perspectiveResources div#background { background-image: url('../img_rtl/layout/Night/bgResources_mobile.jpg') !important; background-color: #1c2625 !important; } html.darkMode body.mobileOptimized.perspectiveBuildings div#background, html.darkMode body.mobileOptimized.buildingsV1.perspectiveBuildings div#background, html.darkMode body.mobileOptimized.buildingsV3.perspectiveBuildings div#background { background-image: url('../img_rtl/layout/Night/bgBuildings_mobile.jpg') !important; background-color: #1c2625 !important; } } /* end @media 820 */ /* === mobile: keep payment modal at full width — scroll inside viewport === */ @media (max-width: 820px) { div#paymentWizard, div#paymentWizardContainer { width: 874px !important; max-width: 874px !important; min-width: 874px !important; transform: none !important; } .dialog.brown:has(#paymentWizardContainer), .dialog.brown:has(#paymentWizardContainer) .dialog-container, .dialog.brown:has(#paymentWizardContainer) .dialog-contents, .dialog.brown:has(#paymentWizardContainer) #dialogContent, .dialog.brown:has(#paymentWizardContainer) form { width: 908px !important; min-width: 908px !important; max-width: none !important; } } /* override fixes.css 12px on .mov / .dur_r inside movements on mobile */ @media (max-width: 820px) { .mobileOptimized div.village1 table#movements div.mov, .mobileOptimized div.village1 table#movements div.dur_r { font-size: 16px !important; } } /* unify troop list column widths across LTR/RTL */ @media (max-width: 820px) { .mobileOptimized .boxes.villageList.units td.un { width: 120px !important; max-width: 120px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .mobileOptimized .boxes.villageList.units td.num { min-width: 50px !important; white-space: nowrap !important; } } /* ============================================================================ INTERNAL SCROLL ON #contentOuterContainer — added 2026-05-20 Goal: replace browser scroll with internal scroll on text pages. - body/html/#background/#bodyWrapper/#center locked to viewport (no body scroll) - #contentOuterContainer is the actual scroll container - .contentTitle and .subNavi pinned via position:sticky - Excludes village1/village2 (they use their own absolute-positioned scroll) ============================================================================ */ html:has(body.mobileOptimized:not(.village1):not(.village2)), body.mobileOptimized:not(.village1):not(.village2) { height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; } body.mobileOptimized:not(.village1):not(.village2) div#background, body.mobileOptimized.buildingsV1.perspectiveResources:not(.village1):not(.village2) div#background, body.mobileOptimized.perspectiveBuildings:not(.village1):not(.village2) div#background { height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; } body.mobileOptimized:not(.village1):not(.village2) #bodyWrapper { height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; } body.mobileOptimized:not(.village1):not(.village2) #center { height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; } body.mobileOptimized:not(.village1):not(.village2) #center #contentOuterContainer { height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } body.mobileOptimized:not(.village1):not(.village2) #contentOuterContainer > .contentTitle { position: sticky !important; top: 0 !important; z-index: 20 !important; } body.mobileOptimized:not(.village1):not(.village2) #content .subNavi { position: sticky !important; top: 39px !important; z-index: 19 !important; } body.mobileOptimized:not(.village1):not(.village2) h1.titleInHeader { z-index: 30 !important; } /* ============================================================================ REPORT IMAGES — responsive on mobile — added 2026-05-20 Desktop CSS hardcodes report images at 554×190 (or 554×136 for outcome). On mobile the container is wider (~576px) leaving a visible gap on one side. Force width:100% with aspect-ratio so the image fills the container while preserving its natural proportions. ============================================================================ */ .mobileOptimized #reportWrapper .body .reportImage { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 554 / 190 !important; background-size: cover !important; background-position: center !important; } .mobileOptimized #reportWrapper .victory .reportImage.outcome { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 554 / 136 !important; } /* ============================================================================ REPORT HEADER .toolList — mobile layout fix — added 2026-05-20 Desktop positions .toolList absolutely at left:10 top:35. On mobile the header is short (~68px) so .toolList overlaps .time. Switch .header to grid layout: .headline on row 1, .time + .toolList on row 2. ============================================================================ */ .mobileOptimized #reportWrapper > .header { display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; align-items: center !important; position: relative !important; } .mobileOptimized #reportWrapper > .header .headline { grid-column: 1 / -1 !important; grid-row: 1 !important; } .mobileOptimized #reportWrapper > .header .time { grid-column: 1 !important; grid-row: 2 !important; } .mobileOptimized #reportWrapper > .header .toolList { position: static !important; grid-column: 2 !important; grid-row: 2 !important; left: auto !important; top: auto !important; right: auto !important; padding: 0 10px !important; } /* ============================================================================ MAP TILE DIALOG — mobile fix — added 2026-05-20 On mobile the .dialog popup has no explicit width and shrinks to ~167px because the visible options are tiny, while #tileDetails inside is fixed at 552px → overflows the dialog → triggers browser auto-zoom (page shake). Fix: only dialogs containing #tileDetails are forced to 95vw, then the landscape image becomes responsive (preserves 552:336 aspect). Other dialog types (build/payment/etc.) are untouched. ============================================================================ */ .mobileOptimized .dialog.white:has(#tileDetails), .mobileOptimized .dialog-container:has(#tileDetails) { width: 95vw !important; max-width: 95vw !important; min-width: 0 !important; left: 2.5vw !important; right: auto !important; transform: none !important; box-sizing: border-box !important; } .mobileOptimized .dialog.white:has(#tileDetails) .dialog-contents, .mobileOptimized .dialog.white:has(#tileDetails) #dialogContent { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .mobileOptimized .dialog #tileDetails { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .mobileOptimized .dialog #tileDetails.landscape .detailImage { width: 100% !important; max-width: 100% !important; padding-top: 60.87% !important; background-size: 100% auto !important; background-repeat: no-repeat !important; background-position: center top !important; box-sizing: border-box !important; } .mobileOptimized .dialog #tileDetails:not(.landscape) .detailImage { max-width: 100% !important; } /* ============================================================================ MAP TILE DIALOG POSITION — mobile fix v2 — added 2026-05-20 Earlier block (MAP TILE DIALOG) widened the dialog but kept content-driven positioning, causing visual offset on devices where physical viewport differs from layout viewport. v2: pin the dialog at the top quarter of the viewport with full visual-viewport width via left:0 + right:0. Also hides the .tip pointer/arrow (irrelevant when dialog is centered). ============================================================================ */ .mobileOptimized .dialog.white:has(#tileDetails) .tip, .mobileOptimized .dialog.white:has(#tileDetails) .dialog-tip { display: none !important; } .mobileOptimized .dialog.white:has(#tileDetails) { position: fixed !important; top: 25% !important; left: 0 !important; /* right: 0 !important; */ /* removed for RTL — caused right-shift on visual viewport */ bottom: auto !important; transform: translateY(-25%) !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; z-index: 9999 !important; max-height: 90vh !important; /* overflow-y: auto !important; */ /* removed for RTL */ } /* ============================================================================ GOLD CLUB / PAYMENT POPUP DIALOG — mobile fix — added 2026-05-20 The .dialog.brown.premiumFeaturePackage popup (Gold Club activation, etc.) contains .paymentPopupDialogWrapper that's wider than its parent container on mobile, overflowing the dialog boundaries. Fix: constrain inner wrapper, center the brown dialog with classic margin:0 auto + width:max-content. ============================================================================ */ .mobileOptimized .paymentPopupDialogWrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .mobileOptimized .dialog-container:has(.paymentPopupDialogWrapper), .mobileOptimized .dialog-contents:has(.paymentPopupDialogWrapper), .mobileOptimized #dialogContent:has(.paymentPopupDialogWrapper), .mobileOptimized form:has(.paymentPopupDialogWrapper) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .mobileOptimized .dialog.brown:has(.paymentPopupDialogWrapper):not(:has(#paymentWizard)) { position: fixed !important; top: 20% !important; left: 0 !important; right: 0 !important; bottom: auto !important; transform: translateY(-20%) !important; width: max-content !important; max-width: 95vw !important; min-width: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; z-index: 9999 !important; max-height: 90vh !important; } .mobileOptimized .dialog.brown:has(.paymentPopupDialogWrapper):not(:has(#paymentWizard)) .tip { display: none !important; } /* ===== marketplace NPC exchange dialog — widen modal to fit table on mobile ===== */ body.mobileOptimized .dialog.white, body.mobileOptimized .dialog.white .dialog-container, body.mobileOptimized .dialog.white .dialog-contents { width: auto !important; max-width: none !important; } body.mobileOptimized div#build.exchangeResources { width: 570px !important; max-width: none !important; box-sizing: border-box !important; } /* ============================================================================ SYSTEM MESSAGE / ERROR PAGE (messages.php, body.error_site) — added 2026-05-29 This page has its own minimal markup (#content.error_site > #sysmsg + a "Continue" link) and NO #stockBar / #navigation. The generic text-page rules (incl. the INTERNAL SCROLL block above) stretch #center / #contentOuterContainer to 100% height and turn it into a scroll container, leaving the message huge and pushing the "Continue" link off-screen at the bottom. Fix: opt this page OUT of the internal-scroll layout and just center the message + button in the viewport at a readable size. Scoped to .error_site so no other page is affected. Placed last to win the cascade. ============================================================================ */ @media (max-width: 820px) { /* undo full-height/overflow lock from the INTERNAL SCROLL block */ html:has(body.mobileOptimized.error_site), body.mobileOptimized.error_site, body.mobileOptimized.error_site div#background, body.mobileOptimized.error_site #bodyWrapper { height: auto !important; min-height: 100% !important; max-height: none !important; overflow: visible !important; } /* center the message block in the viewport */ body.mobileOptimized.error_site #center { height: auto !important; min-height: 100vh !important; max-height: none !important; overflow: visible !important; padding: 16px 12px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* contentOuterContainer: no longer a scroll container; size to content */ body.mobileOptimized.error_site #center #contentOuterContainer, body.mobileOptimized.error_site #contentOuterContainer.size1 { float: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; width: 100% !important; max-width: 560px !important; margin: 0 auto !important; } body.mobileOptimized.error_site #contentOuterContainer #content.error_site { padding: 16px !important; box-sizing: border-box !important; } /* the message text */ body.mobileOptimized.error_site #sysmsg { font-size: 16px !important; line-height: 1.5 !important; text-align: center !important; } /* the "Continue" link → tappable centered button */ body.mobileOptimized.error_site #sysmsg p.f16 { margin: 18px 0 0 !important; text-align: center !important; } body.mobileOptimized.error_site #sysmsg p.f16 a { display: inline-block !important; padding: 10px 24px !important; font-size: 16px !important; background: #f3e9cf !important; border: 1px solid #b39253 !important; border-radius: 5px !important; color: #3a2d12 !important; text-decoration: none !important; } }