MUME · nschimme · Sep 14, 2026 · Sep 14, 2026
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -15,7 +15,7 @@
 
     <link rel="icon" href="{{ '/assets/img/favicon.svg' | relative_url }}" type="image/svg+xml">
 
-    <script src="{{ '/assets/js/download-highlight.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/site.js' | relative_url }}"></script>
 </head>
 <body>
     <a href="#main-content" class="skip-link">Skip to content</a>

diff --git a/docs/assets/js/download-highlight.js → docs/assets/js/site.js b/docs/assets/js/download-highlight.js → docs/assets/js/site.js
@@ -64,4 +64,30 @@ document.addEventListener('DOMContentLoaded', function() {
             addRecommendation(link);
         }
     });
+
+    // --- Touch / Mobile Device Detection for Keyboard Notice ---
+    const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
+    const keyboardNotice = document.getElementById('keyboard-notice');
+    if (keyboardNotice && isTouchDevice) {
+        keyboardNotice.style.border = '2px solid #cc9933';
+    }
+
+    // --- PWA Instructions Platform Detection & Focus ---
+    const ua = navigator.userAgent || '';
+    const isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+    const isAndroid = /Android/.test(ua);
+
+    const iosBlock = document.getElementById('pwa-ios');
+    const androidBlock = document.getElementById('pwa-android');
+
+    if (isIOS && iosBlock && androidBlock) {
+        // Move iOS block above Android block and highlight
+        iosBlock.parentNode.insertBefore(iosBlock, androidBlock);
+        iosBlock.style.borderLeft = '3px solid #5cb85c';
+        iosBlock.style.paddingLeft = '0.5em';
+    } else if (isAndroid && androidBlock && iosBlock) {
+        // Highlight Android block
+        androidBlock.style.borderLeft = '3px solid #5cb85c';
+        androidBlock.style.paddingLeft = '0.5em';
+    }
 });
diff --git a/docs/index.md b/docs/index.md
@@ -14,7 +14,7 @@ title: Play MUME with MMapper
 Choose your preferred platform to start using MMapper {{ site.github.latest_release.tag_name }}:
 
 <div class="platform-links">
-    <a href="{{ '/demo/' | relative_url }}" class="platform-link" aria-label="Use MMapper in your Web Browser" data-platform="web">
+    <a href="{{ '/web.html' | relative_url }}" class="platform-link" aria-label="Get MMapper for Web">
         <i class="fas fa-globe" aria-hidden="true"></i>
         <span>Web</span>
     </a>

diff --git a/docs/web.md b/docs/web.md
@@ -0,0 +1,56 @@
+---
+layout: default
+title: Get MMapper Web
+---
+
+MMapper Web allows you to run MMapper directly in your web browser with no installation required. You can also install it as a Progressive Web App (PWA) on mobile devices or desktop for a standalone app experience.
+
+<a href="{{ '/demo/' | relative_url }}" class="download-link" data-platform="web">
+    Launch MMapper Web
+</a>
+
+<div class="notice-box" id="pwa-notice">
+  <strong style="color: #fdc571;">Installing MMapper as a Web App (PWA):</strong><br>
+  You can install MMapper on your mobile device or tablet for quick home screen access and a full-screen experience.
+
+  <div id="pwa-ios" class="pwa-platform-instructions">
+    <h4 style="margin-top: 0.8em; margin-bottom: 0.3em; color: #fdddb3;">iOS (iPhone & iPad - Safari)</h4>
+    <ol>
+      <li>Open MMapper Web in <strong>Safari</strong>.</li>
+      <li>Tap the <strong>Share</strong> button (the square icon with an upward arrow) in the browser toolbar.</li>
+      <li>Scroll down the menu and tap <strong>Add to Home Screen</strong>.</li>
+      <li>Tap <strong>Add</strong> in the top-right corner to confirm.</li>
+    </ol>
+  </div>
+
+  <div id="pwa-android" class="pwa-platform-instructions">
+    <h4 style="margin-top: 0.8em; margin-bottom: 0.3em; color: #fdddb3;">Android (Chrome)</h4>
+    <ol>
+      <li>Open MMapper Web in <strong>Chrome</strong>.</li>
+      <li>Tap the <strong>Menu</strong> icon (three dots) in the top-right corner.</li>
+      <li>Tap <strong>Install app</strong> or <strong>Add to Home screen</strong>.</li>
+      <li>Follow the on-screen prompts to complete the installation.</li>
+    </ol>
+  </div>
+</div>
+
+<div class="notice-box" id="keyboard-notice">
+  <strong style="color: #fdc571;">Physical Keyboard Recommended for Touch & Mobile Devices:</strong><br>
+  MMapper is a full graphical MUD client and map display, so an on-screen virtual keyboard takes up vital screen space needed for playing.<br>
+  If you are playing on an <strong>iPad, iPhone, Android tablet, or smartphone</strong>, we strongly recommend connecting an external <strong>Bluetooth keyboard</strong> or keyboard cover to keep the entire screen visible.
+</div>
+
+<details class="beta-downloads-details">
+  <summary>Looking for Beta or Development Builds?</summary>
+  <div class="beta-notice">
+    <p>These are pre-release builds and may be unstable. They are intended for testing and advanced users. Use at your own risk.</p>
+    <p><a href="{{ '/beta/' | relative_url }}" class="download-link">Launch MMapper Web Beta</a></p>
+  </div>
+</details>
+
+## Frequently Asked Questions
+1. What <a href="changelog.html">new features, changes, or bug fixes are</a> in this version?
+2. What is [MUME](https://mume.org)?
+
+## Found a bug?
+Please report it [here](https://github.com/MUME/MMapper/issues).