add WASD controls (closes #10)
add WASD controls (closes #10)

file:b/.jshintrc (new)
  {
  "esnext": true,
  "indent": 2,
  "maxlen": 80,
  "freeze": true,
  "camelcase": true,
  "unused": true,
  "eqnull": true,
  "proto": true,
  "supernew": true,
  "noyield": true,
  "evil": true,
  "node": true,
  "boss": true,
  "expr": true,
  "loopfunc": true,
  "white": true,
  "maxdepth": 4
  }
 
file:b/CONTRIBUTING.md (new)
  ## Contributing
  Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specifically made branch and request to pull on `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
 
file:b/LICENSE.txt (new)
  The MIT License (MIT)
 
  Copyright (c) 2014 Gabriele Cirulli
 
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:
 
  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.
 
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 
file:a/README.md -> file:b/README.md
# 2048 # 2048
A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](saming.fr/p/2048/) (also a clone). A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](http://saming.fr/p/2048/) (also a clone).
   
Made just for fun. Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/)
   
[![Screenshot](http://pictures.gabrielecirulli.com/2048-20140305-170629.png)](http://pictures.gabrielecirulli.com/2048-20140305-170629.png) [![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)
   
  That screenshot is fake by, the way. I never reached 2048 :smile:
   
  ## Contributing
  Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specifically made branch and request to pull on `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
   
  You can find the same information in the [contributing guide.](https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md)
   
  ## 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:b/favicon.ico (new)
 Binary files /dev/null and b/favicon.ico differ
file:a/index.html -> file:b/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>2048</title> <title>2048</title>
   
<link href="style/main.css" rel="stylesheet" type="text/css"> <link href="style/main.css" rel="stylesheet" type="text/css">
  <link rel="shortcut icon" href="favicon.ico">
   
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>2048</h1> <div class="heading">
  <h1 class="title">2048</h1>
  <div class="score-container">0</div>
  </div>
  <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
   
<div class="game-container"> <div class="game-container">
  <div class="game-message">
  <p></p>
  <div class="lower">
  <a class="retry-button">Try again</a>
  </div>
  </div>
   
<div class="grid-container"> <div class="grid-container">
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
</div> </div>
   
<div class="tile-container"> <div class="tile-container">
<div class="tile tile-2 tile-position-1-1">  
2  
</div>  
<div class="tile tile-4 tile-position-2-1">  
4  
</div>  
<div class="tile tile-8 tile-position-3-1">  
8  
</div>  
<div class="tile tile-16 tile-position-4-1">  
16  
</div>  
<div class="tile tile-32 tile-position-1-2">  
32  
</div>  
<div class="tile tile-64 tile-position-2-2">  
64  
</div>  
<div class="tile tile-128 tile-position-3-2">  
128  
</div>  
<div class="tile tile-256 tile-position-4-2">  
256  
</div>  
<div class="tile tile-512 tile-position-1-3">  
512  
</div>  
<div class="tile tile-1024 tile-position-2-3">  
1024  
</div>  
<div class="tile tile-2048 tile-position-3-3">  
2048  
</div>  
</div> </div>
</div> </div>
   
  <p class="game-explanation">
  <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
  </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>
  </p>
</div> </div>
   
  <script src="js/animframe_polyfill.js"></script>
  <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> </body>
</html> </html>
   
  (function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  window.cancelAnimationFrame =
  window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  }
 
  if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = function(callback, element) {
  var currTime = new Date().getTime();
  var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  var id = window.setTimeout(function() { callback(currTime + timeToCall); },
  timeToCall);
  lastTime = currTime + timeToCall;
  return id;
  };
  }
 
  if (!window.cancelAnimationFrame) {
  window.cancelAnimationFrame = function(id) {
  clearTimeout(id);
  };
  }
  }());
 
file:b/js/application.js (new)
  // Wait till the browser is ready to render the game (avoids glitches)
  window.requestAnimationFrame(function () {
  var manager = new GameManager(4, KeyboardInputManager, HTMLActuator);
  });
 
  function GameManager(size, InputManager, Actuator) {
  this.size = size; // Size of the grid
  this.inputManager = new InputManager;
  this.actuator = new Actuator;
 
  this.startTiles = 2;
 
  this.inputManager.on("move", this.move.bind(this));
  this.inputManager.on("restart", this.restart.bind(this));
 
  this.setup();
  }
 
  // Restart the game
  GameManager.prototype.restart = function () {
  this.actuator.restart();
  this.setup();
  };
 
  // Set up the game
  GameManager.prototype.setup = function () {
  this.grid = new Grid(this.size);
 
  this.score = 0;
  this.over = false;
  this.won = false;
 
  // Add the initial tiles
  this.addStartTiles();
 
  // Update the actuator
  this.actuate();
  };
 
  // Set up the initial tiles to start the game with
  GameManager.prototype.addStartTiles = function () {
  for (var i = 0; i < this.startTiles; i++) {
  this.addRandomTile();
  }
  };
 
  // Adds a tile in a random position
  GameManager.prototype.addRandomTile = function () {
  if (this.grid.cellsAvailable()) {
  var value = Math.random() < 0.9 ? 2 : 4;
  var tile = new Tile(this.grid.randomAvailableCell(), value);
 
  this.grid.insertTile(tile);
  }
  };
 
  // Sends the updated grid to the actuator
  GameManager.prototype.actuate = function () {
  this.actuator.actuate(this.grid, {
  score: this.score,
  over: this.over,
  won: this.won
  });
  };
 
  // Save all tile positions and remove merger info
  GameManager.prototype.prepareTiles = function () {
  this.grid.eachCell(function (x, y, tile) {
  if (tile) {
  tile.mergedFrom = null;
  tile.savePosition();
  }
  });
  };
 
  // Move a tile and its representation
  GameManager.prototype.moveTile = function (tile, cell) {
  this.grid.cells[tile.x][tile.y] = null;
  this.grid.cells[cell.x][cell.y] = tile;
  tile.updatePosition(cell);
  };
 
  // Move tiles on the grid in the specified direction
  GameManager.prototype.move = function (direction) {
  // 0: up, 1: right, 2:down, 3: left
  var self = this;
 
  if (this.over || this.won) return; // Don't do anything if the game's over
 
  var cell, tile;
 
  var vector = this.getVector(direction);
  var traversals = this.buildTraversals(vector);
  var moved = false;
 
  // Save the current tile positions and remove merger information
  this.prepareTiles();
 
  // Traverse the grid in the right direction and move tiles
  traversals.x.forEach(function (x) {
  traversals.y.forEach(function (y) {
  cell = { x: x, y: y };
  tile = self.grid.cellContent(cell);
 
  if (tile) {
  var positions = self.findFarthestPosition(cell, vector);
  var next = self.grid.cellContent(positions.next);
 
  // Only one merger per row traversal?
  if (next && next.value === tile.value && !next.mergedFrom) {
  var merged = new Tile(positions.next, tile.value * 2);
  merged.mergedFrom = [tile, next];
 
  self.grid.insertTile(merged);
  self.grid.removeTile(tile);
 
  // Converge the two tiles' positions
  tile.updatePosition(positions.next);
 
  // Update the score
  self.score += merged.value;
 
  // The mighty 2048 tile
  if (merged.value === 2048) self.won = true;
  } else {
  self.moveTile(tile, positions.farthest);
  }
 
  if (!self.positionsEqual(cell, tile)) {
  moved = true; // The tile moved from its original cell!
  }
  }
  });
  });
 
  if (moved) {
  this.addRandomTile();
 
  if (!this.movesAvailable()) {
  this.over = true; // Game over!
  }
 
  this.actuate();
  }
  };
 
  // Get the vector representing the chosen direction
  GameManager.prototype.getVector = function (direction) {
  // Vectors representing tile movement
  var map = {
  0: { x: 0, y: -1 }, // up
  1: { x: 1, y: 0 }, // right
  2: { x: 0, y: 1 }, // down
  3: { x: -1, y: 0 } // left
  };
 
  return map[direction];
  };
 
  // Build a list of positions to traverse in the right order
  GameManager.prototype.buildTraversals = function (vector) {
  var traversals = { x: [], y: [] };
 
  for (var pos = 0; pos < this.size; pos++) {
  traversals.x.push(pos);
  traversals.y.push(pos);
  }
 
  // Always traverse from the farthest cell in the chosen direction
  if (vector.x === 1) traversals.x = traversals.x.reverse();
  if (vector.y === 1) traversals.y = traversals.y.reverse();
 
  return traversals;
  };
 
  GameManager.prototype.findFarthestPosition = function (cell, vector) {
  var previous;
 
  // Progress towards the vector direction until an obstacle is found
  do {
  previous = cell;
  cell = { x: previous.x + vector.x, y: previous.y + vector.y };
  } while (this.grid.withinBounds(cell) &&
  this.grid.cellAvailable(cell));
 
  return {
  farthest: previous,
  next: cell // Used to check if a merge is required
  };
  };
 
  GameManager.prototype.movesAvailable = function () {
  return this.grid.cellsAvailable() || this.tileMatchesAvailable();
  };
 
  // Check for available matches between tiles (more expensive check)
  GameManager.prototype.tileMatchesAvailable = function () {
  var self = this;
 
  var tile;
 
  for (var x = 0; x < this.size; x++) {
  for (var y = 0; y < this.size; y++) {
  tile = this.grid.cellContent({ x: x, y: y });
 
  if (tile) {
  for (var direction = 0; direction < 4; direction++) {
  var vector = self.getVector(direction);
  var cell = { x: x + vector.x, y: y + vector.y };
 
  var other = self.grid.cellContent(cell);
  if (other) {
  }
 
  if (other && other.value === tile.value) {
  return true; // These two tiles can be merged
  }
  }
  }
  }
  }
 
  return false;
  };
 
  GameManager.prototype.positionsEqual = function (first, second) {
  return first.x === second.x && first.y === second.y;
  };
 
file:b/js/grid.js (new)
  function Grid(size) {
  this.size = size;
 
  this.cells = [];
 
  this.build();
  }
 
  // Build a grid of the specified size
  Grid.prototype.build = function () {
  for (var x = 0; x < this.size; x++) {
  var row = this.cells[x] = [];
 
  for (var y = 0; y < this.size; y++) {
  row.push(null);
  }
  }
  };
 
  // Find the first available random position
  Grid.prototype.randomAvailableCell = function () {
  var cells = this.availableCells();
 
  if (cells.length) {
  return cells[Math.floor(Math.random() * cells.length)];
  }
  };
 
  Grid.prototype.availableCells = function () {
  var cells = [];
 
  this.eachCell(function (x, y, tile) {
  if (!tile) {
  cells.push({ x: x, y: y });
  }
  });
 
  return cells;
  };
 
  // Call callback for every cell
  Grid.prototype.eachCell = function (callback) {
  for (var x = 0; x < this.size; x++) {
  for (var y = 0; y < this.size; y++) {
  callback(x, y, this.cells[x][y]);
  }
  }
  };
 
  // Check if there are any cells available
  Grid.prototype.cellsAvailable = function () {
  return !!this.availableCells().length;
  };
 
  // Check if the specified cell is taken
  Grid.prototype.cellAvailable = function (cell) {
  return !this.cellOccupied(cell);
  };
 
  Grid.prototype.cellOccupied = function (cell) {
  return !!this.cellContent(cell);
  };
 
  Grid.prototype.cellContent = function (cell) {
  if (this.withinBounds(cell)) {
  return this.cells[cell.x][cell.y];
  } else {
  return null;
  }
  };
 
  // Inserts a tile at its position
  Grid.prototype.insertTile = function (tile) {
  this.cells[tile.x][tile.y] = tile;
  };
 
  Grid.prototype.removeTile = function (tile) {
  this.cells[tile.x][tile.y] = null;
  };
 
  Grid.prototype.withinBounds = function (position) {
  return position.x >= 0 && position.x < this.size &&
  position.y >= 0 && position.y < this.size;
  };
 
file:b/js/hammer.min.js (new)
  /*! Hammer.JS - v1.0.6 - 2014-01-02
  * http://eightmedia.github.com/hammer.js
  *
  * Copyright (c) 2014 Jorik Tangelder <j.tangelder@gmail.com>;
  * Licensed under the MIT license */
 
 
  !function(a,b){"use strict";function c(){d.READY||(d.event.determineEventTypes(),d.utils.each(d.gestures,function(a){d.detection.register(a)}),d.event.onTouch(d.DOCUMENT,d.EVENT_MOVE,d.detection.detect),d.event.onTouch(d.DOCUMENT,d.EVENT_END,d.detection.detect),d.READY=!0)}var d=function(a,b){return new d.Instance(a,b||{})};d.defaults={stop_browser_behavior:{userSelect:"none",touchAction:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}},d.HAS_POINTEREVENTS=a.navigator.pointerEnabled||a.navigator.msPointerEnabled,d.HAS_TOUCHEVENTS="ontouchstart"in a,d.MOBILE_REGEX=/mobile|tablet|ip(ad|hone|od)|android|silk/i,d.NO_MOUSEEVENTS=d.HAS_TOUCHEVENTS&&a.navigator.userAgent.match(d.MOBILE_REGEX),d.EVENT_TYPES={},d.DIRECTION_DOWN="down",d.DIRECTION_LEFT="left",d.DIRECTION_UP="up",d.DIRECTION_RIGHT="right",d.POINTER_MOUSE="mouse",d.POINTER_TOUCH="touch",d.POINTER_PEN="pen",d.EVENT_START="start",d.EVENT_MOVE="move",d.EVENT_END="end",d.DOCUMENT=a.document,d.plugins=d.plugins||{},d.gestures=d.gestures||{},d.READY=!1,d.utils={extend:function(a,c,d){for(var e in c)a[e]!==b&&d||(a[e]=c[e]);return a},each:function(a,c,d){var e,f;if("forEach"in a)a.forEach(c,d);else if(a.length!==b){for(e=0,f=a.length;f>e;e++)if(c.call(d,a[e],e,a)===!1)return}else for(e in a)if(a.hasOwnProperty(e)&&c.call(d,a[e],e,a)===!1)return},hasParent:function(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1},getCenter:function(a){var b=[],c=[];return d.utils.each(a,function(a){b.push("undefined"!=typeof a.clientX?a.clientX:a.pageX),c.push("undefined"!=typeof a.clientY?a.clientY:a.pageY)}),{pageX:(Math.min.apply(Math,b)+Math.max.apply(Math,b))/2,pageY:(Math.min.apply(Math,c)+Math.max.apply(Math,c))/2}},getVelocity:function(a,b,c){return{x:Math.abs(b/a)||0,y:Math.abs(c/a)||0}},getAngle:function(a,b){var c=b.pageY-a.pageY,d=b.pageX-a.pageX;return 180*Math.atan2(c,d)/Math.PI},getDirection:function(a,b){var c=Math.abs(a.pageX-b.pageX),e=Math.abs(a.pageY-b.pageY);return c>=e?a.pageX-b.pageX>0?d.DIRECTION_LEFT:d.DIRECTION_RIGHT:a.pageY-b.pageY>0?d.DIRECTION_UP:d.DIRECTION_DOWN},getDistance:function(a,b){var c=b.pageX-a.pageX,d=b.pageY-a.pageY;return Math.sqrt(c*c+d*d)},getScale:function(a,b){return a.length>=2&&b.length>=2?this.getDistance(b[0],b[1])/this.getDistance(a[0],a[1]):1},getRotation:function(a,b){return a.length>=2&&b.length>=2?this.getAngle(b[1],b[0])-this.getAngle(a[1],a[0]):0},isVertical:function(a){return a==d.DIRECTION_UP||a==d.DIRECTION_DOWN},stopDefaultBrowserBehavior:function(a,b){b&&a&&a.style&&(d.utils.each(["webkit","khtml","moz","Moz","ms","o",""],function(c){d.utils.each(b,function(b){c&&(b=c+b.substring(0,1).toUpperCase()+b.substring(1)),b in a.style&&(a.style[b]=b)})}),"none"==b.userSelect&&(a.onselectstart=function(){return!1}),"none"==b.userDrag&&(a.ondragstart=function(){return!1}))}},d.Instance=function(a,b){var e=this;return c(),this.element=a,this.enabled=!0,this.options=d.utils.extend(d.utils.extend({},d.defaults),b||{}),this.options.stop_browser_behavior&&d.utils.stopDefaultBrowserBehavior(this.element,this.options.stop_browser_behavior),d.event.onTouch(a,d.EVENT_START,function(a){e.enabled&&d.detection.startDetect(e,a)}),this},d.Instance.prototype={on:function(a,b){var c=a.split(" ");return d.utils.each(c,function(a){this.element.addEventListener(a,b,!1)},this),this},off:function(a,b){var c=a.split(" ");return d.utils.each(c,function(a){this.element.removeEventListener(a,b,!1)},this),this},trigger:function(a,b){b||(b={});var c=d.DOCUMENT.createEvent("Event");c.initEvent(a,!0,!0),c.gesture=b;var e=this.element;return d.utils.hasParent(b.target,e)&&(e=b.target),e.dispatchEvent(c),this},enable:function(a){return this.enabled=a,this}};var e=null,f=!1,g=!1;d.event={bindDom:function(a,b,c){var e=b.split(" ");d.utils.each(e,function(b){a.addEventListener(b,c,!1)})},onTouch:function(a,b,c){var h=this;this.bindDom(a,d.EVENT_TYPES[b],function(i){var j=i.type.toLowerCase();if(!j.match(/mouse/)||!g){j.match(/touch/)||j.match(/pointerdown/)||j.match(/mouse/)&&1===i.which?f=!0:j.match(/mouse/)&&!i.which&&(f=!1),j.match(/touch|pointer/)&&(g=!0);var k=0;f&&(d.HAS_POINTEREVENTS&&b!=d.EVENT_END?k=d.PointerEvent.updatePointer(b,i):j.match(/touch/)?k=i.touches.length:g||(k=j.match(/up/)?0:1),k>0&&b==d.EVENT_END?b=d.EVENT_MOVE:k||(b=d.EVENT_END),(k||null===e)&&(e=i),c.call(d.detection,h.collectEventData(a,b,h.getTouchList(e,b),i)),d.HAS_POINTEREVENTS&&b==d.EVENT_END&&(k=d.PointerEvent.updatePointer(b,i))),k||(e=null,f=!1,g=!1,d.PointerEvent.reset())}})},determineEventTypes:function(){var a;a=d.HAS_POINTEREVENTS?d.PointerEvent.getEvents():d.NO_MOUSEEVENTS?["touchstart","touchmove","touchend touchcancel"]:["touchstart mousedown","touchmove mousemove","touchend touchcancel mouseup"],d.EVENT_TYPES[d.EVENT_START]=a[0],d.EVENT_TYPES[d.EVENT_MOVE]=a[1],d.EVENT_TYPES[d.EVENT_END]=a[2]},getTouchList:function(a){return d.HAS_POINTEREVENTS?d.PointerEvent.getTouchList():a.touches?a.touches:(a.identifier=1,[a])},collectEventData:function(a,b,c,e){var f=d.POINTER_TOUCH;return(e.type.match(/mouse/)||d.PointerEvent.matchType(d.POINTER_MOUSE,e))&&(f=d.POINTER_MOUSE),{center:d.utils.getCenter(c),timeStamp:(new Date).getTime(),target:e.target,touches:c,eventType:b,pointerType:f,srcEvent:e,preventDefault:function(){this.srcEvent.preventManipulation&&this.srcEvent.preventManipulation(),this.srcEvent.preventDefault&&this.srcEvent.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()},stopDetect:function(){return d.detection.stopDetect()}}}},d.PointerEvent={pointers:{},getTouchList:function(){var a=this,b=[];return d.utils.each(a.pointers,function(a){b.push(a)}),b},updatePointer:function(a,b){return a==d.EVENT_END?this.pointers={}:(b.identifier=b.pointerId,this.pointers[b.pointerId]=b),Object.keys(this.pointers).length},matchType:function(a,b){if(!b.pointerType)return!1;var c=b.pointerType,e={};return e[d.POINTER_MOUSE]=c===b.MSPOINTER_TYPE_MOUSE||c===d.POINTER_MOUSE,e[d.POINTER_TOUCH]=c===b.MSPOINTER_TYPE_TOUCH||c===d.POINTER_TOUCH,e[d.POINTER_PEN]=c===b.MSPOINTER_TYPE_PEN||c===d.POINTER_PEN,e[a]},getEvents:function(){return["pointerdown MSPointerDown","pointermove MSPointerMove","pointerup pointercancel MSPointerUp MSPointerCancel"]},reset:function(){this.pointers={}}},d.detection={gestures:[],current:null,previous:null,stopped:!1,startDetect:function(a,b){this.current||(this.stopped=!1,this.current={inst:a,startEvent:d.utils.extend({},b),lastEvent:!1,name:""},this.detect(b))},detect:function(a){if(this.current&&!this.stopped){a=this.extendEventData(a);var b=this.current.inst.options;return d.utils.each(this.gestures,function(c){return this.stopped||b[c.name]===!1||c.handler.call(c,a,this.current.inst)!==!1?void 0:(this.stopDetect(),!1)},this),this.current&&(this.current.lastEvent=a),a.eventType==d.EVENT_END&&!a.touches.length-1&&this.stopDetect(),a}},stopDetect:function(){this.previous=d.utils.extend({},this.current),this.current=null,this.stopped=!0},extendEventData:function(a){var b=this.current.startEvent;!b||a.touches.length==b.touches.length&&a.touches!==b.touches||(b.touches=[],d.utils.each(a.touches,function(a){b.touches.push(d.utils.extend({},a))}));var c,e,f=a.timeStamp-b.timeStamp,g=a.center.pageX-b.center.pageX,h=a.center.pageY-b.center.pageY,i=d.utils.getVelocity(f,g,h);return"end"===a.eventType?(c=this.current.lastEvent&&this.current.lastEvent.interimAngle,e=this.current.lastEvent&&this.current.lastEvent.interimDirection):(c=this.current.lastEvent&&d.utils.getAngle(this.current.lastEvent.center,a.center),e=this.current.lastEvent&&d.utils.getDirection(this.current.lastEvent.center,a.center)),d.utils.extend(a,{deltaTime:f,deltaX:g,deltaY:h,velocityX:i.x,velocityY:i.y,distance:d.utils.getDistance(b.center,a.center),angle:d.utils.getAngle(b.center,a.center),interimAngle:c,direction:d.utils.getDirection(b.center,a.center),interimDirection:e,scale:d.utils.getScale(b.touches,a.touches),rotation:d.utils.getRotation(b.touches,a.touches),startEvent:b}),a},register:function(a){var c=a.defaults||{};return c[a.name]===b&&(c[a.name]=!0),d.utils.extend(d.defaults,c,!0),a.index=a.index||1e3,this.gestures.push(a),this.gestures.sort(function(a,b){return a.index<b.index?-1:a.index>b.index?1:0}),this.gestures}},d.gestures.Drag={name:"drag",index:50,defaults:{drag_min_distance:10,correct_for_drag_min_distance:!0,drag_max_touches:1,drag_block_horizontal:!1,drag_block_vertical:!1,drag_lock_to_axis:!1,drag_lock_min_distance:25},triggered:!1,handler:function(a,b){if(d.detection.current.name!=this.name&&this.triggered)return b.trigger(this.name+"end",a),this.triggered=!1,void 0;if(!(b.options.drag_max_touches>0&&a.touches.length>b.options.drag_max_touches))switch(a.eventType){case d.EVENT_START:this.triggered=!1;break;case d.EVENT_MOVE:if(a.distance<b.options.drag_min_distance&&d.detection.current.name!=this.name)return;if(d.detection.current.name!=this.name&&(d.detection.current.name=this.name,b.options.correct_for_drag_min_distance&&a.distance>0)){var c=Math.abs(b.options.drag_min_distance/a.distance);d.detection.current.startEvent.center.pageX+=a.deltaX*c,d.detection.current.startEvent.center.pageY+=a.deltaY*c,a=d.detection.extendEventData(a)}(d.detection.current.lastEvent.drag_locked_to_axis||b.options.drag_lock_to_axis&&b.options.drag_lock_min_distance<=a.distance)&&(a.drag_locked_to_axis=!0);var e=d.detection.current.lastEvent.direction;a.drag_locked_to_axis&&e!==a.direction&&(a.direction=d.utils.isVertical(e)?a.deltaY<0?d.DIRECTION_UP:d.DIRECTION_DOWN:a.deltaX<0?d.DIRECTION_LEFT:d.DIRECTION_RIGHT),this.triggered||(b.trigger(this.name+"start",a),this.triggered=!0),b.trigger(this.name,a),b.trigger(this.name+a.direction,a),(b.options.drag_block_vertical&&d.utils.isVertical(a.direction)||b.options.drag_block_horizontal&&!d.utils.isVertical(a.direction))&&a.preventDefault();break;case d.EVENT_END:this.triggered&&b.trigger(this.name+"end",a),this.triggered=!1}}},d.gestures.Hold={name:"hold",index:10,defaults:{hold_timeout:500,hold_threshold:1},timer:null,handler:function(a,b){switch(a.eventType){case d.EVENT_START:clearTimeout(this.timer),d.detection.current.name=this.name,this.timer=setTimeout(function(){"hold"==d.detection.current.name&&b.trigger("hold",a)},b.options.hold_timeout);break;case d.EVENT_MOVE:a.distance>b.options.hold_threshold&&clearTimeout(this.timer);break;case d.EVENT_END:clearTimeout(this.timer)}}},d.gestures.Release={name:"release",index:1/0,handler:function(a,b){a.eventType==d.EVENT_END&&b.trigger(this.name,a)}},d.gestures.Swipe={name:"swipe",index:40,defaults:{swipe_min_touches:1,swipe_max_touches:1,swipe_velocity:.7},handler:function(a,b){if(a.eventType==d.EVENT_END){if(b.options.swipe_max_touches>0&&a.touches.length<b.options.swipe_min_touches&&a.touches.length>b.options.swipe_max_touches)return;(a.velocityX>b.options.swipe_velocity||a.velocityY>b.options.swipe_velocity)&&(b.trigger(this.name,a),b.trigger(this.name+a.direction,a))}}},d.gestures.Tap={name:"tap",index:100,defaults:{tap_max_touchtime:250,tap_max_distance:10,tap_always:!0,doubletap_distance:20,doubletap_interval:300},handler:function(a,b){if(a.eventType==d.EVENT_END&&"touchcancel"!=a.srcEvent.type){var c=d.detection.previous,e=!1;if(a.deltaTime>b.options.tap_max_touchtime||a.distance>b.options.tap_max_distance)return;c&&"tap"==c.name&&a.timeStamp-c.lastEvent.timeStamp<b.options.doubletap_interval&&a.distance<b.options.doubletap_distance&&(b.trigger("doubletap",a),e=!0),(!e||b.options.tap_always)&&(d.detection.current.name="tap",b.trigger(d.detection.current.name,a))}}},d.gestures.Touch={name:"touch",index:-1/0,defaults:{prevent_default:!1,prevent_mouseevents:!1},handler:function(a,b){return b.options.prevent_mouseevents&&a.pointerType==d.POINTER_MOUSE?(a.stopDetect(),void 0):(b.options.prevent_default&&a.preventDefault(),a.eventType==d.EVENT_START&&b.trigger(this.name,a),void 0)}},d.gestures.Transform={name:"transform",index:45,defaults:{transform_min_scale:.01,transform_min_rotation:1,transform_always_block:!1},triggered:!1,handler:function(a,b){if(d.detection.current.name!=this.name&&this.triggered)return b.trigger(this.name+"end",a),this.triggered=!1,void 0;if(!(a.touches.length<2))switch(b.options.transform_always_block&&a.preventDefault(),a.eventType){case d.EVENT_START:this.triggered=!1;break;case d.EVENT_MOVE:var c=Math.abs(1-a.scale),e=Math.abs(a.rotation);if(c<b.options.transform_min_scale&&e<b.options.transform_min_rotation)return;d.detection.current.name=this.name,this.triggered||(b.trigger(this.name+"start",a),this.triggered=!0),b.trigger(this.name,a),e>b.options.transform_min_rotation&&b.trigger("rotate",a),c>b.options.transform_min_scale&&(b.trigger("pinch",a),b.trigger("pinch"+(a.scale<1?"in":"out"),a));break;case d.EVENT_END:this.triggered&&b.trigger(this.name+"end",a),this.triggered=!1}}},"function"==typeof define&&"object"==typeof define.amd&&define.amd?define(function(){return d}):"object"==typeof module&&"object"==typeof module.exports?module.exports=d:a.Hammer=d}(this);
  //# sourceMappingURL=hammer.min.map
  function HTMLActuator() {
  this.tileContainer = document.getElementsByClassName("tile-container")[0];
  this.scoreContainer = document.getElementsByClassName("score-container")[0];
  this.messageContainer = document.getElementsByClassName("game-message")[0];
 
  this.score = 0;
  }
 
  HTMLActuator.prototype.actuate = function (grid, metadata) {
  var self = this;
 
  window.requestAnimationFrame(function () {
  self.clearContainer(self.tileContainer);
 
  grid.cells.forEach(function (column) {
  column.forEach(function (cell) {
  if (cell) {
  self.addTile(cell);
  }
  });
  });
 
  self.updateScore(metadata.score);
 
  if (metadata.over) self.message(false); // You lose
  if (metadata.won) self.message(true); // You win!
  });
  };
 
  HTMLActuator.prototype.restart = function () {
  this.clearMessage();
  };
 
  HTMLActuator.prototype.clearContainer = function (container) {
  while (container.firstChild) {
  container.removeChild(container.firstChild);
  }
  };
 
  HTMLActuator.prototype.addTile = function (tile) {
  var self = this;
 
  var element = document.createElement("div");
  var position = tile.previousPosition || { x: tile.x, y: tile.y };
  positionClass = this.positionClass(position);
 
  // We can't use classlist because it somehow glitches when replacing classes
  var classes = ["tile", "tile-" + tile.value, positionClass];
  this.applyClasses(element, classes);
 
  element.textContent = tile.value;
 
  if (tile.previousPosition) {
  // Make sure that the tile gets rendered in the previous position first
  window.requestAnimationFrame(function () {
  classes[2] = self.positionClass({ x: tile.x, y: tile.y });
  self.applyClasses(element, classes); // Update the position
  });
  } else if (tile.mergedFrom) {
  classes.push("tile-merged");
  this.applyClasses(element, classes);
 
  // Render the tiles that merged
  tile.mergedFrom.forEach(function (merged) {
  self.addTile(merged);
  });
  } else {
  classes.push("tile-new");
  this.applyClasses(element, classes);
  }
 
  // Put the tile on the board
  this.tileContainer.appendChild(element);
  };
 
  HTMLActuator.prototype.applyClasses = function (element, classes) {
  element.setAttribute("class", classes.join(" "));
  };
 
  HTMLActuator.prototype.normalizePosition = function (position) {
  return { x: position.x + 1, y: position.y + 1 };
  };
 
  HTMLActuator.prototype.positionClass = function (position) {
  position = this.normalizePosition(position);
  return "tile-position-" + position.x + "-" + position.y;
  };
 
  HTMLActuator.prototype.updateScore = function (score) {
  this.clearContainer(this.scoreContainer);
 
  var difference = score - this.score;
  this.score = score;
 
  this.scoreContainer.textContent = this.score;
 
  if (difference > 0) {
  var addition = document.createElement("div");
  addition.classList.add("score-addition");
  addition.textContent = "+" + difference;
 
  this.scoreContainer.appendChild(addition);
  }
  };
 
  HTMLActuator.prototype.message = function (won) {
  var type = won ? "game-won" : "game-over";
  var message = won ? "You win!" : "Game over!"
 
  // if (ga) ga("send", "event", "game", "end", type, this.score);
 
  this.messageContainer.classList.add(type);
  this.messageContainer.getElementsByTagName("p")[0].textContent = message;
  };
 
  HTMLActuator.prototype.clearMessage = function () {
  this.messageContainer.classList.remove("game-won", "game-over");
  };
 
  function KeyboardInputManager() {
  this.events = {};
 
  this.listen();
  }
 
  KeyboardInputManager.prototype.on = function (event, callback) {
  if (!this.events[event]) {
  this.events[event] = [];
  }
  this.events[event].push(callback);
  };
 
  KeyboardInputManager.prototype.emit = function (event, data) {
  var callbacks = this.events[event];
  if (callbacks) {
  callbacks.forEach(function (callback) {
  callback(data);
  });
  }
  };
 
  KeyboardInputManager.prototype.listen = function () {
  var self = this;
 
  var map = {
  38: 0, // Up
  39: 1, // Right
  40: 2, // Down
  37: 3, // Left
  75: 0, // vim keybindings
  76: 1,
  74: 2,
  72: 3,
  87: 0, // W
  68: 1, // D
  83: 2, // S
  65: 3 // A
  };
 
  document.addEventListener("keydown", function (event) {
  var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
  event.shiftKey;
  var mapped = map[event.which];
 
  if (!modifiers) {
  if (mapped !== undefined) {
  event.preventDefault();
  self.emit("move", mapped);
  }
 
  if (event.which === 32) self.restart.bind(self)(event);
  }
  });
 
  var retry = document.getElementsByClassName("retry-button")[0];
  retry.addEventListener("click", this.restart.bind(this));
 
  // Listen to swipe events
  var gestures = [Hammer.DIRECTION_UP, Hammer.DIRECTION_RIGHT,
  Hammer.DIRECTION_DOWN, Hammer.DIRECTION_LEFT];
 
  var gameContainer = document.getElementsByClassName("game-container")[0];
  var handler = Hammer(gameContainer, {
  drag_block_horizontal: true,
  drag_block_vertical: true
  });
 
  handler.on("swipe", function (event) {
  event.gesture.preventDefault();
  mapped = gestures.indexOf(event.gesture.direction);
 
  if (mapped !== -1) self.emit("move", mapped);
  });
  };
 
  KeyboardInputManager.prototype.restart = function (event) {
  event.preventDefault();
  this.emit("restart");
  };
 
file:b/js/tile.js (new)
  function Tile(position, value) {
  this.x = position.x;
  this.y = position.y;
  this.value = value || 2;
 
  this.previousPosition = null;
  this.mergedFrom = null; // Tracks tiles that merged together
  }
 
  Tile.prototype.savePosition = function () {
  this.previousPosition = { x: this.x, y: this.y };
  };
 
  Tile.prototype.updatePosition = function (position) {
  this.x = position.x;
  this.y = position.y;
  };
 
// Exponent // Exponent
// From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36 // From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36
   
@function exponent($base, $exponent) { @function exponent($base, $exponent) {
// reset value // reset value
$value: $base; $value: $base;
// positive intergers get multiplied // positive intergers get multiplied
@if $exponent > 1 { @if $exponent > 1 {
@for $i from 2 through $exponent { @for $i from 2 through $exponent {
$value: $value * $base; } } $value: $value * $base; } }
// negitive intergers get divided. A number divided by itself is 1 // negitive intergers get divided. A number divided by itself is 1
@if $exponent < 1 { @if $exponent < 1 {
@for $i from 0 through -$exponent { @for $i from 0 through -$exponent {
$value: $value / $base; } } $value: $value / $base; } }
// return the last value written // return the last value written
@return $value; @return $value;
} }
   
@function pow($base, $exponent) { @function pow($base, $exponent) {
@return exponent($base, $exponent); @return exponent($base, $exponent);
} }
   
// Transition mixins // Transition mixins
@mixin transition($args...) { @mixin transition($args...) {
-webkit-transition: $args; -webkit-transition: $args;
-moz-transition: $args; -moz-transition: $args;
} }
   
@mixin transition-property($args...) { @mixin transition-property($args...) {
-webkit-transition-property: $args; -webkit-transition-property: $args;
-moz-transition-property: $args; -moz-transition-property: $args;
} }
   
  // Keyframe animations
  @mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
  @content;
  }
  @-moz-keyframes $animation-name {
  @content;
  }
  @keyframes $animation-name {
  @content;
  }
  }
   
  @mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  }
   
  @mixin animation-fill-mode($str) {
  -webkit-animation-fill-mode: #{$str};
  -moz-animation-fill-mode: #{$str};
  }
   
  // Media queries
  @mixin smaller($width) {
  @media screen and (max-width: $width) {
  @content;
  }
  }
   
@import url(fonts/clear-sans.css); @import url(fonts/clear-sans.css);
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #faf8ef; background: #faf8ef;
color: #776e65; color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; } font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; }
   
body { body {
margin: 80px 0; } margin: 80px 0; }
   
h1 { .heading:after {
  content: "";
  display: block;
  clear: both; }
   
  h1.title {
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
margin: 0; } margin: 0;
  display: block;
  float: left; }
   
  @-webkit-keyframes move-up {
  0% {
  top: 25px;
  opacity: 1; }
   
  100% {
  top: -50px;
  opacity: 0; } }
   
  @-moz-keyframes move-up {
  0% {
  top: 25px;
  opacity: 1; }
   
  100% {
  top: -50px;
  opacity: 0; } }
   
  @keyframes move-up {
  0% {
  top: 25px;
  opacity: 1; }
   
  100% {
  top: -50px;
  opacity: 0; } }
   
  .score-container {
  position: relative;
  float: right;
  background: #bbada0;
  padding: 15px 25px;
  font-size: 25px;
  height: 25px;
  line-height: 47px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px; }
  .score-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 {
  position: absolute;
  right: 30px;
  color: red;
  font-size: 25px;
  line-height: 25px;
  font-weight: bold;
  color: rgba(119, 110, 101, 0.9);
  z-index: 100;
  -webkit-animation: move-up 600ms ease-in;
  -moz-animation: move-up 600ms ease-in;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both; }
   
  p {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.65; }
   
  a {
  color: #776e65;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer; }
   
  strong.important {
  text-transform: uppercase; }
   
  hr {
  border: none;
  border-bottom: 1px solid #d8d4d0;
  margin-top: 20px;
  margin-bottom: 30px; }
   
.container { .container {
width: 500px; width: 500px;
margin: 0 auto; } margin: 0 auto; }
   
  @-webkit-keyframes fade-in {
  0% {
  opacity: 0; }
   
  100% {
  opacity: 1; } }
   
  @-moz-keyframes fade-in {
  0% {
  opacity: 0; }
   
  100% {
  opacity: 1; } }
   
  @keyframes fade-in {
  0% {
  opacity: 0; }
   
  100% {
  opacity: 1; } }
   
  .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; }
   
.game-container { .game-container {
margin-top: 50px; margin-top: 40px;
position: relative; position: relative;
padding: 15px; padding: 15px;
cursor: default; cursor: default;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
background: #bbada0; background: #bbada0;
border-radius: 6px; border-radius: 6px;
width: 500px; width: 500px;
height: 500px; height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
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 {
  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 { .grid-container {
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
   
.grid-row { .grid-row {
margin-bottom: 15px; } margin-bottom: 15px; }
.grid-row:last-child { .grid-row:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.grid-row:after { .grid-row:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
.grid-cell { .grid-cell {
width: 106.25px; width: 106.25px;
height: 106.25px; height: 106.25px;
margin-right: 15px; margin-right: 15px;
float: left; float: left;
border-radius: 3px; border-radius: 3px;
background: rgba(238, 228, 218, 0.35); } background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child { .grid-cell:last-child {
margin-right: 0; } margin-right: 0; }
   
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
   
.tile { .tile {
background: red;  
width: 106.25px; width: 106.25px;
height: 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; border-radius: 3px;
background: #eee4da; background: #eee4da;
text-align: center; text-align: center;
line-height: 116.25px; font-weight: bold;
  z-index: 10;
font-size: 55px; font-size: 55px;
font-weight: bold; -webkit-transition: 100ms ease-in-out;
-webkit-transition: 200ms ease; -moz-transition: 100ms ease-in-out;
-moz-transition: 200ms ease;  
-webkit-transition-property: top, left; -webkit-transition-property: top, left;
-moz-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: 121.25px; }  
.tile.tile-position-1-3 {  
position: absolute;  
left: 0px;  
top: 242.5px; }  
.tile.tile-position-1-4 {  
position: absolute;  
left: 0px;  
top: 363.75px; }  
.tile.tile-position-2-1 {  
position: absolute;  
left: 121.25px;  
top: 0px; }  
.tile.tile-position-2-2 {  
position: absolute;  
left: 121.25px;  
top: 121.25px; }  
.tile.tile-position-2-3 {  
position: absolute;  
left: 121.25px;  
top: 242.5px; }  
.tile.tile-position-2-4 {  
position: absolute;  
left: 121.25px;  
top: 363.75px; }  
.tile.tile-position-3-1 {  
position: absolute;  
left: 242.5px;  
top: 0px; }  
.tile.tile-position-3-2 {  
position: absolute;  
left: 242.5px;  
top: 121.25px; }  
.tile.tile-position-3-3 {  
position: absolute;  
left: 242.5px;  
top: 242.5px; }  
.tile.tile-position-3-4 {  
position: absolute;  
left: 242.5px;  
top: 363.75px; }  
.tile.tile-position-4-1 {  
position: absolute;  
left: 363.75px;  
top: 0px; }  
.tile.tile-position-4-2 {  
position: absolute;  
left: 363.75px;  
top: 121.25px; }  
.tile.tile-position-4-3 {  
position: absolute;  
left: 363.75px;  
top: 242.5px; }  
.tile.tile-position-4-4 {  
position: absolute;  
left: 363.75px;  
top: 363.75px; }  
.tile.tile-2 { .tile.tile-2 {
background: #eee4da; background: #eee4da;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-4 { .tile.tile-4 {
background: #ede0c8; background: #ede0c8;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-8 { .tile.tile-8 {
background: #edddb7; color: #f9f6f2;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } background: #f2b179; }
.tile.tile-16 { .tile.tile-16 {
background: #edd9a6; color: #f9f6f2;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } background: #f59563; }
.tile.tile-32 { .tile.tile-32 {
background: #edd695; color: #f9f6f2;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.07937), inset 0 0 0 1px rgba(255, 255, 255, 0.04762); } background: #f67c5f; }
.tile.tile-64 { .tile.tile-64 {
background: #edd384; color: #f9f6f2;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.15873), inset 0 0 0 1px rgba(255, 255, 255, 0.09524); } background: #f65e3b; }
.tile.tile-128 { .tile.tile-128 {
  color: #f9f6f2;
background: #edcf72; 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); 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; } font-size: 45px; }
  @media screen and (max-width: 480px) {
  .tile.tile-128 {
  font-size: 25px; } }
.tile.tile-256 { .tile.tile-256 {
  color: #f9f6f2;
background: #edcc61; 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); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
color: #ede9e5;  
font-size: 45px; } font-size: 45px; }
  @media screen and (max-width: 480px) {
  .tile.tile-256 {
  font-size: 25px; } }
.tile.tile-512 { .tile.tile-512 {
  color: #f9f6f2;
background: #edc850; 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); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
color: #f9f6f2;  
font-size: 45px; } font-size: 45px; }
  @media screen and (max-width: 480px) {
  .tile.tile-512 {
  font-size: 25px; } }
.tile.tile-1024 { .tile.tile-1024 {
  color: #f9f6f2;
background: #edc53f; 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); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
color: #f9f6f2;  
font-size: 35px; } font-size: 35px; }
  @media screen and (max-width: 480px) {
  .tile.tile-1024 {
  font-size: 15px; } }
.tile.tile-2048 { .tile.tile-2048 {
  color: #f9f6f2;
background: #edc22e; 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); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
color: #f9f6f2;  
font-size: 35px; } font-size: 35px; }
  @media screen and (max-width: 480px) {
  .tile.tile-2048 {
  font-size: 15px; } }
   
  @-webkit-keyframes appear {
  0% {
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0); }
   
  100% {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1); } }
   
  @-moz-keyframes appear {
  0% {
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0); }
   
  100% {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1); } }
   
  @keyframes appear {
  0% {
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0); }
   
  100% {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1); } }
   
  .tile-new {
  -webkit-animation: appear 200ms ease 100ms;
  -moz-animation: appear 200ms ease 100ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both; }
   
  @-webkit-keyframes pop {
  0% {
  -webkit-transform: scale(0);
  -moz-transform: scale(0); }
   
  50% {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2); }
   
  100% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1); } }
   
  @-moz-keyframes pop {
  0% {
  -webkit-transform: scale(0);
  -moz-transform: scale(0); }
   
  50% {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2); }
   
  100% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1); } }
   
  @keyframes pop {
  0% {
  -webkit-transform: scale(0);
  -moz-transform: scale(0); }
   
  50% {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2); }
   
  100% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1); } }
   
  .tile-merged {
  z-index: 20;
  -webkit-animation: pop 200ms ease 100ms;
  -moz-animation: pop 200ms ease 100ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both; }
   
  .game-intro {
  margin-bottom: 0; }
   
  .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 {
  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; } }
   
@import "helpers"; @import "helpers";
@import "fonts/clear-sans.css"; @import "fonts/clear-sans.css";
   
$field-width: 500px; $field-width: 500px;
$grid-spacing: 15px; $grid-spacing: 15px;
$grid-row-cells: 4; $grid-row-cells: 4;
$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells; $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
$tile-border-radius: 3px; $tile-border-radius: 3px;
   
$text-color: #776E65; $text-color: #776E65;
$gold-text-color: #f9f6f2; $bright-text-color: #f9f6f2;
   
$tile-color: #eee4da; $tile-color: #eee4da;
$tile-gold-color: #edc22e; $tile-gold-color: #edc22e;
$tile-gold-glow-color: lighten($tile-gold-color, 15%); $tile-gold-glow-color: lighten($tile-gold-color, 15%);
   
  $game-container-background: #bbada0;
   
  $transition-speed: 100ms;
   
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
   
background: #faf8ef; background: #faf8ef;
color: $text-color; color: $text-color;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
} }
   
body { body {
margin: 80px 0; margin: 80px 0;
} }
   
h1 { .heading:after {
  content: "";
  display: block;
  clear: both;
  }
   
  h1.title {
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
  display: block;
  float: left;
  }
   
  @include keyframes(move-up) {
  0% {
  top: 25px;
  opacity: 1;
  }
   
  100% {
  top: -50px;
  opacity: 0;
  }
  }
   
  .score-container {
  $height: 25px;
   
  position: relative;
  float: right;
  background: $game-container-background;
  padding: 15px 25px;
  font-size: $height;
  height: $height;
  line-height: $height + 22px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
   
  &:after {
  position: absolute;
  width: 100%;
  top: 10px;
  left: 0;
  content: "Score";
  text-transform: uppercase;
  font-size: 13px;
  line-height: 13px;
  text-align: center;
  color: $tile-color;
  }
   
  .score-addition {
  position: absolute;
  right: 30px;
  color: red;
  font-size: $height;
  line-height: $height;
  font-weight: bold;
  color: rgba($text-color, .9);
  z-index: 100;
  @include animation(move-up 600ms ease-in);
  @include animation-fill-mode(both);
  }
  }
   
  p {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.65;
  }
   
  a {
  color: $text-color;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  }
   
  strong {
  &.important {
  text-transform: uppercase;
  }
  }
   
  hr {
  border: none;
  border-bottom: 1px solid lighten($text-color, 40%);
  margin-top: 20px;
  margin-bottom: 30px;
} }
   
.container { .container {
width: $field-width; width: $field-width;
margin: 0 auto; margin: 0 auto;
} }
   
.game-container { @include keyframes(fade-in) {
margin-top: 50px; 0% {
position: relative; opacity: 0;
padding: $grid-spacing; }
   
cursor: default; 100% {
-webkit-touch-callout: none; opacity: 1;
-webkit-user-select: none; }
-moz-user-select: none; }
   
background: #bbada0; // Styles for buttons
border-radius: $tile-border-radius * 2; @mixin button {
width: $field-width; display: inline-block;
height: $field-width; background: darken($game-container-background, 20%);
box-sizing: border-box; border-radius: 3px;
} padding: 0 20px;
  text-decoration: none;
.grid-container { color: $bright-text-color;
position: absolute; height: 40px;
z-index: 1; line-height: 42px;
} }
   
.grid-row { // Game field mixin used to render CSS at different width
margin-bottom: $grid-spacing; @mixin game-field {
  .game-container {
&:last-child { margin-top: 40px;
margin-bottom: 0; position: relative;
} padding: $grid-spacing;
   
&:after { cursor: default;
content: ""; -webkit-touch-callout: none;
display: block; -webkit-user-select: none;
clear: both; -moz-user-select: none;
}  
} background: $game-container-background;
  border-radius: $tile-border-radius * 2;
.grid-cell { width: $field-width;
width: $tile-size; height: $field-width;
height: $tile-size; -webkit-box-sizing: border-box;
margin-right: $grid-spacing; -moz-box-sizing: border-box;
float: left; box-sizing: border-box;
   
border-radius: $tile-border-radius; .game-message {
  display: none;
background: rgba($tile-color, .35);  
  position: absolute;
&:last-child { top: 0;
margin-right: 0; right: 0;
} bottom: 0;
} left: 0;
  background: rgba($tile-color, .5);
.tile-container { z-index: 100;
position: absolute;  
z-index: 2; 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 {
  @include button;
  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 {
  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;
   
.tile { .tile {
background: red;  
width: $tile-size;  
height: $tile-size;  
border-radius: $tile-border-radius; border-radius: $tile-border-radius;
   
background: $tile-color; background: $tile-color;
text-align: center; text-align: center;
line-height: $tile-size + 10px; font-weight: bold;
  z-index: 10;
   
font-size: 55px; font-size: 55px;
font-weight: bold;  
  @include transition($transition-speed ease-in-out);
@include transition(200ms ease);  
@include transition-property(top, left); @include transition-property(top, left);
   
@for $x from 1 through $grid-row-cells {  
@for $y from 1 through $grid-row-cells {  
&.tile-position-#{$x}-#{$y} {  
position: absolute;  
left: ($tile-size + $grid-spacing) * ($x - 1);  
top: ($tile-size + $grid-spacing) * ($y - 1);  
}  
}  
}  
   
$base: 2; $base: 2;
$exponent: 1; $exponent: 1;
$limit: 11; $limit: 11;
   
  // Colors for all 11 states, false = no special color
  $special-colors: false false, // 2
  false false, // 4
  #f78e48 true, // 8
  #fc5e2e true, // 16
  #ff3333 true, // 32
  #ff0000 true, // 64
  false true, // 128
  false true, // 256
  false true, // 512
  false true, // 1024
  false true; // 2048
   
  // Build tile colors
@while $exponent <= $limit { @while $exponent <= $limit {
$power: pow($base, $exponent); $power: pow($base, $exponent);
   
$gold-percent: ($exponent - 1) / ($limit - 1) * 100;  
   
$gold-text-percent: min($exponent + 2, $limit) / ($limit) * 100;  
   
$glow-opacity: max($exponent - 4, 0) / ($limit - 4);  
   
&.tile-#{$power} { &.tile-#{$power} {
background: mix($tile-gold-color, $tile-color, $gold-percent); // Calculate base background color
  $gold-percent: ($exponent - 1) / ($limit - 1) * 100;
box-shadow: 0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.8), $mixed-background: mix($tile-gold-color, $tile-color, $gold-percent);
inset 0 0 0 1px rgba(white, $glow-opacity / 3);  
  $nth-color: nth($special-colors, $exponent);
@if $exponent >= 8 {  
color: mix($gold-text-color, $text-color, $gold-text-percent); $special-background: nth($nth-color, 1);
} $bright-color: nth($nth-color, 2);
   
  @if $special-background {
  $mixed-background: mix($special-background, $mixed-background, 55%);
  }
   
  @if $bright-color {
  color: $bright-text-color;
  }
   
  // Set background
  background: $mixed-background;
   
  // Add glow
  $glow-opacity: max($exponent - 4, 0) / ($limit - 4);
   
  @if not $special-background {
  box-shadow: 0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.8),
  inset 0 0 0 1px rgba(white, $glow-opacity / 3);
  }
   
  // Adjust font size for bigger numbers
@if $power >= 100 and $power < 1000 { @if $power >= 100 and $power < 1000 {
font-size: 45px; 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 { } @else if $power >= 1000 {
font-size: 35px; font-size: 35px;
   
  @include smaller(480px) {
  font-size: 15px;
  }
} }
} }
   
$exponent: $exponent + 1; $exponent: $exponent + 1;
} }
} }
   
  @include keyframes(appear) {
  0% {
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  }
   
  100% {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  }
  }
   
  .tile-new {
  @include animation(appear 200ms ease $transition-speed);
  @include animation-fill-mode(both);
  }
   
  @include keyframes(pop) {
  0% {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  }
   
  50% {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  }
   
  100% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  }
  }
   
  .tile-merged {
  z-index: 20;
  @include animation(pop 200ms ease $transition-speed);
  @include animation-fill-mode(both);
  }
   
  .game-intro {
  margin-bottom: 0;
  }
   
  .game-explanation {
  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