Skip to content

Instantly share code, notes, and snippets.

@anthonyisamodder

anthonyisamodder/2048-game.markdown

Last active September 4, 2018 21:15
Show Gist options
  • Save anthonyisamodder/2a45774ed0b4ae12bfcf1984a96b5e7a to your computer and use it in GitHub Desktop.
Save anthonyisamodder/2a45774ed0b4ae12bfcf1984a96b5e7a to your computer and use it in GitHub Desktop.
Download ZIP
2048 game
Raw
index.html
<!DOCTYPE html>
<!--The HTML, CSS, and JS is not offical. Source: http://2048game.com/ -->
<div class="heading">
<h1 class="title"><a href="/">2048</a></h1>
<div class="scores-container">
<div class="score-container">0</div>
<div class="best-container">2960</div>
</div>
</div>
<div class="game-intro">
<a class="restart-button">New Game</a>
<h2 class="subtitle">Play <strong>2048 Game</strong> Online</h2>
<div class="above-game">
<p>Join the numbers and get to the <strong>2048 tile!</strong></p>
</div>
</div>
<div class="game-container">
<div class="game-message">
<p></p>
<div class="lower">
<a class="keep-playing-button">Keep playing</a>
<a class="retry-button">Try again</a>
<div class="score-sharing">
</div>
</div>
</div>
<div class="grid-container">
<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>
<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>
<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>
<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>
</div>
<div class="tile-container"><div class="tile tile-4 tile-position-3-4 tile-new"><div class="tile-inner">4</div></div><div class="tile tile-2 tile-position-4-1 tile-new"><div class="tile-inner">2</div></div></div>
</div>
Raw
script.js
Function.prototype.bind = Function.prototype.bind || function(a) {
var b = this;
return function(c) {
c instanceof Array || (c = [c]);
b.apply(a, c)
}
}
;
(function() {
function a(a) {
this.el = a;
a = a.className.replace(/^\s+|\s+$/g, "").split(/\s+/);
for (var b = 0; b < a.length; b++)
d.call(this, a[b])
}
function b(a, b, c) {
Object.defineProperty ? Object.defineProperty(a, b, {
get: c
}) : a.__defineGetter__(b, c)
}
if (!("undefined" === typeof window.Element || "classList"in document.documentElement)) {
var c = Array.prototype
, d = c.push
, e = c.splice
, f = c.join;
a.prototype = {
add: function(a) {
this.contains(a) || (d.call(this, a),
this.el.className = this.toString())
},
contains: function(a) {
return -1 != this.el.className.indexOf(a)
},
item: function(a) {
return this[a] || null
},
remove: function(a) {
if (this.contains(a)) {
for (var b = 0; b < this.length && this[b] != a; b++)
;
e.call(this, b, 1);
this.el.className = this.toString()
}
},
toString: function() {
return f.call(this, " ")
},
toggle: function(a) {
this.contains(a) ? this.remove(a) : this.add(a);
return this.contains(a)
}
};
window.DOMTokenList = a;
b(HTMLElement.prototype, "classList", function() {
return new a(this)
})
}
})();
(function() {
for (var a = 0, b = ["webkit", "moz"], c = 0; c < b.length && !window.requestAnimationFrame; ++c)
window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"],
window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"];
window.requestAnimationFrame || (window.requestAnimationFrame = function(b, c) {
var f = (new Date).getTime()
, h = Math.max(0, 16 - (f - a))
, g = window.setTimeout(function() {
b(f + h)
}, h);
a = f + h;
return g
}
);
window.cancelAnimationFrame || (window.cancelAnimationFrame = function(a) {
clearTimeout(a)
}
)
})();
function KeyboardInputManager() {
this.events = {};
window.navigator.msPointerEnabled ? (this.eventTouchstart = "MSPointerDown",
this.eventTouchmove = "MSPointerMove",
this.eventTouchend = "MSPointerUp") : (this.eventTouchstart = "touchstart",
this.eventTouchmove = "touchmove",
this.eventTouchend = "touchend");
this.listen()
}
KeyboardInputManager.prototype.on = function(a, b) {
this.events[a] || (this.events[a] = []);
this.events[a].push(b)
}
;
KeyboardInputManager.prototype.emit = function(a, b) {
var c = this.events[a];
c && c.forEach(function(a) {
a(b)
})
}
;
KeyboardInputManager.prototype.listen = function() {
var a = this
, b = {
38: 0,
39: 1,
40: 2,
37: 3,
75: 0,
76: 1,
74: 2,
72: 3,
87: 0,
68: 1,
83: 2,
65: 3
};
document.addEventListener("keydown", function(c) {
var d = c.altKey || c.ctrlKey || c.metaKey || c.shiftKey
, e = b[c.which];
d || void 0 === e || (c.preventDefault(),
a.emit("move", e));
d || 82 !== c.which || a.restart.call(a, c)
});
this.bindButtonPress(".retry-button", this.restart);
this.bindButtonPress(".restart-button", this.restart);
this.bindButtonPress(".keep-playing-button", this.keepPlaying);
var c, d, e = document.getElementsByClassName("game-container")[0];
e.addEventListener(this.eventTouchstart, function(a) {
!window.navigator.msPointerEnabled && 1 < a.touches.length || 1 < a.targetTouches || (window.navigator.msPointerEnabled ? (c = a.pageX,
d = a.pageY) : (c = a.touches[0].clientX,
d = a.touches[0].clientY),
a.preventDefault())
});
e.addEventListener(this.eventTouchmove, function(a) {
a.preventDefault()
});
e.addEventListener(this.eventTouchend, function(b) {
if (!(!window.navigator.msPointerEnabled && 0 < b.touches.length || 0 < b.targetTouches)) {
var e, g;
window.navigator.msPointerEnabled ? (e = b.pageX,
g = b.pageY) : (e = b.changedTouches[0].clientX,
g = b.changedTouches[0].clientY);
e -= c;
b = Math.abs(e);
g -= d;
var m = Math.abs(g);
10 < Math.max(b, m) && a.emit("move", b > m ? 0 < e ? 1 : 3 : 0 < g ? 2 : 0)
}
})
}
;
KeyboardInputManager.prototype.restart = function(a) {
a.preventDefault();
this.emit("restart")
}
;
KeyboardInputManager.prototype.keepPlaying = function(a) {
a.preventDefault();
this.emit("keepPlaying")
}
;
KeyboardInputManager.prototype.bindButtonPress = function(a, b) {
var c = document.querySelector(a);
c.addEventListener("click", b.bind(this));
c.addEventListener(this.eventTouchend, b.bind(this))
}
;
function HTMLActuator() {
this.tileContainer = document.querySelector(".tile-container");
this.scoreContainer = document.querySelector(".score-container");
this.bestContainer = document.querySelector(".best-container");
this.messageContainer = document.querySelector(".game-message");
this.sharingContainer = document.querySelector(".score-sharing");
this.score = 0
}
HTMLActuator.prototype.actuate = function(a, b) {
var c = this;
window.requestAnimationFrame(function() {
c.clearContainer(c.tileContainer);
a.cells.forEach(function(a) {
a.forEach(function(a) {
a && c.addTile(a)
})
});
c.updateScore(b.score);
c.updateBestScore(b.bestScore);
b.terminated && (b.over ? c.message(!1) : b.won && c.message(!0))
})
}
;
HTMLActuator.prototype.continueGame = function() {
this.clearMessage()
}
;
HTMLActuator.prototype.clearContainer = function(a) {
for (; a.firstChild; )
a.removeChild(a.firstChild)
}
;
HTMLActuator.prototype.addTile = function(a) {
var b = this
, c = document.createElement("div")
, d = document.createElement("div")
, e = this.positionClass(a.previousPosition || {
x: a.x,
y: a.y
})
, f = ["tile", "tile-" + a.value, e];
2048 < a.value && f.push("tile-super");
this.applyClasses(c, f);
d.classList.add("tile-inner");
d.textContent = a.value;
a.previousPosition ? window.requestAnimationFrame(function() {
f[2] = b.positionClass({
x: a.x,
y: a.y
});
b.applyClasses(c, f)
}) : a.mergedFrom ? (f.push("tile-merged"),
this.applyClasses(c, f),
a.mergedFrom.forEach(function(a) {
b.addTile(a)
})) : (f.push("tile-new"),
this.applyClasses(c, f));
c.appendChild(d);
this.tileContainer.appendChild(c)
}
;
HTMLActuator.prototype.applyClasses = function(a, b) {
a.setAttribute("class", b.join(" "))
}
;
HTMLActuator.prototype.normalizePosition = function(a) {
return {
x: a.x + 1,
y: a.y + 1
}
}
;
HTMLActuator.prototype.positionClass = function(a) {
a = this.normalizePosition(a);
return "tile-position-" + a.x + "-" + a.y
}
;
HTMLActuator.prototype.updateScore = function(a) {
this.clearContainer(this.scoreContainer);
var b = a - this.score;
this.score = a;
this.scoreContainer.textContent = this.score;
0 < b && (a = document.createElement("div"),
a.classList.add("score-addition"),
a.textContent = "+" + b,
this.scoreContainer.appendChild(a))
}
;
HTMLActuator.prototype.updateBestScore = function(a) {
this.bestContainer.textContent = a
}
;
HTMLActuator.prototype.message = function(a) {
var b = a ? "You win!" : "Game over!";
this.messageContainer.classList.add(a ? "game-won" : "game-over");
this.messageContainer.getElementsByTagName("p")[0].textContent = b;
this.clearContainer(this.sharingContainer);
this.sharingContainer.appendChild(this.scoreTweetButton());
twttr.widgets.load()
}
;
HTMLActuator.prototype.clearMessage = function() {
this.messageContainer.classList.remove("game-won");
this.messageContainer.classList.remove("game-over")
}
;
HTMLActuator.prototype.scoreTweetButton = function() {
var a = document.createElement("a");
a.classList.add("twitter-share-button");
a.setAttribute("href", "https://twitter.com/share");
a.setAttribute("data-url", "http://2048game.com");
a.setAttribute("data-counturl", "http://2048game.com");
a.textContent = "Tweet";
a.setAttribute("data-text", "I scored " + this.score + " points at 2048, a game where you join numbers to score high! #2048game");
return a
}
;
function Grid(a, b) {
this.size = a;
this.cells = b ? this.fromState(b) : this.empty()
}
Grid.prototype.empty = function() {
for (var a = [], b = 0; b < this.size; b++)
for (var c = a[b] = [], d = 0; d < this.size; d++)
c.push(null);
return a
}
;
Grid.prototype.fromState = function(a) {
for (var b = [], c = 0; c < this.size; c++)
for (var d = b[c] = [], e = 0; e < this.size; e++) {
var f = a[c][e];
d.push(f ? new Tile(f.position,f.value) : null)
}
return b
}
;
Grid.prototype.randomAvailableCell = function() {
var a = this.availableCells();
if (a.length)
return a[Math.floor(Math.random() * a.length)]
}
;
Grid.prototype.availableCells = function() {
var a = [];
this.eachCell(function(b, c, d) {
d || a.push({
x: b,
y: c
})
});
return a
}
;
Grid.prototype.eachCell = function(a) {
for (var b = 0; b < this.size; b++)
for (var c = 0; c < this.size; c++)
a(b, c, this.cells[b][c])
}
;
Grid.prototype.cellsAvailable = function() {
return !!this.availableCells().length
}
;
Grid.prototype.cellAvailable = function(a) {
return !this.cellOccupied(a)
}
;
Grid.prototype.cellOccupied = function(a) {
return !!this.cellContent(a)
}
;
Grid.prototype.cellContent = function(a) {
return this.withinBounds(a) ? this.cells[a.x][a.y] : null
}
;
Grid.prototype.insertTile = function(a) {
this.cells[a.x][a.y] = a
}
;
Grid.prototype.removeTile = function(a) {
this.cells[a.x][a.y] = null
}
;
Grid.prototype.withinBounds = function(a) {
return 0 <= a.x && a.x < this.size && 0 <= a.y && a.y < this.size
}
;
Grid.prototype.serialize = function() {
for (var a = [], b = 0; b < this.size; b++)
for (var c = a[b] = [], d = 0; d < this.size; d++)
c.push(this.cells[b][d] ? this.cells[b][d].serialize() : null);
return {
size: this.size,
cells: a
}
}
;
function Tile(a, b) {
this.x = a.x;
this.y = a.y;
this.value = b || 2;
this.mergedFrom = this.previousPosition = null
}
Tile.prototype.savePosition = function() {
this.previousPosition = {
x: this.x,
y: this.y
}
}
;
Tile.prototype.updatePosition = function(a) {
this.x = a.x;
this.y = a.y
}
;
Tile.prototype.serialize = function() {
return {
position: {
x: this.x,
y: this.y
},
value: this.value
}
}
;
window.fakeStorage = {
_data: {},
setItem: function(a, b) {
return this._data[a] = String(b)
},
getItem: function(a) {
return this._data.hasOwnProperty(a) ? this._data[a] : void 0
},
removeItem: function(a) {
return delete this._data[a]
},
clear: function() {
return this._data = {}
}
};
function LocalStorageManager() {
this.bestScoreKey = "bestScore";
this.gameStateKey = "gameState";
this.storage = this.localStorageSupported() ? window.localStorage : window.fakeStorage
}
LocalStorageManager.prototype.localStorageSupported = function() {
var a = window.localStorage;
try {
return a.setItem("test", "1"),
a.removeItem("test"),
!0
} catch (b) {
return !1
}
}
;
LocalStorageManager.prototype.getBestScore = function() {
return this.storage.getItem(this.bestScoreKey) || 0
}
;
LocalStorageManager.prototype.setBestScore = function(a) {
this.storage.setItem(this.bestScoreKey, a)
}
;
LocalStorageManager.prototype.getGameState = function() {
var a = this.storage.getItem(this.gameStateKey);
return a ? JSON.parse(a) : null
}
;
LocalStorageManager.prototype.setGameState = function(a) {
this.storage.setItem(this.gameStateKey, JSON.stringify(a))
}
;
LocalStorageManager.prototype.clearGameState = function() {
this.storage.removeItem(this.gameStateKey)
}
;
function GameManager(a, b, c, d) {
this.size = a;
this.inputManager = new b;
this.storageManager = new d;
this.actuator = new c;
this.startTiles = 2;
this.inputManager.on("move", this.move.bind(this));
this.inputManager.on("restart", this.restart.bind(this));
this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
this.setup()
}
GameManager.prototype.restart = function() {
this.storageManager.clearGameState();
this.actuator.continueGame();
this.setup()
}
;
GameManager.prototype.keepPlaying = function() {
this.keepPlaying = !0;
this.actuator.continueGame()
}
;
GameManager.prototype.isGameTerminated = function() {
return this.over || this.won && !this.keepPlaying ? !0 : !1
}
;
GameManager.prototype.setup = function() {
var a = this.storageManager.getGameState();
a ? (this.grid = new Grid(a.grid.size,a.grid.cells),
this.score = a.score,
this.over = a.over,
this.won = a.won,
this.keepPlaying = a.keepPlaying) : (this.grid = new Grid(this.size),
this.score = 0,
this.keepPlaying = this.won = this.over = !1,
this.addStartTiles());
this.actuate()
}
;
GameManager.prototype.addStartTiles = function() {
for (var a = 0; a < this.startTiles; a++)
this.addRandomTile()
}
;
GameManager.prototype.addRandomTile = function() {
if (this.grid.cellsAvailable()) {
var a = 0.9 > Math.random() ? 2 : 4
, a = new Tile(this.grid.randomAvailableCell(),a);
this.grid.insertTile(a)
}
}
;
GameManager.prototype.actuate = function() {
this.storageManager.getBestScore() < this.score && this.storageManager.setBestScore(this.score);
this.over ? this.storageManager.clearGameState() : this.storageManager.setGameState(this.serialize());
this.actuator.actuate(this.grid, {
score: this.score,
over: this.over,
won: this.won,
bestScore: this.storageManager.getBestScore(),
terminated: this.isGameTerminated()
})
}
;
GameManager.prototype.serialize = function() {
return {
grid: this.grid.serialize(),
score: this.score,
over: this.over,
won: this.won,
keepPlaying: this.keepPlaying
}
}
;
GameManager.prototype.prepareTiles = function() {
this.grid.eachCell(function(a, b, c) {
c && (c.mergedFrom = null,
c.savePosition())
})
}
;
GameManager.prototype.moveTile = function(a, b) {
this.grid.cells[a.x][a.y] = null;
this.grid.cells[b.x][b.y] = a;
a.updatePosition(b)
}
;
GameManager.prototype.move = function(a) {
var b = this;
if (!this.isGameTerminated()) {
var c, d, e = this.getVector(a), f = this.buildTraversals(e), h = !1;
this.prepareTiles();
f.x.forEach(function(a) {
f.y.forEach(function(f) {
c = {
x: a,
y: f
};
if (d = b.grid.cellContent(c)) {
f = b.findFarthestPosition(c, e);
var k = b.grid.cellContent(f.next);
if (k && k.value === d.value && !k.mergedFrom) {
var l = new Tile(f.next,2 * d.value);
l.mergedFrom = [d, k];
b.grid.insertTile(l);
b.grid.removeTile(d);
d.updatePosition(f.next);
b.score += l.value;
2048 === l.value && (b.won = !0)
} else
b.moveTile(d, f.farthest);
b.positionsEqual(c, d) || (h = !0)
}
})
});
h && (this.addRandomTile(),
this.movesAvailable() || (this.over = !0),
this.actuate())
}
}
;
GameManager.prototype.getVector = function(a) {
return {
0: {
x: 0,
y: -1
},
1: {
x: 1,
y: 0
},
2: {
x: 0,
y: 1
},
3: {
x: -1,
y: 0
}
}[a]
}
;
GameManager.prototype.buildTraversals = function(a) {
for (var b = {
x: [],
y: []
}, c = 0; c < this.size; c++)
b.x.push(c),
b.y.push(c);
1 === a.x && (b.x = b.x.reverse());
1 === a.y && (b.y = b.y.reverse());
return b
}
;
GameManager.prototype.findFarthestPosition = function(a, b) {
var c;
do
c = a,
a = {
x: c.x + b.x,
y: c.y + b.y
};
while (this.grid.withinBounds(a) && this.grid.cellAvailable(a));return {
farthest: c,
next: a
}
}
;
GameManager.prototype.movesAvailable = function() {
return this.grid.cellsAvailable() || this.tileMatchesAvailable()
}
;
GameManager.prototype.tileMatchesAvailable = function() {
for (var a, b = 0; b < this.size; b++)
for (var c = 0; c < this.size; c++)
if (a = this.grid.cellContent({
x: b,
y: c
}))
for (var d = 0; 4 > d; d++) {
var e = this.getVector(d);
if ((e = this.grid.cellContent({
x: b + e.x,
y: c + e.y
})) && e.value === a.value)
return !0
}
return !1
}
;
GameManager.prototype.positionsEqual = function(a, b) {
return a.x === b.x && a.y === b.y
}
;
window.requestAnimationFrame(function() {
new GameManager(4,KeyboardInputManager,HTMLActuator,LocalStorageManager)
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js"></script>
Raw
style.scss
@import url(fonts/clear-sans.css);
html, body {
margin: 0;
padding: 0;
background: #faf8ef;
color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px; }
body {
margin: 80px 0; }
.heading:after {
content: "";
display: block;
clear: both; }
h1.title {
font-size: 80px;
font-weight: bold;
margin: 0;
display: block;
float: left; }
h1.title a {
text-decoration: none; }
@-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; } }
.scores-container {
float: right;
text-align: right; }
.score-container, .best-container {
position: relative;
display: inline-block;
background: #bbada0;
padding: 15px 25px;
font-size: 25px;
height: 25px;
line-height: 47px;
font-weight: bold;
border-radius: 3px;
color: white;
margin-top: 8px;
text-align: center; }
.score-container:after, .best-container:after {
position: absolute;
width: 100%;
top: 10px;
left: 0;
text-transform: uppercase;
font-size: 13px;
line-height: 13px;
text-align: center;
color: #eee4da; }
.score-container .score-addition, .best-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;
animation: move-up 600ms ease-in;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.score-container:after {
content: "Score"; }
.best-container:after {
content: "Best"; }
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 {
width: 500px;
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 {
margin-top: 40px;
position: relative;
padding: 15px;
cursor: default;
-webkit-touch-callout: none;
-ms-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
touch-action: none;
background: #bbada0;
border-radius: 6px;
width: 500px;
height: 500px;
-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;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
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 a.keep-playing-button {
display: none; }
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button {
display: inline-block; }
.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: 15px; }
.grid-row:last-child {
margin-bottom: 0; }
.grid-row:after {
content: "";
display: block;
clear: both; }
.grid-cell {
width: 106.25px;
height: 106.25px;
margin-right: 15px;
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, .tile .tile-inner {
width: 107px;
height: 107px;
line-height: 116.25px; }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 121px);
-moz-transform: translate(0px, 121px);
transform: translate(0px, 121px); }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 242px);
-moz-transform: translate(0px, 242px);
transform: translate(0px, 242px); }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 363px);
-moz-transform: translate(0px, 363px);
transform: translate(0px, 363px); }
.tile.tile-position-2-1 {
-webkit-transform: translate(121px, 0px);
-moz-transform: translate(121px, 0px);
transform: translate(121px, 0px); }
.tile.tile-position-2-2 {
-webkit-transform: translate(121px, 121px);
-moz-transform: translate(121px, 121px);
transform: translate(121px, 121px); }
.tile.tile-position-2-3 {
-webkit-transform: translate(121px, 242px);
-moz-transform: translate(121px, 242px);
transform: translate(121px, 242px); }
.tile.tile-position-2-4 {
-webkit-transform: translate(121px, 363px);
-moz-transform: translate(121px, 363px);
transform: translate(121px, 363px); }
.tile.tile-position-3-1 {
-webkit-transform: translate(242px, 0px);
-moz-transform: translate(242px, 0px);
transform: translate(242px, 0px); }
.tile.tile-position-3-2 {
-webkit-transform: translate(242px, 121px);
-moz-transform: translate(242px, 121px);
transform: translate(242px, 121px); }
.tile.tile-position-3-3 {
-webkit-transform: translate(242px, 242px);
-moz-transform: translate(242px, 242px);
transform: translate(242px, 242px); }
.tile.tile-position-3-4 {
-webkit-transform: translate(242px, 363px);
-moz-transform: translate(242px, 363px);
transform: translate(242px, 363px); }
.tile.tile-position-4-1 {
-webkit-transform: translate(363px, 0px);
-moz-transform: translate(363px, 0px);
transform: translate(363px, 0px); }
.tile.tile-position-4-2 {
-webkit-transform: translate(363px, 121px);
-moz-transform: translate(363px, 121px);
transform: translate(363px, 121px); }
.tile.tile-position-4-3 {
-webkit-transform: translate(363px, 242px);
-moz-transform: translate(363px, 242px);
transform: translate(363px, 242px); }
.tile.tile-position-4-4 {
-webkit-transform: translate(363px, 363px);
-moz-transform: translate(363px, 363px);
transform: translate(363px, 363px); }
.tile {
position: absolute;
-webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out;
transition: 100ms ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform; }
.tile .tile-inner {
border-radius: 3px;
background: #eee4da;
text-align: center;
font-weight: bold;
z-index: 10;
font-size: 55px; }
.tile.tile-2 .tile-inner {
background: url(https://walther.com/ourpages/auto/profiles/301053/images/WALTHERHS1507834179958_thumb.jpg);
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-inner {
background: url(https://walther.com/ourpages/auto/profiles/669676/images/WALTHERHS1507834031524_thumb.jpg);
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-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/301055/images/WALTHERHS1507834251546_thumb.jpg); }
.tile.tile-16 .tile-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/813442/images/WALTHERHS1507833895947_thumb.jpg); }
.tile.tile-32 .tile-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/298418/images/WALTHERHS1507833406965_thumb.jpg); }
.tile.tile-64 .tile-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/299946/images/WALTHERHS1507833653071_thumb.jpg); }
.tile.tile-128 .tile-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/813434/images/WALTHERHS1507834062755_thumb.jpg);
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: 520px) {
.tile.tile-128 .tile-inner {
font-size: 25px; } }
.tile.tile-256 .tile-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/857569/images/WALTHERHS1507833842283_thumb.jpg);
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: 520px) {
.tile.tile-256 .tile-inner {
font-size: 25px; } }
.tile.tile-512 .tile-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/298437/images/WALTHERHS1418270347054_thumb.jpg);
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: 520px) {
.tile.tile-512 .tile-inner {
font-size: 25px; } }
.tile.tile-1024 .tile-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/864477/images/WALTHERHS1507833745782_thumb.jpg);
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: 520px) {
.tile.tile-1024 .tile-inner {
font-size: 15px; } }
.tile.tile-2048 .tile-inner {
color: #f9f6f2;
background: url(https://walther.com/ourpages/auto/profiles/298420/images/WALTHERHS1507833544323_thumb.jpg);
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: 520px) {
.tile.tile-2048 .tile-inner {
font-size: 15px; } }
.tile.tile-super .tile-inner {
color: #f9f6f2;
background: #3c3a32;
font-size: 30px; }
@media screen and (max-width: 520px) {
.tile.tile-super .tile-inner {
font-size: 10px; } }
@-webkit-keyframes appear {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes appear {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@keyframes appear {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
.tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms;
animation: appear 200ms ease 100ms;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards; }
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
.tile-merged .tile-inner {
z-index: 20;
-webkit-animation: pop 200ms ease 100ms;
-moz-animation: pop 200ms ease 100ms;
animation: pop 200ms ease 100ms;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards; }
.above-game:after {
content: "";
display: block;
clear: both; }
.game-intro {
float: left;
line-height: 42px;
margin-bottom: 0; }
.restart-button {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
display: block;
text-align: center;
float: right; }
.game-explanation {
margin-top: 50px; }
@media screen and (max-width: 520px) {
html, body {
font-size: 15px; }
body {
margin: 20px 0;
padding: 0 20px; }
h1.title {
font-size: 27px;
margin-top: 15px; }
.container {
width: 280px;
margin: 0 auto; }
.score-container, .best-container {
margin-top: 0;
padding: 15px 10px;
min-width: 40px; }
.heading {
margin-bottom: 10px; }
.game-intro {
width: 55%;
display: block;
box-sizing: border-box;
line-height: 1.65; }
.restart-button {
width: 42%;
padding: 0;
display: block;
box-sizing: border-box;
margin-top: 2px; }
.game-container {
margin-top: 17px;
position: relative;
padding: 10px;
cursor: default;
-webkit-touch-callout: none;
-ms-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
touch-action: 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;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
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 a.keep-playing-button {
display: none; }
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button {
display: inline-block; }
.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, .tile .tile-inner {
width: 58px;
height: 58px;
line-height: 67.5px; }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 67px);
-moz-transform: translate(0px, 67px);
transform: translate(0px, 67px); }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 135px);
-moz-transform: translate(0px, 135px);
transform: translate(0px, 135px); }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 202px);
-moz-transform: translate(0px, 202px);
transform: translate(0px, 202px); }
.tile.tile-position-2-1 {
-webkit-transform: translate(67px, 0px);
-moz-transform: translate(67px, 0px);
transform: translate(67px, 0px); }
.tile.tile-position-2-2 {
-webkit-transform: translate(67px, 67px);
-moz-transform: translate(67px, 67px);
transform: translate(67px, 67px); }
.tile.tile-position-2-3 {
-webkit-transform: translate(67px, 135px);
-moz-transform: translate(67px, 135px);
transform: translate(67px, 135px); }
.tile.tile-position-2-4 {
-webkit-transform: translate(67px, 202px);
-moz-transform: translate(67px, 202px);
transform: translate(67px, 202px); }
.tile.tile-position-3-1 {
-webkit-transform: translate(135px, 0px);
-moz-transform: translate(135px, 0px);
transform: translate(135px, 0px); }
.tile.tile-position-3-2 {
-webkit-transform: translate(135px, 67px);
-moz-transform: translate(135px, 67px);
transform: translate(135px, 67px); }
.tile.tile-position-3-3 {
-webkit-transform: translate(135px, 135px);
-moz-transform: translate(135px, 135px);
transform: translate(135px, 135px); }
.tile.tile-position-3-4 {
-webkit-transform: translate(135px, 202px);
-moz-transform: translate(135px, 202px);
transform: translate(135px, 202px); }
.tile.tile-position-4-1 {
-webkit-transform: translate(202px, 0px);
-moz-transform: translate(202px, 0px);
transform: translate(202px, 0px); }
.tile.tile-position-4-2 {
-webkit-transform: translate(202px, 67px);
-moz-transform: translate(202px, 67px);
transform: translate(202px, 67px); }
.tile.tile-position-4-3 {
-webkit-transform: translate(202px, 135px);
-moz-transform: translate(202px, 135px);
transform: translate(202px, 135px); }
.tile.tile-position-4-4 {
-webkit-transform: translate(202px, 202px);
-moz-transform: translate(202px, 202px);
transform: translate(202px, 202px); }
.tile .tile-inner {
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; } }
.right {
float: right; }
.left {
float: left; }
.clearfix {
clear: both; }
.play-now {
margin-top: 22px; }
.play-now a {
border-radius: 6px;
padding: 12px;
text-decoration: none;
background-color: #bbada0;
color: white; }
.play-now a:hover {
text-decoration: underline; }
body {
margin: 30px 0;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 15px;
position: relative; }
footer {
padding-bottom: 30px; }
p {
line-height: 1.45; }
.heading {
margin-bottom: 20px; }
.side-column {
background-image: url(/img/pattern/amam.png);
background-position: 0px 0px;
background-repeat: repeat-y;
width: 180px;
height: 100%;
position: absolute;
top: 0;
bottom: 0; }
.side-column-left {
left: 0;
border-right: 1px solid white; }
.side-column-right {
right: 0;
border-left: 1px solid white;
background-position: -19px 0px; }
.side-ad {
margin-top: 360px;
margin-left: 10px; }
@media (min-height: 769px) {
.side-ad {
margin-top: 400px; } }
.side-ad .sponsored {
text-transform: uppercase;
font-size: 10px; }
.game-container {
margin-top: 25px; }
.grammarly-box {
padding: 20px;
background: #fff;
margin-bottom: 30px;
border: solid 1px #eee;
border-top: solid 2px #F08150; }
.grammarly-box .caption {
font-size: 18px;
line-height: 25px;
margin-bottom: 10px;
display: inline-block; }
.grammarly-box p {
margin-bottom: 0;
line-height: 1.3;
font-size: 14px; }
.bold {
font-weight: bold; }
.box-shadow {
background: #fff;
position: relative; }
.box-shadow:after,
.box-shadow:before {
top: 80%;
left: 5px;
width: 50%;
z-index: -1;
content: "";
bottom: 15px;
max-width: 300px;
background: #999;
position: absolute; }
.shadow-effect {
position: relative; }
.shadow-effect:after, .shadow-effect:before {
transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
box-shadow: 0 15px 10px #999;
-moz-box-shadow: 0 15px 10px #999;
-webkit-box-shadow: 0 15px 10px #999; }
.shadow-effect:after {
left: auto;
right: 5px;
transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }
.top-link-ads-wrapper {
border-bottom: 1px solid #D7C7B9;
padding: 4px;
margin-bottom: 15px; }
.top-link-ads {
height: 15px; }
.text-center {
text-align: center; }
h2.subtitle {
font-size: 1em;
margin: 0; }
.game-intro {
line-height: inherit;
float: none;
width: 100% !important; }
.game-explanation {
margin-top: 0px; }
.focus-line {
background-color: #ffc;
text-align: center;
padding: 5px 0; }
.ads-button {
margin-top: 15px;
margin-bottom: 10px; }
.fb-line {
margin-bottom: 20px;
float: right;
width: 160px; }
.fb-line .game-explanation {
font-size: 14px;
margin-bottom: 20px;
text-align: justify; }
.fb-line p {
margin-bottom: 0px;
float: none; }
.fb-line .fb-like-wrapper {
height: 30px; }
.ads-bellow-game {
margin-bottom: 20px;
height: 250px;
overflow: hidden;
float: left; }
.share-img-container {
padding-right: 25px; }
.share-img {
display: inline-block; }
.share-img-small {
display: none; }
.facebook-share-button {
color: #394F9F;
font-size: 14px;
display: block;
float: left; }
.twitter-button-wrapper {
float: left;
font-size: 14px;
margin-right: 10px;
width: 61px; }
.unstyled {
margin: 0px;
padding-left: 0px; }
.unstyled li {
list-style: none; }
h1.title-internal {
font-size: 40px; }
.shop-learn-more {
padding: 10px 0px;
border: 1px solid #d8d4d0;
text-align: center;
display: block; }
.shop-learn-more:hover {
background-color: #d8d4d0; }
.tips-and-tricks {
clear: both; }
.tips-and-tricks li {
margin-bottom: 10px;
margin-right: 10px;
float: left;
border: 1px solid #d8d4d0; }
.tips-and-tricks li a {
display: inline-block;
padding: 10px 0px;
width: 242px;
text-align: center; }
.tips-and-tricks li a:hover {
background-color: #d8d4d0; }
.tips-and-tricks li.even {
margin-right: 0px; }
.shop-list .item-link img {
width: 195px;
height: 195px; }
.shop-list .item-link .title {
margin: 5px 0; }
.quotes .quote {
margin-bottom: 20px; }
.iframe-main {
position: absolute;
background: transparent;
width: 100%;
height: 100%;
top: 50px;
padding: 0; }
.score-sharing {
display: inline-block;
margin-left: 10px; }
footer {
font-size: 17px; }
#flappy-thirds-wrapper {
text-align: center; }
#flappy-thirds-wrapper canvas {
border: 1px solid #d8d4d0; }
.choose-language, .solitaire-ad {
text-decoration: none;
font-size: 14px;
margin-left: 10px; }
.solitaire-ad {
padding-left: 5px; }
.solitaire-ad img {
margin-left: 15px; }
/* patch flag icons */
.choose-language span.flag-icon {
border: 1px solid #776e65; }
.flag-icon-en {
background-image: url(../flags/4x3/us.svg); }
.mobile-top {
position: relative;
display: none;
margin-bottom: 15px;
color: #f9f6f2; }
.mobile-top .open {
background-color: #776e65;
padding: 10px 0; }
.mobile-top .closed {
display: none;
height: 20px; }
.mobile-top .ad {
width: 320px;
height: 100px;
margin: 0 auto;
background-color: white; }
.mobile-top .close-btn {
position: absolute;
top: 5px;
right: 10px;
color: white;
text-decoration: none; }
.mobile-top-alt {
display: none; }
@media screen and (max-width: 860px) {
.side-column {
width: 130px; }
.side-ad {
display: none; }
.solitaire-ad img {
width: 100px; }
.side-column-left {
background-position: -60px 0px; } }
@media screen and (max-width: 760px) {
.side-column {
display: none; }
.mobile-top {
display: block; }
body {
padding: 0px; } }
@media screen and (min-width: 481px) {
.tile .tile-inner {
line-height: 107px; }
h1.title {
font-size: 74px;
line-height: 66px; } }
@media screen and (max-height: 768px) and (min-width: 481px) {
.heading {
margin-bottom: 15px; }
h1.title-internal {
font-size: 40px;
line-height: 64px; }
.container {
width: 450px; }
.game-container {
margin-top: 40px;
position: relative;
padding: 12px;
cursor: default;
-webkit-touch-callout: none;
-ms-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
touch-action: none;
background: #bbada0;
border-radius: 6px;
width: 450px;
height: 450px;
-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;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
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 a.keep-playing-button {
display: none; }
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button {
display: inline-block; }
.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: 12px; }
.grid-row:last-child {
margin-bottom: 0; }
.grid-row:after {
content: "";
display: block;
clear: both; }
.grid-cell {
width: 97.5px;
height: 97.5px;
margin-right: 12px;
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, .tile .tile-inner {
width: 98px;
height: 98px;
line-height: 107.5px; }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 109px);
-moz-transform: translate(0px, 109px);
transform: translate(0px, 109px); }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 219px);
-moz-transform: translate(0px, 219px);
transform: translate(0px, 219px); }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 328px);
-moz-transform: translate(0px, 328px);
transform: translate(0px, 328px); }
.tile.tile-position-2-1 {
-webkit-transform: translate(109px, 0px);
-moz-transform: translate(109px, 0px);
transform: translate(109px, 0px); }
.tile.tile-position-2-2 {
-webkit-transform: translate(109px, 109px);
-moz-transform: translate(109px, 109px);
transform: translate(109px, 109px); }
.tile.tile-position-2-3 {
-webkit-transform: translate(109px, 219px);
-moz-transform: translate(109px, 219px);
transform: translate(109px, 219px); }
.tile.tile-position-2-4 {
-webkit-transform: translate(109px, 328px);
-moz-transform: translate(109px, 328px);
transform: translate(109px, 328px); }
.tile.tile-position-3-1 {
-webkit-transform: translate(219px, 0px);
-moz-transform: translate(219px, 0px);
transform: translate(219px, 0px); }
.tile.tile-position-3-2 {
-webkit-transform: translate(219px, 109px);
-moz-transform: translate(219px, 109px);
transform: translate(219px, 109px); }
.tile.tile-position-3-3 {
-webkit-transform: translate(219px, 219px);
-moz-transform: translate(219px, 219px);
transform: translate(219px, 219px); }
.tile.tile-position-3-4 {
-webkit-transform: translate(219px, 328px);
-moz-transform: translate(219px, 328px);
transform: translate(219px, 328px); }
.tile.tile-position-4-1 {
-webkit-transform: translate(328px, 0px);
-moz-transform: translate(328px, 0px);
transform: translate(328px, 0px); }
.tile.tile-position-4-2 {
-webkit-transform: translate(328px, 109px);
-moz-transform: translate(328px, 109px);
transform: translate(328px, 109px); }
.tile.tile-position-4-3 {
-webkit-transform: translate(328px, 219px);
-moz-transform: translate(328px, 219px);
transform: translate(328px, 219px); }
.tile.tile-position-4-4 {
-webkit-transform: translate(328px, 328px);
-moz-transform: translate(328px, 328px);
transform: translate(328px, 328px); }
.tile .tile-inner {
font-size: 53px;
line-height: 98px; }
.tile-128 .tile-inner, .tile-256 .tile-inner, .tile-512 .tile-inner {
font-size: 43px !important; }
.tile-1024 .tile-inner, .tile-2048 .tile-inner {
font-size: 33px !important; }
.game-intro {
font-size: 17px; }
.restart-button {
padding: 0 14px; }
.game-container {
margin-top: 10px; }
.tips-and-tricks li a {
width: 218px; }
footer {
font-size: 16px; } }
@media screen and (max-width: 480px) {
html, body {
font-size: 15px; }
body {
margin: 0 0 20px 0; }
#flappy-thirds-wrapper canvas {
width: 100%; }
.restart-button {
width: 35%; }
.game-container {
margin-top: 10px; }
.score-container:after, .best-container:after {
font-size: 11px; }
.approved img {
width: 280px; }
.play-now a {
padding: 8px; }
h1.title-internal {
font-size: 24px; }
.share-img {
display: none; }
.share-img-small {
display: none; }
.tips-and-tricks li a {
width: 280px; }
.tips-and-tricks li a.even {
margin-right: 0px; }
.top-link-ads-wrapper {
display: none; }
.fb-line {
float: left;
width: 100%;
font-size: 15px; }
.ads-bellow-game {
margin-top: 30px;
text-align: center;
float: none;
width: 100%; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment