Rework mobile layout to be more compact, et al.

- On small screens, the top two headers (with the pack + level names)
  are now removed; instead the pack and level name are shown when
  starting each level, and the buttons from those headers are moved into
  a pause menu.

- The options, compat, and level browser dialogs were all reworked to
  fit better on narrow screens.

- The level overlay has a more consistent layout and tries harder to not
  draw in the middle, where the player generally is (except that the
  mobile pause menu goes there, but oh well).

- The score tally at the end of a level is now less of a small table and
  more of...  more numbers, I guess?

- Links to the music source and author now open in a new window to
  reduce risk of accidentally clicking them and losing your progress.

- A few obituaries were shortened, and several more were added.

- The game ending screen is now accessible on a touchscreen (oops).

- The pause and rewind buttons visually indicate when you're in that
  mode, suggesting you can hit them again to switch to normal play.

- Touch controls are now relative to the player and only apply within
  the game viewport.

- Disabled buttons look a bit less janky.

Still some work to do on this, but it's a pretty solid start.

index.html

@@ -5,6 +5,7 @@
     <title>Lexy's Labyrinth</title>
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="shortcut icon" type="image/png" href="icon.png">
+    <link rel="manifest" type="application/json" href="manifest.json">
     <script>
         "use strict";
         {
@@ -73,6 +74,12 @@
         <g id="svg-icon-menu-chevron">
             <path d="M2,4 l6,6 l6,-6 v3 l-6,6 l-6,-6 z"></path>
         </g>
+        <g id="svg-icon-prev">
+            <path d="M14,1 2,8 14,14 z">
+        </g>
+        <g id="svg-icon-next">
+            <path d="M2,1 14,8 2,14 z">
+        </g>
         <!-- Actions -->
         <g id="svg-icon-up">
             <path d="M0,12 l8,-8 l8,8 z"></path>
@@ -116,8 +123,8 @@
         <h1><a href="https://github.com/eevee/lexys-labyrinth">Lexy's Labyrinth</a></h1>
         <p>— an <a href="https://github.com/eevee/lexys-labyrinth">open source</a> game by <a href="https://eev.ee/">eevee</a></p>
         <nav>
+            <button id="main-compat" type="button">mode: <output>lexy</output></button>
             <button id="main-options" type="button">options</button>
-            <button id="main-compat" type="button">compat mode: <output>lexy</output></button>
         </nav>
     </header>
     <header id="header-pack">
@@ -133,11 +140,11 @@
         <h3 id="level-name">Level 1 — Key Pyramid</h3>
         <nav>
             <button id="main-prev-level" type="button">
-                <svg class="svg-icon" viewBox="0 0 16 16" title="previous"><path d="M14,1 2,8 14,14 z"></svg>
+                <svg class="svg-icon" viewBox="0 0 16 16" title="previous"><use href="#svg-icon-prev"></svg>
             </button>
             <button id="main-choose-level" type="button">Level select</button>
             <button id="main-next-level" type="button">
-                <svg class="svg-icon" viewBox="0 0 16 16" title="next"><path d="M2,1 14,8 2,14 z"></svg>
+                <svg class="svg-icon" viewBox="0 0 16 16" title="next"><use href="#svg-icon-next"></svg>
             </button>
         </nav>
     </header>
@@ -229,7 +236,7 @@
                     <svg class="svg-icon" viewBox="0 0 16 16"><path d="M1,8 7,2 7,14 z M9,8 15,2 15,14 z"></path></svg>
                     <span class="-optional-label">rewind</span> <span class="keyhint"><kbd>z</kbd></span></button>
                 <div class="radio-faux-button-set">
-                    <label><input class="control-turn-based" type="checkbox"> <span>Turn <br>based <br>mode</span></label>
+                    <label><input class="control-turn-based" type="checkbox"> <span>Step <br>mode</span></label>
                 </div>
             </div>
             <div id="player-actions">
@@ -245,16 +252,15 @@
             </div>
             <section id="player-game-area">
                 <div class="level"><!-- level canvas and any overlays go here --></div>
-                <div class="overlay-message">
-                    <h1 class="-top"></h1>
-                    <div class="-middle"></div>
-                    <p class="-bottom"></p>
-                    <p class="-keyhint"></p>
-                </div>
+                <div class="player-overlay-message"></div>
                 <div class="player-hint-wrapper">
                     <div class="player-hint"></div>
                     <svg class="player-hint-bg-icon svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-hint"></use></svg>
                 </div>
+                <div class="player-level-number">
+                    Level
+                    <output></output>
+                </div>
                 <div class="chips">
                     <h3>
                         <svg class="svg-icon" viewBox="0 0 16 16" title="Hearts">
@@ -304,7 +310,7 @@
                 <div class="inventory"></div>
             </section>
             <div id="player-music">
-                🎵 <a id="player-music-title">title</a> by <a id="player-music-author">author</a>
+                🎵 <a id="player-music-title" target="_blank">title</a> by <a id="player-music-author" target="_blank">author</a>
                 <audio loop preload="auto">
             </div>
         </div>