/* ============================================================================= Mobile layer. Loaded after compact.css (and after the graphics pack's modules/new_layout_ltr.css, which lang.css @imports) on every game page, and scoped to <= 900px, so the desktop layout is bit-for-bit untouched. Layout it produces, top to bottom: fixed #res resource HUD (lives after the footer in the DOM) flow #header/#mtop hero ring, Plus button, gold / silver flow #side_navi secondary links as a horizontal chip strip flow #content, #side_info, #footer fixed #mtop a#n1..n4, div#n5 the five game icons as a bottom tab bar The tab bar is the trick: the nav icons share #mtop with the hero box and gold, so instead of moving them in the markup each icon is position: fixed individually, laid out on a 5-column grid with calc(). #mtop::after paints the bar behind them. Why an override file instead of editing compact.css: that sheet is 223 KB of generated graphics-pack CSS with 2286 hardcoded pixel values. Patching it in place would guarantee conflicts on every upstream merge. Selectors repeat the body.mod1/2/3 variants where the graphics pack does, otherwise its more specific rules would win the cascade. ============================================================================= */ @media (max-width: 900px) { :root { --tz-hud-h: 44px; --tz-tab-h: 60px; /* Tab sprites are 70x67; this is what fits them into the bar. */ --tz-tab-scale: 0.8; --tz-tab-scale-active: 0.7; --tz-safe-top: env(safe-area-inset-top, 0px); --tz-safe-bottom: env(safe-area-inset-bottom, 0px); --tz-paper: #f5f1e4; --tz-paper-glass: rgba(245, 241, 228, 0.94); --tz-line: rgba(90, 70, 40, 0.35); --tz-ink: #2b2417; } /* ----------------------------------------------------------------------------- 1. Unlock the fixed width. compact.css and new_layout_ltr.css put min-width / width: 980px on the header, mid column, time line, resource bar and footer, which is what forces the horizontal scroll. -------------------------------------------------------------------------- */ html, body, body.v35 { min-width: 0; max-width: 100%; /* The pack sets height: 100% on both; together with an overflow rule that would turn into its own scroll container, which breaks fixed bars and momentum scrolling on iOS. Only clips sideways. */ height: auto; -webkit-text-size-adjust: 100%; /* Removes the 300 ms tap delay while keeping pinch-zoom available. */ touch-action: manipulation; } /* The clip goes on the game body rather than on : with left visible, the body's value is what propagates to the viewport, so the standalone pages below keep their own horizontal scroll. */ body.v35 { overflow-x: hidden; } body, body.v35 { overflow: visible; background-color: var(--tz-paper); } /* Room for the two fixed bars. Scoped to .v35 because that class marks exactly the pages that render them: the standalone ones (karte2.php's large map, anleitung.php's manual) carry no #res and no tab bar, and would just gain 104px of dead space. */ body.v35 { padding-top: calc(var(--tz-hud-h) + var(--tz-safe-top)); padding-bottom: calc(var(--tz-tab-h) + var(--tz-safe-bottom)); } body.v35 div.wrapper, div#header, div#mid, div#footer, div#ltime, body.mod1 div#ltime, body.mod2 div#ltime, body.mod3 div#ltime { min-width: 0; width: auto; } div#mid { float: none; margin: 0; background-image: none; } /* The pack paints a sky/grass strip behind the top of the page; it only shows through as a green band once the columns are stacked. */ body.v35 div.wrapper { background-image: none; } a, button, input, select { -webkit-tap-highlight-color: transparent; } /* ----------------------------------------------------------------------------- 2a. Reading order: the game first, the chrome after. Wanted order is #content, #side_info, then the header card (Plus, day / night, gold) and the menu chips. But #header is a sibling of #mid while #side_navi and #content live inside #mid, so no amount of `order` on .wrapper's own children can interleave them. `display: contents` drops #mid's box, which promotes its three columns to flex items of .wrapper alongside #header and #footer. Then one `order` scale covers all five. Where it is unsupported the page simply keeps the old top-down order; nothing breaks. NOTE: selectors still see the real DOM, so #content and friends are only reachable through `div#mid > *`, never `div.wrapper > *`. Scoped to body.v35, which marks the game pages. anleitung.php and manual.php are a separate legacy sub-site (img/tutorial/main.css) laid out entirely around an 845px slab with a background image behind each panel: unlocking the width there does not reflow the text, it collapses it into a ~46px column. Those pages keep their desktop layout and are read by zooming; making them fluid is a job of its own. -------------------------------------------------------------------------- */ body.v35 div.wrapper { display: flex; flex-direction: column; } div#mid { display: contents; } /* An item with no `order` sits at 0, which would jump it above #content. Everything gets a floor first, then the five blocks are placed. */ div.wrapper > *, div#mid > * { order: 5; } /* Several pages pad the desktop float layout with bare
spacers between #content and #side_info. Promoted to flex items they blockify into ~64px of empty page; the stacked layout has no use for them. */ div#mid > br { display: none; } div#content { order: 1; } div#side_info { order: 2; } div#header { order: 3; } div#side_navi { order: 4; } div#footer { order: 6; } div#stime { order: 7; } /* ----------------------------------------------------------------------------- 2b. Stack the three columns: nav, content, side info. -------------------------------------------------------------------------- */ div#side_navi, div#content, div#side_info, body.mod1 div#content, body.mod2 div#content, body.mod3 div#content, body.mod1 div#side_info, body.mod2 div#side_info, body.mod3 div#side_info { float: none; width: auto; max-width: 100%; /* The pack forces a 450px column height for the desktop grid; on a phone it only leaves a blank gap under short pages. */ min-height: 0; height: auto; margin-left: 0; } div#content { /* flow-root contains the floated village map and side table, which otherwise collapse the column to the height of its heading. auto on the x axis lets a wide table scroll inside the column instead of being clipped by the page. */ display: flow-root; overflow-x: auto; padding: 4px 12px 12px; box-sizing: border-box; background: #fff; } /* Village overview (dorf1): centre the 300px image map and drop the production table under it instead of floating both side by side. */ div#content.village1 div#village_map { float: none; margin: 0 auto; } div#content div#map_details { float: none; width: auto; margin: 12px 0 0; } div#content h1 { font-size: 20px; line-height: 1.25; margin: 10px 0 8px; } div#side_info { display: flow-root; padding: 8px 12px 16px; box-sizing: border-box; background-image: none; } /* ----------------------------------------------------------------------------- 3. Header card: hero ring on the left, Plus in the middle, gold on the right. The five nav icons that also live in #mtop are pulled out into the bottom tab bar in section 5. -------------------------------------------------------------------------- */ div#header { height: auto; font-size: 0; } div#mtop, body.mod1 div#mtop, body.mod2 div#mtop, body.mod3 div#mtop { position: relative; left: 0; top: 0; margin: 0; width: 100%; height: 52px; box-sizing: border-box; /* It now sits under the content, so the rule that separates it moves up. */ border-top: 1px solid var(--tz-line); border-bottom: 0; } div#mtop a#plus { position: absolute; left: 12px; top: 50%; margin: -20px 0 0; float: none; } /* Day / night indicator: a 30x60 table-cell box floated after Plus. */ div#mtop div#wrapper { position: absolute; left: 132px; top: 0; } /* The pack centres this 18px icon inside a 60px box with a stack of position:relative / top:-50% offsets plus two empty paragraphs carrying 20px margins. Every number in that chain assumes the tall desktop bar, so the icon lands 9px above a 52px one. Flattening the offsets and centring with flex is steadier than re-deriving them. */ div#mtop div#wrapper, div#mtop div#wrapper div#container { display: flex; align-items: center; justify-content: center; width: 30px; height: 52px; } div#mtop div#wrapper div#container div, div#mtop div#wrapper div#container p { position: static; top: auto; margin: 0; height: auto; } div#mtop div#goldHeader { right: 12px; } /* ----------------------------------------------------------------------------- 4. Secondary links (Homepage, Profile, Forum, Plus, Support...) become a horizontal chip strip that scrolls on its own, instead of a 155px column that the pack also forces to 453px tall. -------------------------------------------------------------------------- */ div#side_navi { display: flex; flex-wrap: nowrap; align-items: center; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; padding: 8px 12px; background-image: none; border-top: 1px solid var(--tz-line); -webkit-user-select: none; user-select: none; } div#side_navi::-webkit-scrollbar { display: none; } /* Fade the right edge as a hint that the strip scrolls. */ div#side_navi { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); } div#side_navi #logo { display: none; } div#side_navi p { display: flex; gap: 6px; margin: 0; line-height: normal; white-space: nowrap; } div#side_navi p a, div#side_navi a:hover { display: inline-flex; align-items: center; /* Chips are 36px tall: comfortable for a thumb, still one line. */ height: 36px; width: auto; padding: 0 14px; border-radius: 18px; background: rgba(0, 0, 0, 0.06); background-image: none; color: var(--tz-ink); font-size: 13px; text-decoration: none; } div#side_navi p a:active { background: rgba(0, 0, 0, 0.14); } div#side_navi p.deltimer { margin-left: 0; width: auto; } /* ----------------------------------------------------------------------------- 5. Bottom tab bar from the five game icons (village, centre, map, statistics, reports+messages) plus the hero ring. Each one is fixed on its own at (2n-1)/12 of the width; the sprites are 70px wide, so "- 35px" centres them in each sixth. The bar itself is painted by #mtop::after. The boxes are 70px in a 65px column, so they overlap by 5px; the artwork is scaled to ~56px, so only transparent margin overlaps. -------------------------------------------------------------------------- */ div#mtop::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tz-tab-h) + var(--tz-safe-bottom)); background: var(--tz-paper-glass); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--tz-line); box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.12); z-index: 1; } div#mtop a#n1, div#mtop a#n2, div#mtop a#n3, div#mtop a#n4, div#mtop div#n5, div#mtop div#tzHeroBox { position: fixed; bottom: calc(var(--tz-safe-bottom) + 2px); top: auto; width: 70px; height: 67px; margin: 0; float: none; z-index: 2; transform: scale(var(--tz-tab-scale)); transform-origin: 50% 100%; transition: transform 120ms ease-out; -webkit-user-select: none; user-select: none; } div#mtop a#n1 { left: calc(8.333% - 35px); } div#mtop a#n2 { left: calc(25% - 35px); } div#mtop a#n3 { left: calc(41.667% - 35px); } div#mtop a#n4 { left: calc(58.333% - 35px); } div#mtop div#n5 { left: calc(75% - 35px); } div#mtop div#tzHeroBox { left: calc(91.667% - 35px); } div#mtop a#n1:active, div#mtop a#n2:active, div#mtop a#n3:active, div#mtop a#n4:active, div#mtop div#n5 a:active, div#mtop div#tzHeroBox:active { transform: scale(var(--tz-tab-scale-active)); } /* ----------------------------------------------------------------------------- 5b. Hero as the sixth tab. The desktop component is a 124x72 cluster: a 64px health/experience ring in the middle with four 24px satellites around it. Three of those satellites (home, produced resource) point at the hero page, exactly where the ring already goes, so only the ring is kept and the adventure counter is re-hung as a corner badge. The auction slot is dropped: 24px targets do not survive in a tab bar, and the auction is one tap away on the hero page. -------------------------------------------------------------------------- */ div#mtop div#tzHeroBox .tzHeroCenter { /* centres the 64px ring in the 70x67 tab box */ left: 3px; top: 1px; } div#mtop div#tzHeroBox .tzHeroHome, div#mtop div#tzHeroBox .tzHeroRes, div#mtop div#tzHeroBox .tzHeroSilver { display: none; } div#mtop div#tzHeroBox .tzHeroAdv { left: auto; right: 0; top: 0; } /* Hover tooltips would latch open after a tap and cover the bar. */ div#mtop div#tzHeroBox .tzHeroTip { display: none; } /* No Hero's Mansion anywhere on the account means no target to open, so the component renders as a . A dead-looking tab reads as broken; dim it so it reads as not available yet. */ div#mtop div#tzHeroBox .tzHeroCenter.tzHeroNoLink { opacity: 0.45; } /* Reports / messages share one sprite: keep their halves side by side. */ div#mtop div#n5 a { float: left; display: block; height: 67px; } /* ----------------------------------------------------------------------------- 6. Resource HUD pinned to the top. #res sits near the END of the document (after the footer) and is pulled into place with position: absolute on desktop, so static positioning would drop it at the bottom of the page. -------------------------------------------------------------------------- */ div#res, body.mod1 div#res, body.mod2 div#res, body.mod3 div#res { position: fixed; top: 0; left: 0; right: 0; bottom: auto; min-width: 0; width: auto; height: var(--tz-hud-h); padding-top: var(--tz-safe-top); box-sizing: content-box; display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; background: var(--tz-paper-glass); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--tz-line); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12); z-index: 900; } div#res::-webkit-scrollbar { display: none; } /* The pack centres a 552px wrapper with left: 50% / margin-left: -335px. */ div#res div#resWrap { position: static; left: auto; margin: 0; width: 100%; } /* Laid out as a flex row so each icon+value pair stays together while the pairs spread evenly across the width, however many digits they have. */ div#res table, div#res table tbody, div#res table tr { display: flex; align-items: center; width: 100%; margin: 0; border-spacing: 0; } div#res table td { display: flex; align-items: center; flex: 0 0 auto; padding: 0 3px 0 0; white-space: nowrap; text-align: left; /* Scales with the screen so "12345/80000" x4 still fits a 360px phone. */ font-size: clamp(9px, 2.9vw, 12px); font-weight: bold; color: var(--tz-ink); font-variant-numeric: tabular-nums; } /* Odd cells hold the icons: the auto margin pushes each pair apart. */ div#res table td:nth-child(odd) { margin-left: auto; padding-right: 3px; } div#res table td:first-child { margin-left: 10px; } div#res table td:last-child { margin-right: 10px; } div#res table img { margin: 0; vertical-align: middle; } /* ----------------------------------------------------------------------------- 7. Village centre (dorf2). Its map is a 540x448 box of absolutely positioned building slots, so a transform scales the clickable areas along with the art (unlike dorf1, whose 300x264 image map already fits a phone untouched and must NOT be scaled: coords are fixed pixels). The negative margin reclaims the vertical space the scale leaves behind. -------------------------------------------------------------------------- */ div.village2 div#village_map { transform: scale(0.82); transform-origin: 0 0; margin-bottom: -80px; } /* World map (karte): a 552x375 board of absolutely positioned tiles, same treatment. Its side table (#map_details) drops below it. */ div#content.map div#map { transform: scale(0.82); transform-origin: 0 0; margin-bottom: -68px; } /* ----------------------------------------------------------------------------- 8. Wide content that cannot be reflowed scrolls inside its own box rather than pushing the whole page sideways. -------------------------------------------------------------------------- */ div#map_details, div#content table.villages, div#content table.f10 { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* x.gif is the 1x1 spacer every sprite hangs off; height: auto would blow it up to a square as wide as the column. */ div#content img:not([src$="x.gif"]) { max-width: 100%; height: auto; } /* The scaled boards keep their 540px layout box; nothing visible is lost. */ div#content.village2, div#content.map { overflow-x: hidden; } /* ----------------------------------------------------------------------------- 9. Fixed-width content blocks. The pack sizes every page body to 502-552px and nests more fixed widths inside (build panel, message editor, profile, reports, Plus shop). The #content prefix lifts specificity above the pack's own rules. -------------------------------------------------------------------------- */ div#content div#build, div#content div#sysmsg, div#content div#products, div#content div.msg_head, div#content div.msg_content, div#content div.msg_content div.line, div#content div.msg_foot, div#content div.chatHeader, div#content div#gpack_popup, div#content div#gpack_popup div.btn, div#content div#block { width: auto; max-width: 100%; box-sizing: border-box; } div#content table { max-width: 100%; } div#content table#building_contract, div#content table#overview, div#content table#profile, div#content table#poll, div#content div.forum table { width: 100%; } /* Profile and report tables have a min-content width around 500px (two ~235px images side by side; nowrap dates). Fixed layout lets the cells share the column and the images shrink with them. */ div#content table#profile, div#content table#overview { table-layout: fixed; min-width: 0; } div#content table#building_contract { margin-left: 0; margin-right: 0; } /* Profile description / avatar boxes are 236px wide inside a 50% cell. */ div#content div.desc1div, div#content div.desc2div { width: auto; max-width: 100%; } div#content table#profile td, div#content table#overview td { overflow-wrap: anywhere; } div#content table#profile img { max-width: 100%; height: auto; } div#content.reports table#overview td.dat { white-space: normal; } div#content textarea, div#content input.text { max-width: 100%; box-sizing: border-box; } /* Village centre level switch is pinned at x=500 of a 540px board. */ div#content.village2 img#lswitch { left: auto; right: 12px; } /* ----------------------------------------------------------------------------- 10. iOS zooms the page in when a focused field is under 16px. Bumping the font size is the only way to stop it without disabling pinch-zoom. -------------------------------------------------------------------------- */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea, input.text, select.dropdown { font-size: 16px; } /* ----------------------------------------------------------------------------- 10b. Fixed widths that only show up on one page each. -------------------------------------------------------------------------- */ /* Building detail table. Both cells are nowrap and the Spanish label "Tiempo de construcción actual:" is 280px on its own, so the pair cannot fit; letting the label wrap is enough. */ div#content table#build_value th, div#content table#build_value td { white-space: normal; } /* Body of a read message, and the bullet lists inside it. */ div#content div.message, div#content div.message ul { width: auto; max-width: 100%; box-sizing: border-box; } /* Profile editor and the link manager: both are 500px grids of label + control, and the controls carry their own pixel widths. */ div#content table#edit, div#content table#links { width: 100%; table-layout: fixed; } div#content table#edit textarea, div#content table#edit input.text, div#content table#links input.text { width: 100%; max-width: 100%; box-sizing: border-box; } /* Tab rows above a building panel ("Overview | Send troops | Gold Club") are one nowrap line sized for a 502px column. */ div#mid div#content div#textmenu { white-space: normal; } /* Support form: its tables carry width="100%" but the textarea inside is sized by a cols attribute, which drags the whole table past the screen. */ div#content table.form_table { width: 100%; max-width: 100%; table-layout: fixed; } div#content textarea, div#content input.text, div#content select.dropdown { max-width: 100%; box-sizing: border-box; } div#content textarea { width: 100%; } /* Four empty
pad the side column before the (usually absent) custom links block, which is 64px of nothing once the columns are stacked. */ div#side_info > br { display: none; } /* ----------------------------------------------------------------------------- 10c. karte2.php, the standalone large map. A ~1000px board whose clickable coordinates are fixed pixels, so it must not be scaled (same reason dorf1's village map is left alone). Panning it inside its own box keeps the page itself from scrolling sideways. -------------------------------------------------------------------------- */ div#map_content { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ----------------------------------------------------------------------------- 11. Footer and server clock back into the flow. The pack pins #footer to the bottom of .wrapper and #ltime 111px from the top of the page, both at 980px wide. -------------------------------------------------------------------------- */ div#dynamic_header, div.footer-stopper, div#footer div#mfoot div.footer-menu { display: none; } div#footer { position: static; height: auto; margin-top: 0; background-image: none; } div#footer div#mfoot { width: auto; height: auto; padding: 10px; } div#stime { display: block; width: auto; height: auto; } div#ltime, body.mod1 div#ltime, body.mod2 div#ltime, body.mod3 div#ltime { position: static; height: auto; top: auto; left: auto; padding: 10px 12px 16px; text-align: center; } div#ltime div#ltimeWrap { width: auto; } div#ltime div.devEvents { position: static; } /* ----------------------------------------------------------------------------- 12. Global chat: lift the bubble and panel above the tab bar. The widget styles itself in an inline