diff --git a/TODO.md b/TODO.md
index 4cd187f..af952f6 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,4 +1,24 @@
+* Add leaderboard
+* Add tutorial (a few lines and images of coffins, tombstones, etc)
+* Different input scheme, because on iPhones long-pressing always
+  selects text (or is there a --safari-user-select?)
+* Sync data between devices (maybe it's possible with some Webxdc
+  functions)
 * Saving the game data to a file, so high scores, unlocked levels
   etc. can be shared across updates. Or, someone unfair can cheat.
 * Randomly rotate, tint, etc., cells to add variety
 * Refractor the code
+* Record new sounds, add sound variations. Required sounds:
+  * Breaking wood, at least 3 sounds
+  * Digging dirt, at least 3 sounds
+  * A "muahaha" sound on discovering a vampire
+  * Bat sounds for bats flying out of coffins
+  * (Maybe) a sound of marble, like the one when you open up a tomb
+* Revamp the graphics, add more consistency. New spirtes required:
+  * Wood chips (when removing the lid off coffin)
+  * Bats (preferably animated with two frames to simulate flying)
+  * Some better, less copyright-infringing background (though this one
+    is heavily modified already)
+  * Main menu icon
+  * Restart icon
+* Analyze the UI, think about potential improvements
diff --git a/game.js b/game.js
index c3f85e7..b8810b6 100644
--- a/game.js
+++ b/game.js
@@ -39,10 +39,9 @@ function restart_game() {
     initial_mines_count = 10 + current_level;
     stop_timing();
     seconds_elapsed = 0;
+    document.body.classList.remove("main-menu", "popup-victory", "popup-failure");
+    document.body.classList.add ("game-view");
     $("#time").innerText = get_seconds_readable(seconds_elapsed);
-    $("#finished-popup").style = "display:none;";
-    $("#restart").style = "display:block";
-    $("#newgame").style = "display:block";
 }
 
 function start_or_continue_game(level) {
@@ -176,8 +175,13 @@ function count_neighbouring_mines(cell) {
 
 function reveal_mines(cell) {
     let n_mines = count_neighbouring_mines(cell);
-    cell.classList.remove("unknown");
-    cell.classList.add("known");
+
+    if (cell.classList.contains("unknown")) {
+	reveal_cell_cosmetic(cell);
+	cell.classList.remove("unknown");
+	cell.classList.add("known");
+    }
+   
     if (n_mines == 0) {
         get_neighbours(cell).forEach(function(c) {
             if (c.classList.contains("unknown")) {
@@ -187,13 +191,10 @@ function reveal_mines(cell) {
                 c.classList.remove("flagged");
             }
         });
-    }
-    if (n_mines > 0 && !cell.classList.contains("mine")) {
+    } else if (n_mines > 0 && !cell.classList.contains("mine")) {
         cell.innerText = "" + n_mines;
         cell.classList.add("n" + n_mines);
     }
-
-    reveal_cell_cosmetic(cell);
 }
 
 function reveal_cell_cosmetic(cell) {
@@ -210,15 +211,13 @@ function reveal_cell_cosmetic(cell) {
 
 // Shows the game won/over popup.
 function show_popup(victory) {
-    $("#finished-popup").style = "display:flex;";
-    $("#restart").style = "display:none";
-    $("#newgame").style = "display:none";
-    if (!victory) {
-	$("#nextlevel").style = "display:none";
-	$("#message").innerText = "You've lost!"
-    } else {
-	$("#nextlevel").style = "display:block";
+    document.body.classList.remove("popup-victory", "popup-failure");
+    if (victory) {
+	document.body.classList.add("popup-victory");
 	$("#message").innerText = "You've won!"
+    } else {
+	document.body.classList.add("popup-failure");
+	$("#message").innerText = "You've lost!"
     }
 }
 
@@ -257,8 +256,6 @@ function lose_game() {
     stop_timing();
     show_popup(false);
     $$("#minefield div").forEach(function(cell) {
-        cell.classList.remove("unknown");
-        cell.classList.add("known");
         reveal_mines(cell);
         if (cell.classList.contains("exploded")) {
             cell.innerText = "";
diff --git a/index.html b/index.html
index f4e8156..52cdb84 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <script src="webxdc.js"></script>
     <link rel="stylesheet" href="style.css">
   </head>
-  <body>
+  <body class="main-menu">
     <canvas id="particle-canvas"></canvas>
     <div id="main-menu">
       <span id="game-title">Gravedigger</span>
@@ -12,7 +12,7 @@
       <div id="button-list">
       </div>
     </div>
-    <div style="display:none;" id="game-view">
+    <div id="game-view">
       <div id="top-bar">
 	<span>Time</span>
 	<span class="data" id="time">00:00</span>
@@ -21,7 +21,7 @@
 	<button id="restart" onclick="restart_game()">Restart</button>
 	<button id="newgame" onclick="location.reload()">Main menu</button>
       </div>
-      <div style="display:none;" id="finished-popup">
+      <div id="finished-popup">
 	<span id="message">You've won/lost!</span>
 	<button id="mainmenu" onclick="location.reload()">Main menu</button>
 	<button id="playagain" onclick="restart_game()">Play again</button>
diff --git a/res/music1.sunvox b/res/music1.sunvox
new file mode 100644
index 0000000..a9ab394
Binary files /dev/null and b/res/music1.sunvox differ
diff --git a/style.css b/style.css
index d15bcaf..8ab2b30 100644
--- a/style.css
+++ b/style.css
@@ -18,15 +18,41 @@ body {
     image-rendering: crisp-edges;
     image-rendering: pixelated;
     
-    background: linear-gradient(
-          rgba(0, 0, 0, 0.7), 
-          rgba(0, 0, 0, 0.7)
-        ), url("res/gravedigger/background.png");
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("res/gravedigger/background.png");
     background-size: cover;
     
     font-family: serif;
 }
 
+/* Main menu state visibility. */
+body.main-menu {
+    #main-menu { display: flex; }
+    #game-view { display: none; }
+}
+
+/* Game view state visibility. */
+body.game-view {
+    #main-menu { display: none; }
+    #game-view { display: flex; }
+}
+
+/* Victory & failure popups. */
+body.popup-victory, body.popup-failure {
+    #finished-popup { display: flex; }
+    #restart, #newgame { display: none; }
+    
+/*     #minefield {
+        padding-top: calc(var(--top-bar-height) * 4 + 4em);
+    } */
+    
+    #top-bar {
+        background: black;
+    }
+}
+
+body.popup-failure { #nextlevel { display: none; } }
+body.popup-victory { #nextlevel { display: block; } }
+
 #particle-canvas {
     position: absolute;
     pointer-events: none;
@@ -80,12 +106,21 @@ span#subtitle {
 
 #top-bar .data { flex: 1; }
 
+#bottom-fade {
+    bottom: 0;
+    position: fixed;
+    width: 100vw;
+    height: var(--fade-height);
+    background-image: linear-gradient(transparent, black);
+    pointer-events: none;
+}
+
 #finished-popup {
     position: fixed;
     width: 100vw;
     margin-top: var(--top-bar-height);
-    background-image: linear-gradient(transparent, black, black);
-    display: flex;
+    background-image: linear-gradient(black, black, transparent);
+    display: none;
     flex-flow: column;
     align-items: center;
     color: white;
@@ -109,10 +144,10 @@ span#subtitle {
     user-select: none;
     grid-template-columns: repeat(8, 12.5%);
     padding: 2em;
-/*     Padding for the top info bar. */
-    padding-top: calc(var(--top-bar-height) + 2em);
-/*     Padding for the bottom fade. */
-    padding-bottom: calc(var(--fade-height) + 2em);
+    /*     Padding for the top info bar. */
+    padding-top: calc(var(--fade-height) + 2em);
+    /*     Padding for the bottom fade. */
+/*     padding-bottom: calc(var(--fade-height) + 2em); */
 }
 
 /* Cells. */
@@ -129,15 +164,6 @@ span#subtitle {
     align-items: center;
 }
 
-#bottom-fade {
-    position: fixed;
-    bottom: 0;
-    width: 100vw;
-    height: var(--fade-height);
-    background-image: linear-gradient(transparent, black);
-    pointer-events: none;
-}
-
 .unknown, .known { background-size: cover; }
 .unknown { background-image: url("./res/gravedigger/unknown-1.png"); }
 .known { background-image: url("./res/gravedigger/known.png"); }