Harden mobile layout and PWA audio

Author: web3blind

app/assets/icons/icon-192.png

@@ -1433,3 +1433,162 @@ body {
     vertical-align: middle;
     line-height: 1.4;
 }
+
+
+/* ===== Mobile viewport containment and bottom tray hardening ===== */
+html,
+body,
+.app-shell,
+#app-main {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: hidden;
+}
+
+.screen {
+    min-height: 100dvh;
+    max-width: 100vw;
+    overflow-x: hidden;
+    padding-left: max(12px, env(safe-area-inset-left));
+    padding-right: max(12px, env(safe-area-inset-right));
+    padding-bottom: calc(180px + env(safe-area-inset-bottom));
+}
+
+#bottom-nav.show {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    align-items: stretch;
+    width: 100vw;
+    max-width: 100vw;
+    overflow: hidden;
+}
+
+.nav-tab {
+    min-width: 0;
+    max-width: 100%;
+    padding: 6px 2px;
+    gap: 1px;
+    line-height: 1.05;
+}
+
+.nav-icon {
+    font-size: 1.05rem;
+    margin-bottom: 1px;
+}
+
+.nav-label {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.62rem;
+}
+
+.chronicle-tabs,
+.market-tabs,
+.craft-tabs,
+.arena-tabs,
+.settings-toggle-group,
+.region-travel-options,
+.quest-actions,
+.duel-actions,
+.guild-actions,
+.sell-item-controls,
+.chronicle-compose-footer,
+.modal-actions {
+    max-width: 100%;
+}
+
+@media (max-width: 480px) {
+    .chronicle-tabs,
+    .market-tabs,
+    .craft-tabs,
+    .arena-tabs {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 8px;
+    }
+
+    .chronicle-tabs .btn,
+    .market-tabs .btn,
+    .craft-tabs .btn,
+    .arena-tabs .btn,
+    .quest-actions .btn,
+    .duel-actions .btn,
+    .guild-actions .btn {
+        width: 100%;
+        min-width: 0;
+        min-height: var(--touch-target);
+        white-space: normal;
+        overflow-wrap: anywhere;
+    }
+
+    .settings-toggle-group,
+    .region-travel-options,
+    .quest-actions,
+    .duel-actions,
+    .guild-actions,
+    .sell-item-controls,
+    .chronicle-compose-footer,
+    .modal-actions,
+    .listing-footer,
+    .region-header,
+    .char-header,
+    .arena-player-card,
+    .market-my-listing,
+    .consumable-item {
+        flex-wrap: wrap;
+    }
+
+    .btn-sm {
+        min-height: 44px;
+    }
+
+    .screen h1 {
+        overflow-wrap: anywhere;
+    }
+}
+
+@media (max-width: 360px) {
+    #bottom-nav.show {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .screen {
+        padding-bottom: calc(260px + env(safe-area-inset-bottom));
+    }
+
+    .nav-label {
+        font-size: 0.58rem;
+    }
+}
+
+
+/* Keep recipe rows inside narrow mobile screens. */
+.recipe-card {
+    max-width: 100%;
+    flex-wrap: wrap;
+}
+
+.recipe-info {
+    min-width: 0;
+}
+
+.recipe-status {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.recipe-locked-text,
+.recipe-ready {
+    overflow-wrap: anywhere;
+}
+
+@media (max-width: 480px) {
+    .recipe-status {
+        flex: 1 1 100%;
+        text-align: left;
+        padding-left: 44px;
+    }
+}

app/assets/icons/icon-512.png

@@ -8,10 +8,10 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>Viz Magic</title>
-    <link rel="manifest" href="manifest.json">
-    <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/icon-192.png">
-    <link rel="apple-touch-icon" href="assets/icons/icon-192.png">
-    <link rel="stylesheet" href="css/main.css?v=20260711c">
+    <link rel="manifest" href="manifest.json?v=20260712b">
+    <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/icon-192.png?v=20260712b">
+    <link rel="apple-touch-icon" href="assets/icons/icon-192.png?v=20260712b">
+    <link rel="stylesheet" href="css/main.css?v=20260712b">
     <link rel="stylesheet" href="css/themes.css">
     <link rel="stylesheet" href="css/accessibility.css">
 </head>
@@ -174,13 +174,13 @@
     <script src="js/ui/components/toast.js?v=20260711b"></script>
     <script src="js/ui/components/modal.js"></script>
     <script src="js/ui/components/nav.js"></script>
-    <script src="js/ui/components/battle-narrator.js?v=20260711d"></script>
+    <script src="js/ui/components/battle-narrator.js?v=20260712b"></script>
 
     <!-- UI Screens -->
     <script src="js/ui/screens/landing.js"></script>
     <script src="js/ui/screens/login.js?v=20260711a"></script>
     <script src="js/ui/screens/onboarding.js"></script>
-    <script src="js/ui/screens/home.js?v=20260712a"></script>
+    <script src="js/ui/screens/home.js?v=20260712b"></script>
     <script src="js/ui/screens/character.js?v=20260621l"></script>
     <script src="js/ui/screens/hunt.js"></script>
     <script src="js/ui/screens/inventory.js?v=20260621l"></script>
@@ -193,7 +193,7 @@
     <script src="js/ui/screens/crafting.js?v=20260621j"></script>
     <script src="js/ui/screens/quests.js?v=20260621n"></script>
     <script src="js/ui/screens/world-boss.js"></script>
-    <script src="js/ui/screens/settings.js?v=20260711d"></script>
+    <script src="js/ui/screens/settings.js?v=20260712b"></script>
     <script src="js/ui/screens/help.js?v=20260711d"></script>
     <script src="js/ui/screens/leaderboard.js"></script>
 

app/css/main.css

@@ -23,14 +23,15 @@ var BattleNarrator = (function() {
             enabled = true;
         }
 
-        // Create narrator live region
+        // Create narrator live region. Keep it as one persistent status region:
+        // mobile screen readers announce text replacement more reliably than
+        // appended children inside role=log.
         if (!narratorEl) {
             narratorEl = document.createElement('div');
             narratorEl.id = 'battle-narrator';
-            narratorEl.setAttribute('role', 'log');
+            narratorEl.setAttribute('role', 'status');
             narratorEl.setAttribute('aria-live', 'polite');
-            narratorEl.setAttribute('aria-atomic', 'false');
-            narratorEl.setAttribute('aria-relevant', 'additions');
+            narratorEl.setAttribute('aria-atomic', 'true');
             narratorEl.className = 'sr-only';
             narratorEl.setAttribute('aria-label', Helpers.t('narrator_label'));
             document.body.appendChild(narratorEl);
@@ -66,17 +67,32 @@ var BattleNarrator = (function() {
         if (!enabled || !message) return;
         if (!narratorEl) init();
 
-        narratorEl.setAttribute('aria-live', priority || 'polite');
+        var mode = priority || 'polite';
+        narratorEl.setAttribute('aria-live', mode);
+        narratorEl.setAttribute('role', mode === 'assertive' ? 'alert' : 'status');
 
-        // Append new message as paragraph
-        var p = document.createElement('p');
-        p.textContent = message;
-        narratorEl.appendChild(p);
+        // Force a DOM text change so TalkBack/VoiceOver do not ignore repeated
+        // announcements after navigation or re-render.
+        narratorEl.textContent = '';
+        setTimeout(function() {
+            if (narratorEl) narratorEl.textContent = message;
+        }, 25);
 
-        // Keep only last 10 messages
-        while (narratorEl.children.length > 10) {
-            narratorEl.removeChild(narratorEl.firstChild);
-        }
+        _speak(message);
+    }
+
+    function _speak(message) {
+        if (!message || typeof window === 'undefined' || !window.speechSynthesis || !window.SpeechSynthesisUtterance) return;
+        try {
+            var utterance = new SpeechSynthesisUtterance(message);
+            var lang = (Helpers.getCurrentLang && Helpers.getCurrentLang() === 'en') ? 'en-US' : 'ru-RU';
+            utterance.lang = lang;
+            utterance.rate = 1;
+            utterance.pitch = 1;
+            utterance.volume = 1;
+            window.speechSynthesis.cancel();
+            window.speechSynthesis.speak(utterance);
+        } catch (e) {}
     }
 
     /**

app/index.html

@@ -107,7 +107,7 @@ var HomeScreen = (function() {
             VizAccount.getAccount(user, function(err, accountData) {
                 if (!err && accountData) {
                     var currentEnergy = VizAccount.calculateCurrentEnergy(accountData);
-                    ProgressBar.update('mana-bar', currentEnergy / 100, 100, Math.floor(currentEnergy / 100), 100);
+                    ProgressBar.update('mana-bar', currentEnergy / 100, 100);
                 }
             });
         }

app/js/ui/components/battle-narrator.js

@@ -33,6 +33,12 @@ var SettingsScreen = (function() {
         } catch (e) {}
     }
 
+    function _setStoredNumber(key, value) {
+        try {
+            localStorage.setItem(STORAGE_PREFIX + key, String(value));
+        } catch (e) {}
+    }
+
     function render() {
         var t = Helpers.t;
         var el = Helpers.$('screen-settings');
@@ -43,6 +49,7 @@ var SettingsScreen = (function() {
         var highContrast = _getStoredBool('high_contrast', false);
         var reducedMotion = _getStoredBool('reduced_motion', false);
         var sfxVolume = Math.round(_getStoredNumber('sfx_volume', 0.5) * 100);
+        var musicVolume = Math.round(_getStoredNumber('music_volume', 0.5) * 100);
         var narratorEnabled = (typeof BattleNarrator !== 'undefined' && BattleNarrator.isEnabled) ? BattleNarrator.isEnabled() : _getStoredBool('battle_narrator', false);
         if (typeof SoundManager !== 'undefined') SoundManager.setVolume(sfxVolume / 100);
 
@@ -63,7 +70,7 @@ var SettingsScreen = (function() {
                 '<section class="settings-section" aria-label="' + t('settings_sound') + '">' +
                     '<h2>' + t('settings_sound') + '</h2>' +
                     _renderSlider('sfx-volume', t('settings_sfx'), sfxVolume) +
-                    _renderSlider('music-volume', t('settings_music'), 50) +
+                    _renderSlider('music-volume', t('settings_music'), musicVolume) +
                     _renderToggle('narrator-toggle', t('narrator_toggle'), narratorEnabled) +
                     '<button type="button" class="btn btn-secondary btn-sm" id="btn-test-narrator">' + t('narrator_test') + '</button>' +
                     '<div class="settings-field">' +
@@ -165,6 +172,11 @@ var SettingsScreen = (function() {
             SoundManager.setVolume(this.value / 100);
         });
 
+        var musicSlider = el.querySelector('#music-volume');
+        if (musicSlider) musicSlider.addEventListener('input', function() {
+            _setStoredNumber('music_volume', this.value / 100);
+        });
+
         // Toggle buttons
         var toggleBtns = el.querySelectorAll('.settings-toggle-btn');
         for (var i = 0; i < toggleBtns.length; i++) {

app/js/ui/screens/home.js

@@ -1,7 +1,7 @@
 {
     "name": "Viz Magic",
     "short_name": "VizMagic",
-    "description": "Browser RPG built on the VIZ blockchain",
+    "description": "Viz Magic — accessible browser RPG on the VIZ blockchain",
     "start_url": "/",
     "display": "standalone",
     "theme_color": "#0d1117",
@@ -21,5 +21,10 @@
             "purpose": "any maskable"
         }
     ],
-    "categories": ["games", "entertainment"]
-}
+    "categories": [
+        "games",
+        "entertainment"
+    ],
+    "id": "/",
+    "orientation": "portrait-primary"
+}

app/js/ui/screens/settings.js

@@ -1,8 +1,11 @@
 // Viz Magic — Service Worker
-var CACHE_NAME = 'viz-magic-v33';
+var CACHE_NAME = 'viz-magic-v34';
 var ASSETS = [
     '/',
     '/index.html',
+    '/manifest.json',
+    '/assets/icons/icon-192.png',
+    '/assets/icons/icon-512.png',
     '/css/main.css',
     '/css/themes.css',
     '/css/accessibility.css',