localStorage fallback
localStorage fallback

file:a/README.md -> file:b/README.md
--- a/README.md
+++ b/README.md
@@ -15,6 +15,3 @@
 ## License
 2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt)
 
-## Donations
-I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like you'd like to buy me a coffee, you can me donate at the `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i` BTC address. Thank you very much!
-

file:a/favicon.ico (deleted)
 Binary files a/favicon.ico and /dev/null differ
file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -5,6 +5,15 @@
   <title>2048</title>
 
   <link href="style/main.css" rel="stylesheet" type="text/css">
+
+  <script src="js/hammer.min.js"></script>
+  <script src="js/keyboard_input_manager.js"></script>
+  <script src="js/html_actuator.js"></script>
+  <script src="js/grid.js"></script>
+  <script src="js/tile.js"></script>
+  <script src="js/local_score_manager.js"></script>
+  <script src="js/game_manager.js"></script>
+  <script src="js/application.js"></script>
 
   <meta name="HandheldFriendly" content="True">
   <meta name="MobileOptimized" content="320">
@@ -14,7 +23,10 @@
   <div class="container">
     <div class="heading">
       <h1 class="title">2048</h1>
-      <div class="score-container">0</div>
+      <div class="scores-container">
+        <div class="score-container">0</div>
+        <div class="best-container">0</div>
+      </div>
     </div>
     <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
 
@@ -63,17 +75,9 @@
     </p>
     <hr>
     <p>
-    Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
+      Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio.</a>
     </p>
   </div>
-  
-  <script src="js/hammer.min.js"></script>
-  <script src="js/keyboard_input_manager.js"></script>
-  <script src="js/html_actuator.js"></script>
-  <script src="js/grid.js"></script>
-  <script src="js/tile.js"></script>
-  <script src="js/game_manager.js"></script>
-  <script src="js/application.js"></script>
 </body>
 </html>
 

--- a/js/application.js
+++ b/js/application.js
@@ -1,5 +1,7 @@
-// Wait till the browser is ready to render the game (avoids glitches)
-window.requestAnimationFrame(function () {
-  var manager = new GameManager(4, KeyboardInputManager, HTMLActuator);
+document.addEventListener("DOMContentLoaded", function () {
+  // Wait till the browser is ready to render the game (avoids glitches)
+  window.requestAnimationFrame(function () {
+    new GameManager(4, KeyboardInputManager, HTMLActuator, LocalScoreManager);
+  });
 });
 

--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -1,6 +1,7 @@
-function GameManager(size, InputManager, Actuator) {
+function GameManager(size, InputManager, Actuator, ScoreManager) {
   this.size         = size; // Size of the grid
   this.inputManager = new InputManager;
+  this.scoreManager = new ScoreManager;
   this.actuator     = new Actuator;
 
   this.startTiles   = 2;
@@ -51,11 +52,17 @@
 
 // Sends the updated grid to the actuator
 GameManager.prototype.actuate = function () {
+  if (this.scoreManager.get() < this.score) {
+    this.scoreManager.set(this.score);
+  }
+
   this.actuator.actuate(this.grid, {
-    score: this.score,
-    over:  this.over,
-    won:   this.won
+    score:     this.score,
+    over:      this.over,
+    won:       this.won,
+    bestScore: this.scoreManager.get()
   });
+
 };
 
 // Save all tile positions and remove merger info

--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -1,6 +1,7 @@
 function HTMLActuator() {
   this.tileContainer    = document.getElementsByClassName("tile-container")[0];
   this.scoreContainer   = document.getElementsByClassName("score-container")[0];
+  this.bestContainer    = document.getElementsByClassName("best-container")[0];
   this.messageContainer = document.getElementsByClassName("game-message")[0];
 
   this.score = 0;
@@ -21,6 +22,7 @@
     });
 
     self.updateScore(metadata.score);
+    self.updateBestScore(metadata.bestScore);
 
     if (metadata.over) self.message(false); // You lose
     if (metadata.won) self.message(true); // You win!
@@ -103,11 +105,17 @@
   }
 };
 
+HTMLActuator.prototype.updateBestScore = function (bestScore) {
+  this.bestContainer.textContent = bestScore;
+};
+
 HTMLActuator.prototype.message = function (won) {
   var type    = won ? "game-won" : "game-over";
-  var message = won ? "You win!" : "Game over!"
+  var message = won ? "You win!" : "Game over!";
 
-  // if (ga) ga("send", "event", "game", "end", type, this.score);
+  if (typeof ga !== "undefined") {
+    ga("send", "event", "game", "end", type, this.score);
+  }
 
   this.messageContainer.classList.add(type);
   this.messageContainer.getElementsByTagName("p")[0].textContent = message;

--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -35,7 +35,7 @@
   };
 
   document.addEventListener("keydown", function (event) {
-    var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
+    var modifiers = event.altKey && event.ctrlKey && event.metaKey &&
                     event.shiftKey;
     var mapped    = map[event.which];
 

--- /dev/null
+++ b/js/local_score_manager.js
@@ -1,1 +1,32 @@
+window.fakeStorage = {
+  _data       : {},
+  setItem     : function (id, val) {
+    console.log('set');
+    return this._data[id] = String(val);
+  },
+  getItem     : function (id) {
+    return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
+  },
+  removeItem  : function (id) { return delete this._data[id]; },
+  clear       : function () { return this._data = {}; }
+};
 
+function LocalScoreManager() {
+  var localSupported = !!window.localStorage;
+  this.key = 'bestScore';
+  this.storage =  localSupported ? window.localStorage : window.fakeStorage;
+}
+
+LocalScoreManager.prototype.get = function () {
+  var score = this.storage.getItem(this.key);
+  if (typeof score === "undefined" || score === null) {
+    score = 0;
+  }
+  return score;
+};
+
+LocalScoreManager.prototype.set = function (score) {
+  this.storage.setItem(this.key, score);
+};
+
+

--- a/style/helpers.scss
+++ b/style/helpers.scss
@@ -54,10 +54,3 @@
   -moz-animation-fill-mode: #{$str};
 }
 
-// Media queries
-@mixin smaller($width) {
-  @media screen and (max-width: $width) {
-    @content;
-  }
-}
-

--- a/style/main.css
+++ b/style/main.css
@@ -49,9 +49,12 @@
     top: -50px;
     opacity: 0; } }
 
-.score-container {
+.scores-container {
+  float: right; }
+
+.score-container, .best-container {
   position: relative;
-  float: right;
+  display: inline-block;
   background: #bbada0;
   padding: 15px 25px;
   font-size: 25px;
@@ -60,19 +63,19 @@
   font-weight: bold;
   border-radius: 3px;
   color: white;
-  margin-top: 8px; }
-  .score-container:after {
+  margin-top: 8px;
+  text-align: center; }
+  .score-container:after, .best-container:after {
     position: absolute;
     width: 100%;
     top: 10px;
     left: 0;
-    content: "Score";
     text-transform: uppercase;
     font-size: 13px;
     line-height: 13px;
     text-align: center;
     color: #eee4da; }
-  .score-container .score-addition {
+  .score-container .score-addition, .best-container .score-addition {
     position: absolute;
     right: 30px;
     color: red;
@@ -85,6 +88,12 @@
     -moz-animation: move-up 600ms ease-in;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both; }
+
+.score-container:after {
+  content: "Score"; }
+
+.best-container:after {
+  content: "Best"; }
 
 p {
   margin-top: 0;
@@ -213,85 +222,84 @@
   z-index: 2; }
 
 .tile {
+  background: red;
   width: 106.25px;
   height: 106.25px;
-  line-height: 116.25px; }
-  .tile.tile-position-1-1 {
-    position: absolute;
-    left: 0px;
-    top: 0px; }
-  .tile.tile-position-1-2 {
-    position: absolute;
-    left: 0px;
-    top: 121px; }
-  .tile.tile-position-1-3 {
-    position: absolute;
-    left: 0px;
-    top: 243px; }
-  .tile.tile-position-1-4 {
-    position: absolute;
-    left: 0px;
-    top: 364px; }
-  .tile.tile-position-2-1 {
-    position: absolute;
-    left: 121px;
-    top: 0px; }
-  .tile.tile-position-2-2 {
-    position: absolute;
-    left: 121px;
-    top: 121px; }
-  .tile.tile-position-2-3 {
-    position: absolute;
-    left: 121px;
-    top: 243px; }
-  .tile.tile-position-2-4 {
-    position: absolute;
-    left: 121px;
-    top: 364px; }
-  .tile.tile-position-3-1 {
-    position: absolute;
-    left: 243px;
-    top: 0px; }
-  .tile.tile-position-3-2 {
-    position: absolute;
-    left: 243px;
-    top: 121px; }
-  .tile.tile-position-3-3 {
-    position: absolute;
-    left: 243px;
-    top: 243px; }
-  .tile.tile-position-3-4 {
-    position: absolute;
-    left: 243px;
-    top: 364px; }
-  .tile.tile-position-4-1 {
-    position: absolute;
-    left: 364px;
-    top: 0px; }
-  .tile.tile-position-4-2 {
-    position: absolute;
-    left: 364px;
-    top: 121px; }
-  .tile.tile-position-4-3 {
-    position: absolute;
-    left: 364px;
-    top: 243px; }
-  .tile.tile-position-4-4 {
-    position: absolute;
-    left: 364px;
-    top: 364px; }
-
-.tile {
   border-radius: 3px;
   background: #eee4da;
   text-align: center;
+  line-height: 116.25px;
+  font-size: 55px;
   font-weight: bold;
   z-index: 10;
-  font-size: 55px;
   -webkit-transition: 100ms ease-in-out;
   -moz-transition: 100ms ease-in-out;
   -webkit-transition-property: top, left;
   -moz-transition-property: top, left; }
+  .tile.tile-position-1-1 {
+    position: absolute;
+    left: 0px;
+    top: 0px; }
+  .tile.tile-position-1-2 {
+    position: absolute;
+    left: 0px;
+    top: 121px; }
+  .tile.tile-position-1-3 {
+    position: absolute;
+    left: 0px;
+    top: 243px; }
+  .tile.tile-position-1-4 {
+    position: absolute;
+    left: 0px;
+    top: 364px; }
+  .tile.tile-position-2-1 {
+    position: absolute;
+    left: 121px;
+    top: 0px; }
+  .tile.tile-position-2-2 {
+    position: absolute;
+    left: 121px;
+    top: 121px; }
+  .tile.tile-position-2-3 {
+    position: absolute;
+    left: 121px;
+    top: 243px; }
+  .tile.tile-position-2-4 {
+    position: absolute;
+    left: 121px;
+    top: 364px; }
+  .tile.tile-position-3-1 {
+    position: absolute;
+    left: 243px;
+    top: 0px; }
+  .tile.tile-position-3-2 {
+    position: absolute;
+    left: 243px;
+    top: 121px; }
+  .tile.tile-position-3-3 {
+    position: absolute;
+    left: 243px;
+    top: 243px; }
+  .tile.tile-position-3-4 {
+    position: absolute;
+    left: 243px;
+    top: 364px; }
+  .tile.tile-position-4-1 {
+    position: absolute;
+    left: 364px;
+    top: 0px; }
+  .tile.tile-position-4-2 {
+    position: absolute;
+    left: 364px;
+    top: 121px; }
+  .tile.tile-position-4-3 {
+    position: absolute;
+    left: 364px;
+    top: 243px; }
+  .tile.tile-position-4-4 {
+    position: absolute;
+    left: 364px;
+    top: 364px; }
   .tile.tile-2 {
     background: #eee4da;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
@@ -315,41 +323,26 @@
     background: #edcf72;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
     font-size: 45px; }
-    @media screen and (max-width: 480px) {
-      .tile.tile-128 {
-        font-size: 25px; } }
   .tile.tile-256 {
     color: #f9f6f2;
     background: #edcc61;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
     font-size: 45px; }
-    @media screen and (max-width: 480px) {
-      .tile.tile-256 {
-        font-size: 25px; } }
   .tile.tile-512 {
     color: #f9f6f2;
     background: #edc850;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
     font-size: 45px; }
-    @media screen and (max-width: 480px) {
-      .tile.tile-512 {
-        font-size: 25px; } }
   .tile.tile-1024 {
     color: #f9f6f2;
     background: #edc53f;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
     font-size: 35px; }
-    @media screen and (max-width: 480px) {
-      .tile.tile-1024 {
-        font-size: 15px; } }
   .tile.tile-2048 {
     color: #f9f6f2;
     background: #edc22e;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
     font-size: 35px; }
-    @media screen and (max-width: 480px) {
-      .tile.tile-2048 {
-        font-size: 15px; } }
 
 @-webkit-keyframes appear {
   0% {
@@ -442,188 +435,3 @@
 .game-explanation {
   margin-top: 50px; }
 
-@media screen and (max-width: 480px) {
-  html, body {
-    font-size: 15px; }
-
-  body {
-    margin: 20px 0;
-    padding: 0 20px; }
-
-  h1.title {
-    font-size: 50px; }
-
-  .container {
-    width: 280px;
-    margin: 0 auto; }
-
-  .score-container {
-    margin-top: 0; }
-
-  .heading {
-    margin-bottom: 10px; }
-
-  .game-container {
-    margin-top: 40px;
-    position: relative;
-    padding: 10px;
-    cursor: default;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    background: #bbada0;
-    border-radius: 6px;
-    width: 280px;
-    height: 280px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-    .game-container .game-message {
-      display: none;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: rgba(238, 228, 218, 0.5);
-      z-index: 100;
-      text-align: center;
-      -webkit-animation: fade-in 800ms ease 1200ms;
-      -moz-animation: fade-in 800ms ease 1200ms;
-      -webkit-animation-fill-mode: both;
-      -moz-animation-fill-mode: both; }
-      .game-container .game-message p {
-        font-size: 60px;
-        font-weight: bold;
-        height: 60px;
-        line-height: 60px;
-        margin-top: 222px; }
-      .game-container .game-message .lower {
-        display: block;
-        margin-top: 59px; }
-      .game-container .game-message a {
-        display: inline-block;
-        background: #8f7a66;
-        border-radius: 3px;
-        padding: 0 20px;
-        text-decoration: none;
-        color: #f9f6f2;
-        height: 40px;
-        line-height: 42px;
-        margin-left: 9px; }
-      .game-container .game-message.game-won {
-        background: rgba(237, 194, 46, 0.5);
-        color: #f9f6f2; }
-      .game-container .game-message.game-won, .game-container .game-message.game-over {
-        display: block; }
-
-  .grid-container {
-    position: absolute;
-    z-index: 1; }
-
-  .grid-row {
-    margin-bottom: 10px; }
-    .grid-row:last-child {
-      margin-bottom: 0; }
-    .grid-row:after {
-      content: "";
-      display: block;
-      clear: both; }
-
-  .grid-cell {
-    width: 57.5px;
-    height: 57.5px;
-    margin-right: 10px;
-    float: left;
-    border-radius: 3px;
-    background: rgba(238, 228, 218, 0.35); }
-    .grid-cell:last-child {
-      margin-right: 0; }
-
-  .tile-container {
-    position: absolute;
-    z-index: 2; }
-
-  .tile {
-    width: 57.5px;
-    height: 57.5px;
-    line-height: 67.5px; }
-    .tile.tile-position-1-1 {
-      position: absolute;
-      left: 0px;
-      top: 0px; }
-    .tile.tile-position-1-2 {
-      position: absolute;
-      left: 0px;
-      top: 68px; }
-    .tile.tile-position-1-3 {
-      position: absolute;
-      left: 0px;
-      top: 135px; }
-    .tile.tile-position-1-4 {
-      position: absolute;
-      left: 0px;
-      top: 203px; }
-    .tile.tile-position-2-1 {
-      position: absolute;
-      left: 68px;
-      top: 0px; }
-    .tile.tile-position-2-2 {
-      position: absolute;
-      left: 68px;
-      top: 68px; }
-    .tile.tile-position-2-3 {
-      position: absolute;
-      left: 68px;
-      top: 135px; }
-    .tile.tile-position-2-4 {
-      position: absolute;
-      left: 68px;
-      top: 203px; }
-    .tile.tile-position-3-1 {
-      position: absolute;
-      left: 135px;
-      top: 0px; }
-    .tile.tile-position-3-2 {
-      position: absolute;
-      left: 135px;
-      top: 68px; }
-    .tile.tile-position-3-3 {
-      position: absolute;
-      left: 135px;
-      top: 135px; }
-    .tile.tile-position-3-4 {
-      position: absolute;
-      left: 135px;
-      top: 203px; }
-    .tile.tile-position-4-1 {
-      position: absolute;
-      left: 203px;
-      top: 0px; }
-    .tile.tile-position-4-2 {
-      position: absolute;
-      left: 203px;
-      top: 68px; }
-    .tile.tile-position-4-3 {
-      position: absolute;
-      left: 203px;
-      top: 135px; }
-    .tile.tile-position-4-4 {
-      position: absolute;
-      left: 203px;
-      top: 203px; }
-
-  .game-container {
-    margin-top: 20px; }
-
-  .tile {
-    font-size: 35px; }
-
-  .game-message p {
-    font-size: 30px !important;
-    height: 30px !important;
-    line-height: 30px !important;
-    margin-top: 90px !important; }
-  .game-message .lower {
-    margin-top: 30px !important; } }
-

--- a/style/main.scss
+++ b/style/main.scss
@@ -58,11 +58,15 @@
   }
 }
 
-.score-container {
+.scores-container {
+  float: right;
+}
+
+.score-container, .best-container {
   $height: 25px;
 
   position: relative;
-  float: right;
+  display: inline-block;
   background: $game-container-background;
   padding: 15px 25px;
   font-size: $height;
@@ -72,13 +76,13 @@
   border-radius: 3px;
   color: white;
   margin-top: 8px;
+  text-align: center;
 
   &:after {
     position: absolute;
     width: 100%;
     top: 10px;
     left: 0;
-    content: "Score";
     text-transform: uppercase;
     font-size: 13px;
     line-height: 13px;
@@ -100,6 +104,14 @@
   }
 }
 
+.score-container:after {
+  content: "Score";
+}
+
+.best-container:after {
+  content: "Best"
+}
+
 p {
   margin-top: 0;
   margin-bottom: 10px;
@@ -141,153 +153,144 @@
   }
 }
 
-// Game field mixin used to render CSS at different width
-@mixin game-field {
-  .game-container {
-    margin-top: 40px;
-    position: relative;
-    padding: $grid-spacing;
-
-    cursor: default;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-
-    background: $game-container-background;
-    border-radius: $tile-border-radius * 2;
-    width: $field-width;
-    height: $field-width;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-
-    .game-message {
-      display: none;
-
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: rgba($tile-color, .5);
-      z-index: 100;
-
-      text-align: center;
-
-      p {
-        font-size: 60px;
-        font-weight: bold;
-        height: 60px;
-        line-height: 60px;
-        margin-top: 222px;
-        // height: $field-width;
-        // line-height: $field-width;
-      }
-
-      .lower {
-        display: block;
-        margin-top: 59px;
-      }
-
-      a {
-        display: inline-block;
-        background: darken($game-container-background, 20%);
-        border-radius: 3px;
-        padding: 0 20px;
-        text-decoration: none;
-        color: $bright-text-color;
-        height: 40px;
-        line-height: 42px;
-        margin-left: 9px;
-        // margin-top: 59px;
-      }
-
-      @include animation(fade-in 800ms ease $transition-speed * 12);
-      @include animation-fill-mode(both);
-
-      &.game-won {
-        background: rgba($tile-gold-color, .5);
-        color: $bright-text-color;
-      }
-
-      &.game-won, &.game-over {
-        display: block;
-      }
-    }
-  }
-
-  .grid-container {
+.game-container {
+  margin-top: 40px;
+  position: relative;
+  padding: $grid-spacing;
+
+  cursor: default;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  background: $game-container-background;
+  border-radius: $tile-border-radius * 2;
+  width: $field-width;
+  height: $field-width;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  .game-message {
+    display: none;
+
     position: absolute;
-    z-index: 1;
-  }
-
-  .grid-row {
-    margin-bottom: $grid-spacing;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    &:after {
-      content: "";
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba($tile-color, .5);
+    z-index: 100;
+
+    text-align: center;
+
+    p {
+      font-size: 60px;
+      font-weight: bold;
+      height: 60px;
+      line-height: 60px;
+      margin-top: 222px;
+      // height: $field-width;
+      // line-height: $field-width;
+    }
+
+    .lower {
       display: block;
-      clear: both;
-    }
-  }
-
-  .grid-cell {
-    width: $tile-size;
-    height: $tile-size;
-    margin-right: $grid-spacing;
-    float: left;
-
-    border-radius: $tile-border-radius;
-
-    background: rgba($tile-color, .35);
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  .tile-container {
-    position: absolute;
-    z-index: 2;
-  }
-
-  .tile {
-    width: $tile-size;
-    height: $tile-size;
-    line-height: $tile-size + 10px;
-
-    // Build position classes
-    @for $x from 1 through $grid-row-cells {
-      @for $y from 1 through $grid-row-cells {
-        &.tile-position-#{$x}-#{$y} {
-          position: absolute;
-          left: round(($tile-size + $grid-spacing) * ($x - 1));
-          top: round(($tile-size + $grid-spacing) * ($y - 1));
-        }
-      }
-    }
-  }
-}
-
-// End of game-field mixin
-@include game-field;
+      margin-top: 59px;
+    }
+
+    a {
+      display: inline-block;
+      background: darken($game-container-background, 20%);
+      border-radius: 3px;
+      padding: 0 20px;
+      text-decoration: none;
+      color: $bright-text-color;
+      height: 40px;
+      line-height: 42px;
+      margin-left: 9px;
+      // margin-top: 59px;
+    }
+
+    @include animation(fade-in 800ms ease $transition-speed * 12);
+    @include animation-fill-mode(both);
+
+    &.game-won {
+      background: rgba($tile-gold-color, .5);
+      color: $bright-text-color;
+    }
+
+    &.game-won, &.game-over {
+      display: block;
+    }
+  }
+}
+
+.grid-container {
+  position: absolute;
+  z-index: 1;
+}
+
+.grid-row {
+  margin-bottom: $grid-spacing;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}
+
+.grid-cell {
+  width: $tile-size;
+  height: $tile-size;
+  margin-right: $grid-spacing;
+  float: left;
+
+  border-radius: $tile-border-radius;
+
+  background: rgba($tile-color, .35);
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.tile-container {
+  position: absolute;
+  z-index: 2;
+}
 
 .tile {
+  background: red;
+  width: $tile-size;
+  height: $tile-size;
   border-radius: $tile-border-radius;
 
   background: $tile-color;
   text-align: center;
+  line-height: $tile-size + 10px;
+  font-size: 55px;
   font-weight: bold;
   z-index: 10;
 
-  font-size: 55px;
-
   @include transition($transition-speed ease-in-out);
   @include transition-property(top, left);
+
+  // Build position classes
+  @for $x from 1 through $grid-row-cells {
+    @for $y from 1 through $grid-row-cells {
+      &.tile-position-#{$x}-#{$y} {
+        position: absolute;
+        left: round(($tile-size + $grid-spacing) * ($x - 1));
+        top: round(($tile-size + $grid-spacing) * ($y - 1));
+      }
+    }
+  }
 
   $base: 2;
   $exponent: 1;
@@ -342,17 +345,8 @@
       // Adjust font size for bigger numbers
       @if $power >= 100 and $power < 1000 {
         font-size: 45px;
-
-        // Media queries placed here to avoid carrying over the rest of the logic
-        @include smaller(480px) {
-          font-size: 25px;
-        }
       } @else if $power >= 1000 {
         font-size: 35px;
-
-        @include smaller(480px) {
-          font-size: 15px;
-        }
       }
     }
 
@@ -410,63 +404,3 @@
   margin-top: 50px;
 }
 
-@include smaller(480px) {
-  // Redefine variables for smaller screens
-  $field-width: 280px;
-  $grid-spacing: 10px;
-  $grid-row-cells: 4;
-  $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
-  $tile-border-radius: 3px;
-
-  html, body {
-    font-size: 15px;
-  }
-
-  body {
-    margin: 20px 0;
-    padding: 0 20px;
-  }
-
-  h1.title {
-    font-size: 50px;
-  }
-
-  .container {
-    width: $field-width;
-    margin: 0 auto;
-  }
-
-  .score-container {
-    margin-top: 0;
-  }
-
-  .heading {
-    margin-bottom: 10px;
-  }
-
-  // Render the game field at the right width
-  @include game-field;
-
-  .game-container {
-    margin-top: 20px;
-  }
-
-  // Rest of the font-size adjustments in the tile class
-  .tile {
-    font-size: 35px;
-  }
-
-  .game-message {
-    p {
-      font-size: 30px !important;
-      height: 30px !important;
-      line-height: 30px !important;
-      margin-top: 90px !important;
-    }
-
-    .lower {
-      margin-top: 30px !important;
-    }
-  }
-}
-

comments