diff --git a/index.html b/index.html
index 9009bae..0e680a6 100644
--- a/index.html
+++ b/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>
diff --git a/js/defs.js b/js/defs.js
index be8d8d4..891f7ac 100644
--- a/js/defs.js
+++ b/js/defs.js
@@ -127,8 +127,8 @@ export const PICKUP_PRIORITIES = {
 
 export const COMPAT_RULESET_LABELS = {
     lexy: "Lexy",
-    steam: "Steam/CC2",
-    'steam-strict': "Steam/CC2 (strict)",
+    steam: "Steam",
+    'steam-strict': "Steam (strict)",
     lynx: "Lynx",
     ms: "Microsoft",
     custom: "Custom",
diff --git a/js/main-base.js b/js/main-base.js
index 0758b36..0a45cc3 100644
--- a/js/main-base.js
+++ b/js/main-base.js
@@ -1,4 +1,4 @@
-import { mk } from './util.js';
+import { mk, mk_svg } from './util.js';
 
 // Superclass for the main display modes: the player, the editor, and the splash screen
 export class PrimaryView {
@@ -285,6 +285,13 @@ export function flash_button(button) {
     }, 500);
 }
 
+export function svg_icon(name) {
+    return mk_svg(
+        'svg.svg-icon',
+        {viewBox: '0 0 16 16'},
+        mk_svg('use', {href: `#svg-icon-${name}`}));
+}
+
 export function load_json_from_storage(key) {
     return JSON.parse(window.localStorage.getItem(key));
 }
diff --git a/js/main.js b/js/main.js
index 943dbba..c417de6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -8,7 +8,7 @@ import * as dat from './format-dat.js';
 import * as format_base from './format-base.js';
 import * as format_tws from './format-tws.js';
 import { Level } from './game.js';
-import { PrimaryView, DialogOverlay, ConfirmOverlay, flash_button, load_json_from_storage, save_json_to_storage } from './main-base.js';
+import { PrimaryView, DialogOverlay, ConfirmOverlay, flash_button, svg_icon, load_json_from_storage, save_json_to_storage } from './main-base.js';
 import { Editor } from './editor/main.js';
 import CanvasRenderer from './renderer-canvas.js';
 import SOUNDTRACK from './soundtrack.js';
@@ -59,44 +59,44 @@ const OBITUARIES = {
     drowned: [
         "you tried out water cooling",
         "you fell into the c",
-        "water disaster",
+        "water disaster!",
         "you sank like a rock",
         "your stack overflowed",
     ],
     burned: [
         "your core temp got too high",
         "your plans went up in smoke",
-        "you got roasted",
+        "you held your feet to the fire",
         "you really blazed through that one",
         "you turned up the heat",
     ],
     slimed: [
-        "what an oozefest",
+        "you mutated",
         "quite a sticky situation",
-        "you got dunked in the gunk",
+        "you were garbage collected",
         "that'll leave a stain",
         "what a waste",
     ],
     exploded: [
-        //"
-        "looks like you're having a blast",
-        "you tripped over something of mine",
-        "you were blown to bits",
+        "you blew it",
+        "you're having a blast",
+        "you became 64 bits",
         "you will surely be mist",
+        "try not to trip",
     ],
     squished: [
-        "that block of ram was too much for you",
+        "you encountered a block of ram",
         "you became two-dimensional",
-        "you're a little flat, not too sharp",
+        "your hit box collided",
         "nice compression ratio",
-        //"
+        "you took a cube route",
     ],
     time: [
         "you tried to overclock",
         "you lost track of time",
         "your speedrun went badly",
-        "you're feeling quite alarmed",
-        //"
+        "you overslept",
+        "you got ticked off",
     ],
     electrocuted: [
         "a shocking revelation",
@@ -119,48 +119,48 @@ const OBITUARIES = {
         "you're having a ball",
         "you'll bounce back from this",
         "should've gone the other way",
-        //"
-        //"
+        "ping?  pong!",
+        //"",
     ],
     walker: [
         "you let it walk all over you",
         "step into, step over, step out",
-        "don't just wander around at random",
-        //"
-        //"
+        "you wandered around at random",
+        //"",
+        //"",
     ],
     fireball: [
         "you had a meltdown",
-        "you haven't been flamed like that since usenet",
-        //"
-        //"
-        //"
+        "watch your core temp",
+        "you got roasted",
+        "you lost the flamewar",
+        "goodness gracious",
     ],
     glider: [
         "your ship came in",
-        "don't worry, everything's fin now",
+        "everything turned out fin",
         "should've given it a wider berth",
         "watch out for that skipper",
-        //"
+        "don't harbor any resentment",
     ],
     tank_blue: [
-        "you didn't watch where they tread",
-        "please and tank blue",
+        "watch where you tread",
+        "well, tanks for trying",
         "should've reversed course",
-        "you strayed from the straight and narrow",
-        //"
+        "strayed from the straight and narrow",
+        "you charged in blindly",
     ],
     tank_yellow: [
-        "you let things get out of control",
-        "you need more direction in your life",
-        "your chances of surviving that were remote",
+        "things got out of control",
+        "you lost all direction",
+        "your chances of survival were remote",
         //"
         //"
     ],
     bug: [
         "you got ants in your pants",
-        "time for some debugging",
-        //"
+        "you need to debug",
+        "all the pest to you",
         //"
         //"
     ],
@@ -176,72 +176,72 @@ const OBITUARIES = {
         "you got a little nybble",
         "you're quite a mouthful",
         "you passed the taste test",
-        //"
+        "you ate it",
     ],
     teeth_timid: [
         "you got a killer byte",
-        //"
+        "you were nibbled to bits",
         "you got a tongue-lashing",
-        //"
-        //"
+        "how unvoretunate",
+        "you had an acci-dent",
     ],
     blob: [
+        "your luck ran out",
         "gooed job on that one",
-        "the rng manipulated you",
-        "goo another way next time",
-        //"
-        //"
+        "try gooing another way",
+        "what're the odds",
+        "ooze laughing now",
     ],
     doppelganger1: [
         "you were outfoxed",
-        "sometimes a copy beats the original",
-        "better reflect on what went wrong",
+        "you need some vixen up",
+        "take some time to reflect",
         "you've been duped",
-        //"
+        "stop hitting yourself",
     ],
     doppelganger2: [
         "your plans just didn't gel",
-        "bet that makes you hopping mad",
-        //"
-        //"
-        //"
+        "you got hopping mad",
+        "hare today, gone tomorrow",
+        "she left quite an impression",
+        "you were gänged up on",
     ],
     rover: [
-        "should've given it more roomba",
+        "try giving it more roomba",
         "exterminate.  exterminate.",
         "your space was invaded",
-        "red rover, red rover, this playthrough is over",
+        "the robots have taken over",
         "defeated by a confused frisbee",
     ],
     ghost: [
         "you were scared to death",
         "that wasn't very friendly",
         "now you're both ghosts",
-        //"
-        //"
+        "you were haunted down",
+        "what did you ex-specter",
     ],
     floor_mimic: [
         "you never saw that coming",
         "you were absolutely floored",
         "this seems fu-tile",
         "watch your step",
-        //"
+        "you put your foot in its mouth",
     ],
 
     // Misc
     dynamite_lit: [
         "you've got a short fuse",
         "you failed to put the pin back in",
-        //"
-        //"
-        //"
+        "it had a hair trigger",
+        "no take-backs",
+        "you ran the wrong way",
     ],
     rolling_ball: [
         "you were bowled over",
         "you found some head cannon",
         "strike one!",
         "down for the ten-count",
-        "watch out, pinhead",
+        "you really dropped the ball",
     ],
 };
 // Helper class used to let the game play sounds without knowing too much about the Player
@@ -426,8 +426,9 @@ class Player extends PrimaryView {
         this.play_speed = 1;
 
         this.level_el = this.root.querySelector('.level');
-        this.overlay_message_el = this.root.querySelector('.overlay-message');
+        this.overlay_message_el = this.root.querySelector('.player-overlay-message');
         this.hint_el = this.root.querySelector('.player-hint');
+        this.number_el = this.root.querySelector('.player-level-number output');
         this.chips_el = this.root.querySelector('.chips output');
         this.time_el = this.root.querySelector('.time output');
         this.bonus_el = this.root.querySelector('.bonus output');
@@ -491,6 +492,71 @@ class Player extends PrimaryView {
             ev.target.blur();
         });
 
+        // Create the mobile pause menu, which consolidates buttons from around the desktop UI
+        // TODO i really need to, uh, consolidate this
+        let btn = (...args) => {
+            let onclick = args.pop();
+
+            let props = {};
+            let last = args[args.length - 1];
+            if (typeof last === 'object' && last.constructor === Object) {
+                props = args.pop();
+            }
+
+            let button = mk('button', props, ...args);
+            button.addEventListener('click', onclick);
+            return button;
+        };
+        this.mobile_pause_menu = mk('div.mobile-pause-menu',
+            // waiting
+            btn("Play", {'class': 'button-bright -only-waiting'}, () => {
+                this.set_state('playing');
+            }),
+            // paused
+            mk('p.-only-paused',
+                btn("Resume", {'class': 'button-bright'}, () => {
+                    this.set_state('playing');
+                }),
+                btn("Retry", () => {
+                    this.confirm_game_interruption("Abandon this attempt and try again?", () => {
+                        this.restart_level();
+                    });
+                }),
+            ),
+            // failure
+            btn("Retry", {'class': 'button-bright -only-failure -only-ended'}, () => {
+                this.restart_level();
+            }),
+            // success
+            btn("Onwards!", {'class': 'button-bright -only-success'}, () => {
+                this.conductor.maybe_change_level(this.conductor.level_index + 1);
+            }),
+            mk('p',
+                this.mobile_prev_button = btn(svg_icon('prev'), {'class': '-narrow'}, () => {
+                    this.confirm_game_interruption("Abandon this attempt and return to the previous level?", () => {
+                        this.conductor.maybe_change_level(this.conductor.level_index - 1);
+                    });
+                }),
+                btn("Level select", () => {
+                    // TODO this should really be in the level browser itself since you can check
+                    // scores without losing a game
+                    this.confirm_game_interruption("Abandon this attempt?", () => {
+                        this.open_level_browser();
+                    });
+                }),
+                this.mobile_next_button = btn(svg_icon('next'), {'class': '-narrow'}, () => {
+                    this.confirm_game_interruption("Abandon this attempt and proceed to the next level?", () => {
+                        this.conductor.maybe_change_level(this.conductor.level_index + 1);
+                    });
+                }),
+            ),
+            btn("Quit to pack list", () => {
+                this.confirm_game_interruption("Abandon this attempt and return to the pack list?", () => {
+                    this.conductor.switch_to_splash();
+                });
+            }),
+        );
+
         this.use_interpolation = true;
         // Default to the LL tileset for safety, but change when we load a level
         // (Note also that this must be created in the constructor so the CC2 timing option can be
@@ -605,15 +671,7 @@ class Player extends PrimaryView {
                 }
                 else if (this.state === 'stopped') {
                     if (this.level.state === 'success') {
-                        // Advance to the next level, if any
-                        if (this.conductor.level_index < this.conductor.stored_game.level_metadata.length - 1) {
-                            this.conductor.change_level(this.conductor.level_index + 1);
-                        }
-                        else {
-                            // TODO for CCLs, by default, this is also at level 144
-                            this.set_state('ended');
-                            this.update_ui();
-                        }
+                        this.proceed_to_next_level();
                     }
                     else {
                         // Restart
@@ -672,48 +730,28 @@ class Player extends PrimaryView {
         // Similarly, grab touch events and translate them to directions
         this.current_touches = {};  // ident => action
         this.touch_restart_delay = new util.DelayTimer;
-        let touch_target = this.root.querySelector('#player-game-area');  // FIXME should be .level but the message overlay blocks touching, whoops!
+        let touch_target = this.root.querySelector('#player-game-area .level');
         let collect_touches = ev => {
             ev.stopPropagation();
             ev.preventDefault();
             this.using_touch = true;
 
-            // If state is anything other than playing/waiting, probably switch to playing, similar
-            // to pressing spacebar
-            if (ev.type === 'touchstart') {
-                if (this.state === 'paused') {
-                    this.toggle_pause();
-                    return;
-                }
-                else if (this.state === 'stopped') {
-                    if (this.touch_restart_delay.active) {
-                        // If it's only been a very short time since the level ended, ignore taps
-                        // here, so you don't accidentally mash restart and lose the chance to undo
-                    }
-                    else if (this.level.state === 'success') {
-                        // Advance to the next level
-                        // TODO game ending?
-                        this.conductor.change_level(this.conductor.level_index + 1);
-                    }
-                    else {
-                        // Restart
-                        this.restart_level();
-                    }
-                    return;
-                }
-            }
-
-            // Figure out where these touches are, relative to the game area
+            // Figure out where these touches are, relative to the player
             // TODO allow starting a level without moving?
-            let rect = this.level_el.getBoundingClientRect();
+            // TODO if you don't move the touch, the player can pass it and will keep going in that
+            // direction?
+            let [px, py] = this.level.player.visual_position();
+            px += 0.5;
+            py += 0.5;
             for (let touch of ev.changedTouches) {
-                // Normalize touch coordinates to [-1, 1]
-                let rx = (touch.clientX - rect.left) / rect.width * 2 - 1;
-                let ry = (touch.clientY - rect.top) / rect.height * 2 - 1;
+                let [x, y] = this.renderer.point_to_real_cell_coords(touch.clientX, touch.clientY);
+                let dx = x - px;
+                let dy = y - py;
+                console.log(dx, dy);
                 // Divine a direction from the results
                 let action;
-                if (Math.abs(rx) > Math.abs(ry)) {
-                    if (rx < 0) {
+                if (Math.abs(dx) > Math.abs(dy)) {
+                    if (dx < 0) {
                         action = 'left';
                     }
                     else {
@@ -721,7 +759,7 @@ class Player extends PrimaryView {
                     }
                 }
                 else {
-                    if (ry < 0) {
+                    if (dy < 0) {
                         action = 'up';
                     }
                     else {
@@ -745,9 +783,29 @@ class Player extends PrimaryView {
         };
         touch_target.addEventListener('touchend', dismiss_touches);
         touch_target.addEventListener('touchcancel', dismiss_touches);
+        // Also grab taps on the overlay, for the specific case that tapping on the end of level
+        // tally advances to the next level
+        this.overlay_message_el.addEventListener('touchstart', ev => {
+            if (this.state === 'stopped') {
+                if (this.touch_restart_delay.active) {
+                    // If it's only been a very short time since the level ended, ignore taps
+                    // here, so you don't accidentally mash restart and lose the chance to undo
+                }
+                else if (this.level.state === 'success') {
+                    // Advance to the next level
+                    this.proceed_to_next_level();
+                }
+                else {
+                    // Restart
+                    this.restart_level();
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+            }
+        });
 
         // When we lose focus, act as though every key was released, and pause the game
-        window.addEventListener('blur', ev => {
+        window.addEventListener('blur', () => {
             this.current_keys.clear();
             this.current_touches = {};
 
@@ -1253,10 +1311,14 @@ class Player extends PrimaryView {
         this.update_tileset();
         this.renderer.set_level(this.level);
         this.update_viewport_size();
+        this.number_el.textContent = stored_level.number;
         // TODO base this on a hash of the UA + some identifier for the pack + the level index.  StoredLevel doesn't know its own index atm...
         this.change_music(this.conductor.level_index % SOUNDTRACK.length);
         this._clear_state();
 
+        this.mobile_prev_button.disabled = ! (this.conductor.level_index - 1 >= 0);
+        this.mobile_next_button.disabled = ! (this.conductor.level_index + 1 < this.conductor.stored_game.level_metadata.length);
+
         this._update_replay_ui();
         if (this.debug.enabled) {
             this.debug.replay_level_label.textContent = this.level.stored_level.has_replay ? "available" : "none";
@@ -1298,6 +1360,7 @@ class Player extends PrimaryView {
         this.current_keyring = {};
         this.current_toolbelt = [];
         this.previous_hint_tile = null;
+        this.current_touches = {};
 
         this.chips_el.classList.remove('--done');
         this.time_el.classList.remove('--frozen');
@@ -1328,6 +1391,15 @@ class Player extends PrimaryView {
         this._redraw();
     }
 
+    proceed_to_next_level() {
+        // Advance to the next level, if any
+        if (! this.conductor.maybe_change_level(this.conductor.level_index + 1)) {
+            // TODO for CCLs, by default, this is also at level 144
+            this.set_state('ended');
+            this.update_ui();
+        }
+    }
+
     open_level_browser() {
         new LevelBrowserOverlay(this.conductor).open();
     }
@@ -1732,46 +1804,52 @@ class Player extends PrimaryView {
             this.current_keys_new.clear();
         }
 
+        // TODO wonder if some other update_ui stuff could move here
+        this.pause_button.classList.toggle('--pressed', this.state === 'paused');
+        this.rewind_button.classList.toggle('--pressed', this.state === 'rewinding');
+
         // Populate the overlay
-        let overlay_reason = '';
-        let overlay_top = '';
-        let overlay_middle = null;
-        let overlay_bottom = '';
-        let overlay_keyhint = '';
+        let overlay = this.overlay_message_el;
+        overlay.setAttribute('data-reason', this.state);
+        this.overlay_message_el.textContent = '';
         if (this.state === 'waiting') {
-            overlay_reason = 'waiting';
             let stored_level = this.level.stored_level;
-            overlay_top = `#${stored_level.number} ${stored_level.title}`;
-            overlay_middle = "Ready!";
-            if (stored_level.author) {
-                overlay_bottom = `by ${stored_level.author}`;
-            }
+            overlay.append(
+                mk('h1', this.conductor.stored_game.title),
+                mk('h2', `#${stored_level.number} ${stored_level.title}`),
+                mk('h3', stored_level.author ? `by ${stored_level.author}` : "\u200b"),
+                this.mobile_pause_menu,
+                mk('p.-controls-hint', "WASD/↑←↓→ to move · space to start without moving"),
+            );
         }
         else if (this.state === 'paused') {
-            overlay_reason = 'paused';
-            overlay_bottom = "/// paused ///";
+            overlay.append(mk('h2', "/// paused ///"));
             if (this.using_touch) {
-                overlay_keyhint = "tap to resume";
+                overlay.append(mk('p.-controls-hint', "tap to resume"));
             }
             else {
-                overlay_keyhint = "press P to resume";
+                overlay.append(mk('p.-controls-hint', "press space to resume"));
             }
+            overlay.append(this.mobile_pause_menu);
         }
         else if (this.state === 'stopped') {
             // Set a timer before tapping the overlay will restart/advance
             this.touch_restart_delay.set(2000);
 
             if (this.level.state === 'failure') {
-                overlay_reason = 'failure';
-                overlay_top = "whoops";
+                overlay.setAttribute('data-reason', 'failure');
                 let obits = OBITUARIES[this.level.fail_reason] ?? OBITUARIES['generic'];
-                overlay_bottom = random_choice(obits);
+                overlay.append(
+                    mk('h2', "whoops" + random_choice(["", "!", "?", "..."])),
+                    mk('h3', random_choice(obits)),
+                    this.mobile_pause_menu,
+                );
                 if (this.using_touch) {
                     // TODO touch gesture to rewind?
-                    overlay_keyhint = "tap to try again, or use undo/rewind above";
+                    overlay.append(mk('p.-controls-hint', "tap to try again, or use undo/rewind above"));
                 }
                 else {
-                    overlay_keyhint = "press space to try again, or Z to rewind";
+                    overlay.append(mk('p.-controls-hint', "press space to try again, or Z to rewind"));
                 }
             }
             else {
@@ -1831,7 +1909,7 @@ class Player extends PrimaryView {
                     this.conductor.save_savefile();
                 }
 
-                overlay_reason = 'success';
+                overlay.setAttribute('data-reason', 'success');
                 let base = level_number * 500;
                 let time = scorecard.time * 10;
                 // Pick a success message
@@ -1841,89 +1919,110 @@ class Player extends PrimaryView {
                     time_left_fraction = this.level.time_remaining / TICS_PER_SECOND / this.level.stored_level.time_limit;
                 }
 
+                let quip;
                 if (this.level.chips_remaining > 0) {
-                    overlay_top = random_choice([
+                    quip = random_choice([
                         "socket to em!", "go bug blaster!",
                     ]);
                 }
                 else if (this.level.time_remaining && this.level.time_remaining < 200) {
-                    overlay_top = random_choice([
+                    quip = random_choice([
                         "in the nick of time!", "cutting it close!",
                     ]);
                 }
                 else if (time_left_fraction !== null && time_left_fraction > 1) {
-                    overlay_top = random_choice([
+                    quip = random_choice([
                         "faster than light!", "impossible speed!", "pipelined!",
                     ]);
                 }
                 else if (time_left_fraction !== null && time_left_fraction > 0.75) {
-                    overlay_top = random_choice([
+                    quip = random_choice([
                         "lightning quick!", "nice speedrun!", "eagerly evaluated!",
                     ]);
                 }
                 else {
-                    overlay_top = random_choice([
+                    quip = random_choice([
                         "you did it!", "nice going!", "great job!", "good work!",
                         "onwards!", "tubular!", "yeehaw!", "hot damn!",
                         "alphanumeric!", "nice dynamic typing!",
                     ]);
                 }
+                overlay.append(mk('h2', quip));
+
+                let bonus = this.level.bonus_points;
+                let score_improvement = mk('div.-improvement');
+                let time_improvement = mk('div.-improvement');
+                if (! old_scorecard) {
+                    score_improvement.classList.add('--new');
+                    score_improvement.append(mk('h3', "first time!"));
+                    // leave time improvement empty since we already say it's first time once
+                }
+                else {
+                    let diff = scorecard.score - old_scorecard.score;
+                    let diffstr = Math.abs(diff).toLocaleString();
+                    if (diff > 0) {
+                        score_improvement.classList.add('--better');
+                        score_improvement.append(mk('h4', "new record!"), mk('p', `+ ${diffstr}`));
+                    }
+                    else if (diff === 0) {
+                        score_improvement.classList.add('--same');
+                        score_improvement.append(mk('h4', "tied your best!"), mk('p', `+ ${diffstr}`));
+                    }
+                    else {
+                        score_improvement.classList.add('--worse');
+                        score_improvement.append(mk('h4', "vs your best:"), mk('p', `− ${diffstr}`));
+                    }
+
+                    diff = scorecard.abstime - old_scorecard.abstime;
+                    diffstr = util.format_duration(Math.abs(diff) / TICS_PER_SECOND, 2);
+                    if (diff < 0) {
+                        time_improvement.classList.add('--better');
+                        time_improvement.append(mk('h4', "new record!"), mk('p', `− ${diffstr}`));
+                    }
+                    else if (diff === 0) {
+                        time_improvement.classList.add('--same');
+                        time_improvement.append(mk('h4', "tied your best!"), mk('p', `− ${diffstr}`));
+                    }
+                    else {
+                        time_improvement.classList.add('--worse');
+                        time_improvement.append(mk('h4', "vs your best:"), mk('p', `+ ${diffstr}`));
+                    }
+                }
+
+                overlay.append(mk('div.scoreboard',
+                    // base score + time bonus + score bonus
+                    mk('div.-subscore', mk('h4', "base score"), mk('p', base.toLocaleString())),
+                    mk('div.-subscore',
+                        mk('h4', "time bonus"),
+                        mk('p', time ? `+ ${time.toLocaleString()}` : "—")),
+                    mk('div.-subscore',
+                        mk('h4', "score bonus"),
+                        mk('p', bonus ? `+ ${bonus.toLocaleString()}` : "—")),
+                    // level score ... first time OR new record OR x short
+                    mk('div.-level-score',
+                        mk('h4', "level score"),
+                        mk('p', scorecard.score.toLocaleString(), scorecard.aid === 0 ? "★" : "")),
+                    score_improvement,
+
+                    mk('div.-level-score',
+                        mk('h4', "real time"),
+                        mk('p', util.format_duration(scorecard.abstime / TICS_PER_SECOND, 2))),
+                    time_improvement,
+
+                    // TODO show your level time, time improvement...?  not quite enough room...
+                    mk('div.-total-score',
+                        mk('h4', "total score"),
+                        mk('p', savefile.total_score.toLocaleString())),
+                    mk('div.-total-score',
+                        mk('h4', "total real time"),
+                        mk('p', util.format_duration(savefile.total_abstime / TICS_PER_SECOND, 2))),
+                ));
+
                 if (this.using_touch) {
-                    overlay_keyhint = "tap to move on";
+                    overlay.append(mk('p.-controls-hint', "tap to move on"));
                 }
                 else {
-                    overlay_keyhint = "press space to move on";
-                }
-
-                overlay_middle = mk('dl.score-chart',
-                    mk('dt.-component', "base score"),
-                    mk('dd.-component', base.toLocaleString()),
-                    mk('dt.-component', "time bonus"),
-                    mk('dd.-component', `+ ${time.toLocaleString()}`),
-                );
-                if (this.level.bonus_points) {
-                    overlay_middle.append(
-                        mk('dt.-component', "score bonus"),
-                        mk('dd.-component', `+ ${this.level.bonus_points.toLocaleString()}`),
-                    );
-                }
-
-                // TODO show your time, time improvement...?
-                let score_dd = mk('dd.-sum', scorecard.score.toLocaleString());
-                if (scorecard.aid === 0) {
-                    score_dd.append(mk('span.-star', "★"));
-                }
-                overlay_middle.append(mk('dt.-sum', "level score"), score_dd);
-
-                overlay_middle.append(
-                    mk('dt.-total', "total score"),
-                    mk('dd.-total', savefile.total_score.toLocaleString()),
-                );
-
-                if (old_scorecard && old_scorecard.score < scorecard.score) {
-                    overlay_middle.append(
-                        mk('dd.-total', `(+ ${(scorecard.score - old_scorecard.score).toLocaleString()})`),
-                    );
-                }
-                else {
-                    overlay_middle.append(mk('dd', ""));
-                }
-
-                overlay_middle.append(
-                    mk('dd', ""),
-                    mk('dt', "real time"),
-                    mk('dd', util.format_duration(scorecard.abstime / TICS_PER_SECOND, 2)),
-                    mk('dt.-total', "total time"),
-                    mk('dd.-total', util.format_duration(savefile.total_abstime / TICS_PER_SECOND, 2)),
-                );
-
-                if (old_scorecard && old_scorecard.abstime > scorecard.abstime) {
-                    overlay_middle.append(
-                        mk('dd.-total', `(− ${util.format_duration((old_scorecard.abstime - scorecard.abstime) / TICS_PER_SECOND, 2)})`),
-                    );
-                }
-                else {
-                    overlay_middle.append(mk('dd', ""));
+                    overlay.append(mk('p.-controls-hint', "press space to move on"));
                 }
             }
         }
@@ -1932,20 +2031,17 @@ class Player extends PrimaryView {
             // long and clunky?  final score is not interesting.  could show other stats, total
             // time, say something if you skipped levels...
             // TODO disable most of the ui here?  probably??
-            overlay_reason = 'ended';
-            overlay_middle = "Congratulations!  You solved a whole set of funny escape rooms.  But is that the best score you can manage...?";
             let savefile = this.conductor.current_pack_savefile;
-            overlay_bottom = `FINAL SCORE: ${savefile.total_score.toLocaleString()}`;
+            overlay.append(
+                mk('p.-score', "FINAL SCORE", mk('output', savefile.total_score.toLocaleString())),
+                this.mobile_pause_menu,
+                mk('p.-congrats', "Congratulations!  You beat some funny escape rooms.  Now improve your score!"),
+            );
             // TODO press spacebar to...  restart from level 1??  or what
         }
-        this.overlay_message_el.setAttribute('data-reason', overlay_reason);
-        this.overlay_message_el.querySelector('.-top').textContent = overlay_top;
-        this.overlay_message_el.querySelector('.-bottom').textContent = overlay_bottom;
-        this.overlay_message_el.querySelector('.-keyhint').textContent = overlay_keyhint;
-        let middle = this.overlay_message_el.querySelector('.-middle');
-        middle.textContent = '';
-        if (overlay_middle) {
-            middle.append(overlay_middle);
+        else {
+            // 'playing', or bogus
+            overlay.setAttribute('data-reason', '');
         }
 
         // Ask the renderer to apply a rewind effect only when rewinding, or when paused from
@@ -2041,6 +2137,7 @@ class Player extends PrimaryView {
         if (style['display'] === 'none')
             return;
 
+        let tolerable_fraction = 1;
         let is_portrait = window.matchMedia('(orientation: portrait)').matches;
         // The base size is the size of the canvas, i.e. the viewport size times the tile size --
         // but note that we have 2x4 extra tiles for the inventory depending on layout, plus half a
@@ -2061,8 +2158,16 @@ class Player extends PrimaryView {
         // between the player container and the game area
         let player = this.root.querySelector('#player-main');
         let game_area = this.root.querySelector('#player-game-area');
-        let avail_x = this.root.offsetWidth - (player.offsetWidth - game_area.offsetWidth);
-        let avail_y = this.root.offsetHeight - (player.offsetHeight - game_area.offsetHeight);
+        let avail_x = this.root.offsetWidth;
+        let avail_y = this.root.offsetHeight;
+        if (is_portrait) {
+            // Controls are only on top and bottom; anything to the sides is empty space
+            avail_y -= (player.offsetHeight - game_area.offsetHeight);
+        }
+        else {
+            // Other way around
+            avail_x -= (player.offsetWidth - game_area.offsetWidth);
+        }
         // ...minus the width of the debug panel, if visible
         if (this.debug.enabled) {
             avail_x -= this.root.querySelector('#player-debug').getBoundingClientRect().width;
@@ -2072,6 +2177,7 @@ class Player extends PrimaryView {
         avail_y -= Math.max(0, document.body.scrollHeight - document.body.clientHeight);
 
         let dpr = window.devicePixelRatio || 1.0;
+        dpr *= tolerable_fraction;
         // Divide to find the biggest scale that still fits.  Leave a LITTLE wiggle room for pixel
         // rounding and breathing (except on small screens, where being too small REALLY hurts), but
         // not too much since there's already a flex gap between the game and header/footer
@@ -2411,7 +2517,7 @@ class Splash extends PrimaryView {
 
     _create_pack_element(ident, packdef = null) {
         let title = packdef ? packdef.title : ident;
-        let button = mk('button.button-big', {type: 'button'}, title);
+        let button = mk('button.button-big.button-bright', {type: 'button'}, title);
         if (packdef) {
             button.addEventListener('click', ev => {
                 this.conductor.fetch_pack(packdef.path, packdef.title);
@@ -2959,26 +3065,6 @@ class OptionsOverlay extends DialogOverlay {
         );
     }
 
-    _add_options(root, options) {
-        let ul = mk('ul');
-        root.append(ul);
-        for (let optdef of options) {
-            let li = mk('li');
-            let label = mk('label.option');
-            label.append(mk('input', {type: 'checkbox', name: optdef.key}));
-            label.append(mk('span.option-label', optdef.label));
-            let help_icon = mk('img.-help', {src: 'icons/help.png'});
-            label.append(help_icon);
-            let help_text = mk('p.option-help', optdef.note);
-            li.append(label);
-            li.append(help_text);
-            ul.append(li);
-            help_icon.addEventListener('click', ev => {
-                help_text.classList.toggle('--visible');
-            });
-        }
-    }
-
     close() {
         // Ensure the player's music is set back how we left it
         this.conductor.player.update_music_playback_state();
@@ -3387,7 +3473,7 @@ class LevelBrowserOverlay extends DialogOverlay {
         this.set_title("choose a level");
         let thead = mk('thead', mk('tr',
             mk('th', ""),
-            mk('th', "Level"),
+            mk('th.-title', "Level"),
             mk('th.-time', mk('abbr', {
                 title: "Time left on the clock when you finished; doesn't exist for untimed levels",
             }, "Best clock")),
@@ -3414,6 +3500,7 @@ class LevelBrowserOverlay extends DialogOverlay {
                 }
 
                 // 0 means untimed level
+                // FIXME wait, not necessarily!  shouldn't untimed be null?
                 if (scorecard.time !== 0) {
                     time = String(scorecard.time);
                 }
@@ -3504,7 +3591,7 @@ class LevelBrowserOverlay extends DialogOverlay {
 
         table.append(mk('tfoot', mk('tr',
             mk('th'),
-            mk('th', "Total"),
+            mk('th.-title', "Total"),
             mk('th'),
             mk('th.-time', util.format_duration(total_abstime / TICS_PER_SECOND, 2)),
             mk('th.-score', total_score.toLocaleString()),
@@ -3836,6 +3923,14 @@ class Conductor {
         return this.change_level(level_index ?? (this.current_pack_savefile.current_level ?? 1) - 1);
     }
 
+    // Attempt to change level, but silently return false if the given level number doesn't exist
+    maybe_change_level(level_index) {
+        if (level_index < 0 || level_index >= this.stored_game.level_metadata.length)
+            return false;
+
+        return this.change_level(level_index);
+    }
+
     change_level(level_index) {
         // FIXME handle errors here
         try {
diff --git a/js/renderer-canvas.js b/js/renderer-canvas.js
index f498ef3..ddf9e0f 100644
--- a/js/renderer-canvas.js
+++ b/js/renderer-canvas.js
@@ -112,6 +112,15 @@ export class CanvasRenderer {
         return [x, y];
     }
 
+    point_to_cell_coords(client_x, client_y) {
+        let rect = this.canvas.getBoundingClientRect();
+        let scale_x = rect.width / this.canvas.width;
+        let scale_y = rect.height / this.canvas.height;
+        let x = Math.floor((client_x - rect.x) / scale_x / this.tileset.size_x + this.viewport_x);
+        let y = Math.floor((client_y - rect.y) / scale_y / this.tileset.size_y + this.viewport_y);
+        return [x, y];
+    }
+
     real_cell_coords_from_event(ev) {
         let rect = this.canvas.getBoundingClientRect();
         let scale_x = rect.width / this.canvas.width;
@@ -121,6 +130,15 @@ export class CanvasRenderer {
         return [x, y];
     }
 
+    point_to_real_cell_coords(client_x, client_y) {
+        let rect = this.canvas.getBoundingClientRect();
+        let scale_x = rect.width / this.canvas.width;
+        let scale_y = rect.height / this.canvas.height;
+        let x = (client_x - rect.x) / scale_x / this.tileset.size_x + this.viewport_x;
+        let y = (client_y - rect.y) / scale_y / this.tileset.size_y + this.viewport_y;
+        return [x, y];
+    }
+
     // Draw to a canvas using tile coordinates
     blit(ctx, sx, sy, dx, dy, w = 1, h = w) {
         let tw = this.tileset.size_x;
diff --git a/style.css b/style.css
index 8a3f166..e84cae6 100644
--- a/style.css
+++ b/style.css
@@ -18,9 +18,9 @@ body {
     color: #ececec;
 
     --panel-bg-color: hsl(220, 10%, 15%);
-    --button-bg-color: hsl(220, 10%, 25%);
+    --button-bg-color: hsl(220, 20%, 25%);
     --button-bg-shadow-color: #fff1;
-    --button-bg-hover-color: hsl(220, 15%, 30%);
+    --button-bg-hover-color: hsl(220, 30%, 30%);
     --generic-bg-hover-on-white: hsl(220, 60%, 90%);
     --generic-bg-selected-on-white: hsl(220, 60%, 85%);
     --generic-border-selected-on-white: hsl(220, 60%, 75%);
@@ -50,10 +50,10 @@ button,
     color: white;
     background-color: var(--button-bg-color);
     background-image: linear-gradient(to bottom, var(--button-bg-shadow-color), transparent 75%);
-    border: 1px solid hsl(220, 10%, 10%);
+    border: 1px solid hsl(220, 10%, 7.5%);
     box-shadow:
-        inset 0 0 0 1px hsl(220, 10%, 33%),
-        0 1px 1px hsl(220, 10%, 10%);
+        inset 0 0 1px 1px #fff2,
+        0 1px 1px hsl(220, 10%, 7.5%);
     border-radius: 0.25em;
     text-transform: lowercase;
     cursor: pointer;
@@ -68,12 +68,15 @@ button:active,
     /* Need this for the editor's tool help things and i'm not questioning it */
     z-index: 1;
 }
+button:enabled.button-bright {
+    background-color: hsl(220, 50%, 25%);
+}
+button:enabled.button-bright:hover {
+    background-color: hsl(220, 70%, 30%);
+}
 button:disabled {
     color: #606060;
     background-color: #202020;
-    box-shadow:
-        inset 0 0 2px 1px hsl(220, 0%, 10%),
-        0 1px 0 hsl(220, 10%, 10%);
     cursor: auto;
 }
 button.button-big {
@@ -202,12 +205,13 @@ svg.svg-icon {
     border-top-right-radius: 0.25em;
     border-bottom-right-radius: 0.25em;
 }
+button.--pressed,
 .radio-faux-button-set > label > input:checked + span {
     background: hsl(220, 80%, 50%);
     box-shadow:
-        inset 0 0 1px 1px hsl(220, 50%, 40%),
-        inset 0 -0.125em 0.5em 0.25em hsl(220, 50%, 30%),
-        0 1px 1px hsl(220, 10%, 10%);
+        inset 0 1px 3px 1px hsl(220, 50%, 15%),
+        inset 0 0.25em 1em 0.5em hsl(220, 50%, 30%),
+        0 1px 1px hsl(220, 10%, 10%)
 }
 
 .button-row {
@@ -411,6 +415,84 @@ table.level-browser tbody tr:hover {
 table.level-browser tbody tr:nth-child(10n) td {
     border-bottom: 2px solid hsl(220, 20%, 80%);
 }
+@media (max-width: 600px) {
+    /* Unique media query: this is only necessary for VERY narrow screens */
+    /* In order to wrap the rows, turn the table markup into a stack of grids */
+    table.level-browser {
+        display: block;
+    }
+    table.level-browser tr {
+        display: grid;
+        grid:
+            "number star    name    name    forget"
+            "number .       clock   time    score"
+            / 3em 1em 1fr 1fr 1fr
+        ;
+    }
+    table.level-browser td,
+    table.level-browser th {
+        display: block;
+    }
+    table.level-browser thead .-title,
+    table.level-browser tfoot .-title {
+        /* "Level" and "Total" column headers are not useful and eat a lot of space */
+        display: none;
+    }
+    table.level-browser thead th:empty,
+    table.level-browser tfoot th:empty {
+        /* These are filler for table layout purposes */
+        display: none;
+    }
+    table.level-browser .-number {
+        grid-area: number;
+    }
+    table.level-browser .-title {
+        grid-area: name;
+    }
+    table.level-browser .-time {
+        grid-area: clock;
+    }
+    table.level-browser .-time + .-time {
+        grid-area: time;
+    }
+    table.level-browser .-score {
+        grid-area: score;
+    }
+    table.level-browser .-aid {
+        grid-area: star;
+        /* We overflow a bit because of our padding, so just leak into it */
+        justify-self: center;
+    }
+    table.level-browser .-button {
+        grid-area: forget;
+        justify-self: end;
+    }
+    /* Move borders off cells and onto rows */
+    table.level-browser thead tr th {
+        border: none;
+    }
+    table.level-browser tfoot tr th {
+        border: none;
+    }
+    table.level-browser tbody tr:nth-child(10n) td {
+        border: none;
+    }
+    table.level-browser thead tr {
+        border-bottom: 2px solid hsl(220, 20%, 60%);
+    }
+    table.level-browser tfoot tr {
+        border-top: 2px solid hsl(220, 20%, 60%);
+    }
+    table.level-browser tbody tr {
+        border-bottom: 1px solid #ddd;
+    }
+    table.level-browser tbody tr.--current {
+        border: none;
+    }
+    table.level-browser tbody tr:nth-child(10n) {
+        border-bottom: 2px solid hsl(220, 20%, 80%);
+    }
+}
 
 /* Compat dialog */
 .dialog-compat {
@@ -441,6 +523,46 @@ img.compat-icon,
     vertical-align: middle;
 }
 
+@media (max-width: 800px) {
+    /* Stack the formgrid, it doesn't fit very well as columns */
+    .dialog dl.formgrid {
+        display: block;
+    }
+    .dialog dl.formgrid > dt {
+        margin: 0.5em 0;
+        text-align: left;
+    }
+    .dialog dl.formgrid > dt:first-child {
+        margin-top: 0;
+    }
+    .dialog dl.formgrid > * + dt {
+        border-top: 1px solid #ccc;
+        padding-top: 0.5em;
+    }
+    .dialog dl.formgrid > * + dt:empty {
+        padding-top: 0;
+    }
+    .dialog dl.formgrid > dd {
+        margin: 0.5em 0;
+    }
+
+    .dialog-compat .radio-faux-button-set {
+        font-size: 0.83em;
+        flex-wrap: wrap;
+    }
+    .dialog-compat .radio-faux-button-set > * {
+        flex: 1 0 30%;
+    }
+    .dialog-compat .radio-faux-button-set .-button {
+        border-radius: 0;
+    }
+    ul.compat-flags img.compat-icon,
+    ul.compat-flags span.compat-icon-gap {
+        width: 16px;
+        height: 16px;
+    }
+}
+
 
 /* Options dialog */
 .dialog-options {
@@ -481,6 +603,8 @@ label.option .option-label {
         max-width: 90%;
         max-height: 90%;
     }
+    .dialog-options {
+    }
 }
 
 
@@ -511,7 +635,6 @@ body > header > nav {
     gap: 0.5em;
 }
 body > header button {
-    font-size: 0.75em;
     white-space: nowrap;
 }
 body > header h1 a {
@@ -587,14 +710,18 @@ pre.stack-trace {
     order: 3;
     color: #606060;
 }
+#header-icon {
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+}
 
-@media (max-width: 800px) {
+@media ((orientation: portrait) and (max-width: 800px)) or ((orientation: landscape) and (max-height: 600px)) {
     body > header {
-        padding: 0.125em 0.25em;
+        padding: 1px;
     }
     /* All these headings are way too big on phones */
     body > header h1 {
-        font-size: 1.25em;
+        font-size: 1.125em;
     }
     body > header h2 {
         font-size: 1.125em;
@@ -606,6 +733,12 @@ pre.stack-trace {
         /* "a game by eevee" takes up too much space :( */
         display: none;
     }
+
+    /* Hide the top/bottom nav while playing entirely */
+    body[data-mode=player] #header-pack,
+    body[data-mode=player] #header-level {
+        display: none;
+    }
 }
 
 /**************************************************************************************************/
@@ -813,15 +946,6 @@ pre.stack-trace {
     /* this also forces the button to be 1 line of text high even for empty title */
     white-space: pre-wrap;
 }
-.played-pack-list > li > button:enabled {
-    background-color: hsl(220, 30%, 25%);
-    box-shadow:
-        inset 0 0 0 1px hsl(220, 30%, 33%),
-        0 1px 1px hsl(220, 10%, 10%);
-}
-.played-pack-list > li > button:enabled:hover {
-    background-color: hsl(220, 40%, 30%);
-}
 .played-pack-list p {
     color: #c0c0c0;
     font-style: italic;
@@ -1128,9 +1252,6 @@ ol.packtest-summary > li {
     #player-actions button svg {
         font-size: 1em;
     }
-    #player-controls .-optional-label {
-        display: none;
-    }
     #player-controls button {
         padding: 0.25em 0.5em;
         line-height: 1.33;
@@ -1159,28 +1280,48 @@ ol.packtest-summary > li {
             "buttons"
             "game"
             "actions"
-            "music"
         ;
     }
     #player-controls,
     #player-actions {
+        /* Not much in these rows so make them a bit bigger for hittability */
+        font-size: 1.33em;
         justify-content: center;
     }
     #player-controls button,
     #player-actions button {
         flex: auto;
+        padding: 0.25em 0.5em;
+    }
+    #player-controls .control-restart {
+        /* This is a dedicated pause-menu button */
+        display: none;
     }
     #player .keyhint {
         /* Hide key hints; there's nowhere to put them and they take up surprisingly a lot of space */
         display: none;
     }
 }
-@media (max-width: 800px) {
+@media (orientation: landscape) and (max-height: 600px) {
+    /* On a small landscape screen, remove the music row (it matters!) */
+    #player-main {
+        grid:
+            "buttons    game    actions"
+            "buttons    game    actions"
+            / 1fr auto 1fr
+        ;
+    }
+}
+@media ((orientation: portrait) and (max-width: 800px)) or ((orientation: landscape) and (max-height: 600px)) {
+    #player-controls .-optional-label {
+        display: none;
+    }
     #splash-fullscreen {
         display: revert;
     }
     #player-music {
-        font-size: 0.875em;
+        /* TODO :( */
+        display: none;
     }
 }
 
@@ -1206,7 +1347,7 @@ ol.packtest-summary > li {
     row-gap: calc(var(--tile-height) * var(--scale) / 4);
 
     padding: calc(var(--tile-height) * var(--scale) / 4) calc(var(--tile-width) * var(--scale) / 4);
-    background: hsl(220, 10%, 20%);
+    background: hsl(220, 10%, 15%);
     box-shadow: 0 0.25em 1em black;
 }
 
@@ -1214,7 +1355,7 @@ ol.packtest-summary > li {
     grid-area: level;
 
     position: relative;
-    outline: 2px solid black;
+    outline: 1px solid hsl(220, 10%, 5%);
 }
 .level canvas {
     display: block;
@@ -1223,78 +1364,172 @@ ol.packtest-summary > li {
     --viewport-width: 9;
     --viewport-height: 9;
 }
-#player .overlay-message {
+
+.player-overlay-message {
     grid-area: level;
     place-self: stretch;
 
     position: relative;
     display: grid;
-    grid-template-rows: 2fr 6fr 2fr 1fr;
-    justify-content: stretch;
+    grid:
+        "pack"      calc(1.25em * 1.25 * 1)
+        "level"     calc(1.333em * 1.25 * 2)
+        "author"    calc(1em * 1.25 * 1)
+        "space"     1fr
+        "controls"  1.5em
+    ;
     align-items: center;
-    /* Prevent blowout; force using the canvas's height */
+    gap: 0.25em;
+    /* Prevent blowout; force using the canvas's size */
     height: 0;
     min-height: 100%;
+    width: 0;
+    min-width: 100%;
     box-sizing: border-box;
 
     z-index: 2;
     font-size: calc(0.5 * var(--tile-width) * var(--scale));
+    line-height: 1.25;
     background: #0009;
     color: white;
     text-align: center;
-    text-shadow: 0 2px 1px black;
-}
-#player .overlay-message > * {
-    padding: 0 5%;
+    text-shadow: 0 1px 1px black;
 }
 /* Allow clicking through the overlay in debug mode */
-body.--debug .overlay-message {
+body.--debug .player-overlay-message {
     pointer-events: none;
 }
-#player .overlay-message p {
-    margin: 0;
+.player-overlay-message > * {
+    padding: 0 0.25em;
 }
-#player .overlay-message .-top {
-    font-size: 1.5em;
+.player-overlay-message h1 {
+    /* Pack title, doesn't need to be too big */
+    grid-area: pack;
+    font-size: 1em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: hsl(220, 25%, 60%);
 }
-#player .overlay-message .-middle {
+.player-overlay-message > h2 {
+    grid-area: level;
+    font-size: 2em;
 }
-#player .overlay-message .-bottom {
+.player-overlay-message[data-reason='waiting'] > h2 {
+    /* For 'waiting' this is a level name, so make it two lines of smaller text */
+    font-size: 1.333em;
 }
-#player .overlay-message .-keyhint {
-    align-self: end;
-    font-size: 0.5em;
+.player-overlay-message > h3 {
+    grid-area: author;
+    font-size: 1em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: hsl(220, 10%, 90%);
+}
+.player-overlay-message > .scoreboard {
+    grid-row: author / space;
+}
+.player-overlay-message .-controls-hint {
+    grid-area: controls;
+    font-size: 0.75em;
     color: #c0c0c0;
 }
-#player .overlay-message[data-reason=""] {
+.player-overlay-message .mobile-pause-menu {
+    grid-area: space;
+}
+.mobile-pause-menu {
+    font-size: 1.25em;
+    display: none;  /* flex */
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.33em;
+    width: 80%;
+    margin: auto;
+}
+.mobile-pause-menu button {
+    padding: 0.33em;
+}
+.mobile-pause-menu > p {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    margin: 0;
+    gap: 0.33em;
+}
+.mobile-pause-menu > p > button {
+    flex: 1;
+    line-height: 1;
+}
+.mobile-pause-menu > p > button.-narrow {
+    flex: initial;
+}
+.mobile-pause-menu .-only-waiting,
+.mobile-pause-menu .-only-paused,
+.mobile-pause-menu .-only-failure,
+.mobile-pause-menu .-only-success,
+.mobile-pause-menu .-only-ended {
     display: none;
 }
-#player .overlay-message[data-reason=failure] {
-    box-shadow: inset 0 0 calc(4 * var(--tile-width)) var(--tile-width) black;
+.player-overlay-message[data-reason=waiting] .mobile-pause-menu .-only-waiting,
+.player-overlay-message[data-reason=paused] .mobile-pause-menu .-only-paused,
+.player-overlay-message[data-reason=failure] .mobile-pause-menu .-only-failure,
+.player-overlay-message[data-reason=success] .mobile-pause-menu .-only-success,
+.player-overlay-message[data-reason=ended] .mobile-pause-menu .-only-ended {
+    display: initial;
 }
-#player .overlay-message[data-reason=success] {
-    background: hsla(220, 50%, 25%, 0.5);
-    box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(220, 50%, 25%);
+.player-overlay-message[data-reason=paused] .mobile-pause-menu p.-only-paused {
+    display: flex;
 }
-#player .overlay-message[data-reason=ended] {
-    /* Shove the middle + bottom parts down so they don't overlay the busiest part of the ending image */
-    grid-template-rows: 8fr 4fr 2fr 0;
+.player-overlay-message[data-reason=""] {
+    display: none;
+}
+.player-overlay-message[data-reason=waiting] {
+    background: linear-gradient(to bottom, #000d, #0008 40%, #0008 60%, #000d);
+}
+.player-overlay-message[data-reason=failure] {
+    background: hsla(330, 20%, 10%, 0.5);
+    background: radial-gradient(#0004, hsla(330, 10%, 10%, 0.5) 40%, hsl(330, 20%, 10%));
+}
+.player-overlay-message[data-reason=success] {
+    background: radial-gradient(hsla(220, 60%, 5%, 0.75), 60%, hsla(220, 60%, 25%, 0.75));
+}
+.player-overlay-message[data-reason=ended] {
+    /* Rearrange this entirely, to fit the ending image in */
+    grid:
+        "congrats"  min-content
+        "."         0.5em
+        "menu"      1fr
+        "."         0.5em
+        "score"     min-content
+    ;
     overflow: hidden;
-    x-color: black;
     background: url(ending.png) no-repeat center center / cover;
     box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(220, 50%, 25%);
-    x-text-shadow: 0 0 2px white, 0 2px 2px white;
 }
-#player .overlay-message[data-reason=ended] .-middle {
+.player-overlay-message[data-reason=ended] .mobile-pause-menu {
+    grid-area: menu;
+}
+.player-overlay-message[data-reason=ended] > .-congrats {
+    grid-area: congrats;
+    margin: 0;
+    padding: 0.25em;
     background: #0009;
 }
-#player .overlay-message[data-reason=ended] .-bottom {
-    font-size: 1.5em;
+.player-overlay-message[data-reason=ended] > .-score {
+    grid-area: score;
+    margin: 0;
+    padding: 0.25em;
     background: #0006;
 }
+.player-overlay-message[data-reason=ended] > .-score output {
+    font-size: 2em;
+    display: block;
+}
 @supports (mask-image: none) or (-webkit-mask-image: none) {
     /* Do this complicated rotating sunburst thing only if masks work */
-    #player .overlay-message[data-reason=ended]::before {
+    .player-overlay-message[data-reason=ended]::before {
         content: '';
         position: absolute;
         z-index: -1;
@@ -1317,35 +1552,68 @@ body.--debug .overlay-message {
         transform: rotate(1turn);
     }
 }
-dl.score-chart {
+.scoreboard {
     display: grid;
-    grid-auto-columns: 1fr 1fr;
-    grid-auto-rows: 1.33em;
-    margin: auto 10%;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-auto-rows: min-content;
+    align-items: center;
+    row-gap: 0.75em;
+    margin: auto 5%;
     font-weight: normal;
+    text-align: center;
 }
-dl.score-chart dt {
-    grid-column: 1;
-    text-align: left;
+.scoreboard .-subscore {
+    grid-column: span 2;
+    color: #f4f4f4;
 }
-dl.score-chart dd {
-    grid-column: 2;
+.scoreboard .-level-score {
+    grid-column: span 3;
+}
+.scoreboard .-improvement {
+    grid-column: span 3;
+}
+.scoreboard .-improvement.--same h4 {
+    color: hsl(240, 50%, 60%);
+}
+.scoreboard .-improvement.--same p {
+    color: hsl(240, 50%, 80%);
+}
+.scoreboard .-improvement.--worse h4 {
+    color: hsl(330, 50%, 60%);
+}
+.scoreboard .-improvement.--worse p {
+    color: hsl(330, 50%, 80%);
+}
+.scoreboard .-improvement.--better h4 {
+    color: hsl(210, 50%, 60%);
+}
+.scoreboard .-improvement.--better p {
+    color: hsl(210, 50%, 80%);
+}
+.scoreboard .-total-score {
+    grid-column: span 3;
+    color: hsl(45, 50%, 75%);
+}
+.scoreboard h4 {
+    font-size: 0.833em;
+    color: hsl(220, 10%, 80%);
+}
+.scoreboard .-total-score h4 {
+    color: hsl(30, 50%, 60%);
+}
+.scoreboard p {
     margin: 0;
-    text-align: right;
 }
-dl.score-chart .-component {
-    color: #d8d8d8;
-}
-dl.score-chart .-sum {
-    border-top: 1px solid white;
-}
-dl.score-chart .-total {
-    color: hsl(40, 75%, 80%);
-}
-dl.score-chart .-star {
-    position: absolute;
+.scoreboard .-total-score p {
+    font-size: 1.333em;
 }
 
+.player-level-number {
+    grid-area: number;
+    /* This is only for portrait, and mostly to fill space */
+    display: none;
+    line-height: 1;
+}
 .chips {
     grid-area: chips;
 }
@@ -1358,17 +1626,17 @@ dl.score-chart .-star {
 .chips,
 .time,
 .bonus {
-    font-size: calc(var(--tile-height) * var(--scale) / 3);
+    font-size: calc(var(--tile-height) * var(--scale) * 3/4);
     display: flex;
     align-items: center;
-    gap: 0.5em;
+    gap: 0.25em;
 }
 .chips h3,
 .time h3,
 .bonus h3 {
     flex: 0;
     order: 2;
-    font-size: 1.5em;
+    font-size: 0.75em;
     line-height: 1;
     color: hsl(220, 20%, 80%);
 }
@@ -1376,7 +1644,6 @@ dl.score-chart .-star {
 .time output,
 .bonus output {
     flex: 1;
-    font-size: 2em;
     min-width: 2em;
     min-height: 1em;
     line-height: 1;
@@ -1408,28 +1675,25 @@ dl.score-chart .-star {
     }
 }
 .chips output.--done,
-.time output.--frozen {
+.time output.--frozen,
+.bonus output {
     color: hsl(220, 10%, 30%);
 }
-.bonus output {
+#player.--bonus-visible .bonus output {
     color: #e2c9ff;
 }
-#player .bonus {
-    visibility: hidden;
-    display: flex;
-}
-#player.--bonus-visible .bonus {
-    visibility: initial;
-}
 .player-rules {
     font-size: calc(var(--tile-height) * var(--scale) / 4);
     grid-area: rules;
     align-self: end;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
     color: hsl(220, 20%, 80%);
 }
 .player-rules p {
     display: none;
-    margin: 0.25em 0;
+    margin: 0;
 }
 #player.--hide-logic .player-rules #player-rule-logic-hidden {
     display: revert;
@@ -1516,17 +1780,25 @@ dl.score-chart .-star {
     #player-game-area {
         /* Rearrange the grid to be vertical */
         grid:
-            "level      level   level"
-            "inventory  rules   chips" calc((var(--tile-height) * var(--scale) * (2 - 1/6)) / 3)
-            "inventory  rules   time" calc((var(--tile-height) * var(--scale) * (2 - 1/6)) / 3)
-            "inventory  rules   bonus" calc((var(--tile-height) * var(--scale) * (2 - 1/6)) / 3)
-            / min-content min-content 1fr
+            "inventory   chips   chips   time" min-content
+            "inventory   rules   bonus   bonus" min-content
+            "level       level   level   level" min-content
+            / min-content 1fr 1fr 2fr
         ;
-        row-gap: calc(var(--tile-height) * var(--scale) / 6);
+    }
+    .player-level-number {
+        /* TODO this makes us too big on my phone, damn */
+        /*display: initial;*/
+    }
+    .chips,
+    .time,
+    .bonus {
+        /* These numbers need to be sliiightly smaller */
+        font-size: calc(var(--tile-height) * var(--scale) * 2/3);
     }
     #player .inventory {
-        /* stick me in the center right */
-        place-self: center end;
+        /* stick me in the center left */
+        place-self: center start;
     }
     #player-game-area > .player-hint-wrapper {
         /* Overlay hints on the inventory area */
@@ -1536,17 +1808,38 @@ dl.score-chart .-star {
         font-size: calc(var(--tile-height) * var(--scale) / 2.5);
     }
     #player-game-area > .player-hint-wrapper > .player-hint {
-        padding: 0.25em 0.33em;
+        padding: 0.33em 0.5em;
         line-height: 1.33;
     }
     .player-rules {
         align-self: center;
+        flex-direction: row;
     }
     .player-rules p span {
         /* There's only room for the icons, since there's no dedicated hint space */
         display: none;
     }
 }
+@media ((orientation: portrait) and (max-width: 800px)) or ((orientation: landscape) and (max-height: 600px)) {
+    /* Overlay is a bit different on what I assume is a touchscreen */
+    .player-overlay-message[data-reason='waiting'] > p {
+        /* Hide the "Ready!" and controls, since there's a menu */
+        display: none;
+    }
+    .mobile-pause-menu {
+        display: flex;
+    }
+}
+@media (orientation: portrait) and (max-width: 800px) {
+    #player-game-area {
+        padding: 0;
+        background: none;
+        box-shadow: none;
+    }
+    .level {
+        outline: 1px solid black;
+    }
+}
 
 /* Debug stuff */
 body.--debug #player-debug {