A portrait game has to fit the phone the player actually holds, not the clean rectangle shown in a mockup.
Mobile Safari may place an address bar above the game and a toolbar below it. Chrome has its own behavior. Safe areas surround notches and home indicators. The usable height can change while the page remains open.
Our early playable build exposed these problems quickly. Important Armory actions fell below the visible area. The battlefield did not always use the available width. Long presses selected interface text. Tapping upgrades could trigger browser zoom. A layout that looked comfortable on desktop became cramped on an older iPhone.
The current interface treats the combat view, live signal message, skill buttons, Warden upgrades, and primary navigation as one vertical system. The bottom navigation remains available so players can move between the Warden and Armory without hunting for a close button. Overlay screens use visible borders and consistent headers so they feel like cabinet panels.
We reduced the height of the currency header and placed currency values beneath compact labels. Score remains separate and prominent. Combat health bars moved into the battlefield so they no longer consume another interface row.
Desktop uses extra width for a side console and broader scenery. The game does not simply stretch the mobile column until everything becomes enormous. Text, controls, and art each need their own scaling rules.
Performance is part of mobile layout work. A device that becomes hot or loses the browser tab has failed even if the screenshot looks perfect. The game includes Full, Reduced Motion, and Performance directions so parallax and effects can respond to preference and hardware limits.
The one-screen goal remains strict: normal play should not require vertical scrolling. When we add a new control, it must justify every pixel it occupies.