diff --git a/css/main.css b/css/main.css
index 917b8b5..fbc96a7 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,26 +1,26 @@
 body {
     background: transparent;
-    overflow: hidden;
     font-family: sans-serif;
     height: 100vh;
+    overflow: hidden;
 }
 
 #debug {
-    position: absolute;
-    top: 0;
-    display: none;
-    width: 100vw;
-    font-size: 60px;
     color: red;
+    display: none;
+    font-size: 60px;
     line-height: 80px;
+    position: absolute;
     text-align: center;
+    top: 0;
+    width: 100vw;
 }
 
-.no-gamepad {
-    width: 100vw;
+.instructions {
     height: 100vh;
-    text-align: center;
     line-height: 2em;
+    text-align: center;
+    width: 100vw;
 }
 
 @keyframes press-button {
@@ -28,7 +28,7 @@ body {
         fill: #898989;
     }
 
-    5% {
+    7% {
         fill: #898989;
     }
 
@@ -36,7 +36,7 @@ body {
         fill: #00e530;
     }
 
-    15% {
+    17% {
         fill: #00e530;
     }
 
@@ -44,7 +44,7 @@ body {
         fill: #898989;
     }
 
-    25% {
+    27% {
         fill: #898989;
     }
 
@@ -52,7 +52,7 @@ body {
         fill: #00e530;
     }
 
-    35% {
+    37% {
         fill: #00e530;
     }
 
@@ -65,36 +65,36 @@ body {
     }
 }
 
-.no-gamepad svg {
+.instructions svg {
+    height: 90%;
+    left: 50%;
+    max-width: 600px;
     position: absolute;
     top: 50%;
-    left: 50%;
     transform: translate(-50%, -50%);
     width: 90%;
-    max-width: 600px;
-    height: 90%;
 }
 
-.no-gamepad #a-button path {
+.instructions #a-button path {
     animation: press-button 5s linear infinite;
 }
 
 #gamepad {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
 
-#help {
+#help-popout {
     background: whitesmoke;
-    color: black;
     border: 1px solid rgba(0, 0, 0, 0.2);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     box-sizing: border-box;
+    color: black;
     display: none;
     font-size: 0.9em;
     left: 50%;
@@ -106,43 +106,43 @@ body {
     transform: translate(-50%, -50%);
 }
 
-#help.active {
+#help-popout.active {
     display: block;
 }
 
-#help h2 {
-    margin-top: 0;
+#help-popout h2 {
     margin-bottom: 1.5em;
+    margin-top: 0;
 }
 
-#help h3 {
+#help-popout h3 {
     margin-top: 1.5em;
 }
 
-#help p:last-child {
+#help-popout p:last-child {
     margin-bottom: 0;
 }
 
-#help table {
+#help-popout table {
     border-collapse: collapse;
     border-spacing: 0;
     max-width: 100%;
     width: 100%;
 }
 
-#help th {
+#help-popout th {
     text-align: left;
 }
 
-#help th,
-#help td {
+#help-popout th,
+#help-popout td {
     border-top: 1px solid #ddd;
     line-height: 1.42857143;
     padding: 8px;
     vertical-align: top;
 }
 
-#help table>thead>tr>th {
+#help-popout table>thead>tr>th {
     border-bottom: 2px solid #ddd;
     border-top: 0;
     vertical-align: bottom;
@@ -176,23 +176,23 @@ kbd[title],
 
 kbd,
 kbd.dark {
-    background: rgb(80, 80, 80);
-    background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
-    background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
-    color: rgb(250, 250, 250);
-    text-shadow: -1px -1px 0 rgb(70, 70, 70);
     -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
     -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
+    background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
+    background: rgb(80, 80, 80);
     box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
+    color: rgb(250, 250, 250);
+    text-shadow: -1px -1px 0 rgb(70, 70, 70);
 }
 
 kbd.light {
-    background: rgb(250, 250, 250);
-    background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
-    background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
-    color: rgb(50, 50, 50);
-    text-shadow: 0 0 2px rgb(255, 255, 255);
     -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
     -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
+    background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
+    background: rgb(250, 250, 250);
     box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
+    color: rgb(50, 50, 50);
+    text-shadow: 0 0 2px rgb(255, 255, 255);
 }
diff --git a/index.html b/index.html
index d636e8a..8cd5168 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 </head>
 
 <body>
-	<div class="no-gamepad">
+	<div class="instructions">
 		<p>Press <kbd>H</kbd> to read instructions.</p>
 		<svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve"
 			xmlns="http://www.w3.org/2000/svg">
@@ -80,7 +80,7 @@
 		</svg>
 	</div>
 	<div id="gamepad"></div>
-	<div id="help">
+	<div id="help-popout">
 		<h2>Help</h2>
 
 		<h3>Instructions</h3>
diff --git a/js/gamepad.js b/js/gamepad.js
index 14cdf9d..9be57f9 100644
--- a/js/gamepad.js
+++ b/js/gamepad.js
@@ -11,8 +11,8 @@ class Gamepad {
         // cached DOM references
         this.$body = $("body");
         this.$gamepad = $("#gamepad");
-        this.$nogamepad = $(".no-gamepad");
-        this.$help = $("#help");
+        this.$instructions = $(".instructions");
+        this.$helpPopout = $("#help-popout");
         this.$gamepadList = $("#gamepad-list");
 
         this.backgroundColors = [
@@ -167,7 +167,7 @@ class Gamepad {
         // cancel the queued display of the instructions animation, if any
         window.clearTimeout(this.helpTimeout);
         // hide the instructions animation
-        this.$nogamepad.show();
+        this.$instructions.show();
 
         // enqueue a delayed display of the instructions animation
         this.hideInstructions();
@@ -181,12 +181,12 @@ class Gamepad {
     hideInstructions(hideNow = false) {
         // hide the message right away if needed
         if (hideNow) {
-            this.$nogamepad.hide();
+            this.$instructions.hide();
         }
 
         // hide instructions animation if no gamepad is active after X ms
         this.helpTimeout = window.setTimeout(() => {
-            this.$nogamepad.fadeOut();
+            this.$instructions.fadeOut();
         }, this.helpDelay);
     }
 
@@ -400,7 +400,7 @@ class Gamepad {
 
         // hide the help messages
         this.hideInstructions(true);
-        this.$help.removeClass("active");
+        this.$helpPopout.removeClass("active");
 
         // update local references
         this.index = index;
@@ -476,9 +476,6 @@ class Gamepad {
             this.$gamepad.empty();
         }
 
-        // update navigation hash
-        this.updateSettings({ player: null });
-
         // enqueue a display of the instructions animation
         this.displayInstructions();
         this.debug = false;
@@ -547,6 +544,8 @@ class Gamepad {
 
         this.updateButtons(activeGamepad);
         this.updateAxes(activeGamepad);
+
+        this.activeGamepad = activeGamepad;
     }
 
     /**
@@ -557,6 +556,10 @@ class Gamepad {
     updateButtons(gamepad) {
         // update the buttons
         for (let index = 0; index < gamepad.buttons.length; index++) {
+            if (this.activeGamepad && this.activeGamepad.buttons[index].value == gamepad.buttons[index].value) {
+                return;
+            }
+
             // find the DOM element
             const $button = this.mapping.buttons[index];
             if (!$button) {
@@ -586,6 +589,10 @@ class Gamepad {
     updateAxes(gamepad) {
         // update the axes
         for (let index = 0; index < gamepad.axes.length; index++) {
+            if (this.activeGamepad && this.activeGamepad.axes[index].value == gamepad.axes[index].value) {
+                return;
+            }
+
             // find the DOM element
             const $axis = this.mapping.axes[index];
             if (!$axis) {
@@ -803,7 +810,7 @@ class Gamepad {
      * Toggles the on-screen help message
      */
     toggleHelp() {
-        this.$help.toggleClass("active");
+        this.$helpPopout.toggleClass("active");
 
         // save statistics
         if (!!window.ga) {
@@ -811,7 +818,7 @@ class Gamepad {
                 eventCategory: "Gamepad",
                 eventAction: "toggle-help",
                 eventLabel: "Toggle Help",
-                eventValue: this.$help.is("active"),
+                eventValue: this.$helpPopout.is("active"),
             });
         }
     }