diff --git a/public/Repo/play2048.co/dist/index.js b/public/Repo/play2048.co/dist/index.js new file mode 100644 index 0000000..34a8c98 --- /dev/null +++ b/public/Repo/play2048.co/dist/index.js @@ -0,0 +1 @@ +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()}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.score=0}function Grid(e,t){this.size=e,this.cells=t?this.fromState(t):this.empty()}function Tile(e,t){this.x=e.x,this.y=e.y,this.value=t||2,this.previousPosition=null,this.mergedFrom=null}function LocalStorageManager(){this.bestScoreKey="bestScore",this.gameStateKey="gameState",this.noticeClosedKey="noticeClosed",this.cookieNoticeClosedKey="cookieNoticeClosed";var e=this.localStorageSupported();this.storage=e?window.localStorage:window.fakeStorage}function GameManager(e,t,i,o){this.size=e,this.inputManager=new t,this.storageManager=new o,this.actuator=new i,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()}function runApplication(){new GameManager(4,KeyboardInputManager,HTMLActuator,LocalStorageManager);var e=new LocalStorageManager,t=document.querySelector(".cookie-notice"),i=document.querySelector(".cookie-notice-dismiss-button");e.getCookieNoticeClosed()?t.parentNode.removeChild(t):i.addEventListener("click",(function(){t.parentNode.removeChild(t),e.setCookieNoticeClosed(!0),void 0!==typeof gtag&>ag("event","closed",{event_category:"cookie-notice"})}));var o=document.querySelector(".how-to-play-link"),n=document.querySelector(".game-explanation");o&&n&&o.addEventListener("click",(function(){n.scrollIntoView({behavior:"smooth",block:"center"}),n.addEventListener("animationend",(function(){n.classList.remove("game-explanation-highlighted")})),n.classList.add("game-explanation-highlighted")}));var a=document.querySelector(".start-playing-link"),r=document.querySelector(".game-container");a&&r&&a.addEventListener("click",(function(){r.scrollIntoView({behavior:"smooth",block:"center"})}))}Function.prototype.bind=Function.prototype.bind||function(e){var t=this;return function(i){i instanceof Array||(i=[i]),t.apply(e,i)}},function(){if(void 0!==window.Element&&!("classList"in document.documentElement)){var e,t,i,o=Array.prototype,n=o.push,a=o.splice,r=o.join;s.prototype={add:function(e){this.contains(e)||(n.call(this,e),this.el.className=this.toString())},contains:function(e){return-1!=this.el.className.indexOf(e)},item:function(e){return this[e]||null},remove:function(e){if(this.contains(e)){for(var t=0;t1||o.targetTouches.length>1||i.targetIsInput(o)||(window.navigator.msPointerEnabled?(e=o.pageX,t=o.pageY):(e=o.touches[0].clientX,t=o.touches[0].clientY),o.preventDefault())}),{passive:!0}),n.addEventListener(this.eventTouchmove,(function(e){e.preventDefault()}),{passive:!0}),n.addEventListener(this.eventTouchend,(function(o){if(!(!window.navigator.msPointerEnabled&&o.touches.length>0||o.targetTouches.length>0||i.targetIsInput(o))){var n,a;window.navigator.msPointerEnabled?(n=o.pageX,a=o.pageY):(n=o.changedTouches[0].clientX,a=o.changedTouches[0].clientY);var r=n-e,s=Math.abs(r),c=a-t,l=Math.abs(c);Math.max(s,l)>10&&i.emit("move",s>l?r>0?1:3:c>0?2:0)}}))},KeyboardInputManager.prototype.restart=function(e){e.preventDefault(),this.emit("restart")},KeyboardInputManager.prototype.keepPlaying=function(e){e.preventDefault(),this.emit("keepPlaying")},KeyboardInputManager.prototype.bindButtonPress=function(e,t){var i=document.querySelector(e);i.addEventListener("click",t.bind(this)),i.addEventListener(this.eventTouchend,t.bind(this))},KeyboardInputManager.prototype.targetIsInput=function(e){return"input"===e.target.tagName.toLowerCase()},HTMLActuator.prototype.actuate=function(e,t){var i=this;window.requestAnimationFrame((function(){i.clearContainer(i.tileContainer),e.cells.forEach((function(e){e.forEach((function(e){e&&i.addTile(e)}))})),i.updateScore(t.score),i.updateBestScore(t.bestScore),t.terminated&&(t.over?i.message(!1):t.won&&i.message(!0))}))},HTMLActuator.prototype.continueGame=function(){"undefined"!=typeof gtag&>ag("event","restart",{event_category:"game"}),this.clearMessage()},HTMLActuator.prototype.clearContainer=function(e){for(;e.firstChild;)e.removeChild(e.firstChild)},HTMLActuator.prototype.addTile=function(e){var t=this,i=document.createElement("div"),o=document.createElement("div"),n=e.previousPosition||{x:e.x,y:e.y},a=this.positionClass(n),r=["tile","tile-"+e.value,a];e.value>2048&&r.push("tile-super"),this.applyClasses(i,r),o.classList.add("tile-inner"),o.textContent=e.value,e.previousPosition?window.requestAnimationFrame((function(){r[2]=t.positionClass({x:e.x,y:e.y}),t.applyClasses(i,r)})):e.mergedFrom?(r.push("tile-merged"),this.applyClasses(i,r),e.mergedFrom.forEach((function(e){t.addTile(e)}))):(r.push("tile-new"),this.applyClasses(i,r)),i.appendChild(o),this.tileContainer.appendChild(i)},HTMLActuator.prototype.applyClasses=function(e,t){e.setAttribute("class",t.join(" "))},HTMLActuator.prototype.normalizePosition=function(e){return{x:e.x+1,y:e.y+1}},HTMLActuator.prototype.positionClass=function(e){return"tile-position-"+(e=this.normalizePosition(e)).x+"-"+e.y},HTMLActuator.prototype.updateScore=function(e){this.clearContainer(this.scoreContainer);var t=e-this.score;if(this.score=e,this.scoreContainer.textContent=this.score,t>0){var i=document.createElement("div");i.classList.add("score-addition"),i.textContent="+"+t,this.scoreContainer.appendChild(i)}},HTMLActuator.prototype.updateBestScore=function(e){this.bestContainer.textContent=e},HTMLActuator.prototype.message=function(e){var t=e?"game-won":"game-over",i=e?"You win!":"Game over!";"undefined"!=typeof gtag&>ag("event","end",{event_category:"game",event_label:t,value:this.score}),this.messageContainer.classList.add(t),this.messageContainer.getElementsByTagName("p")[0].textContent=i},HTMLActuator.prototype.clearMessage=function(){this.messageContainer.classList.remove("game-won"),this.messageContainer.classList.remove("game-over")},Grid.prototype.empty=function(){for(var e=[],t=0;t=0&&e.x=0&&e.y{runApplication()})):runApplication()})); \ No newline at end of file diff --git a/public/Repo/play2048.co/favicon.ico b/public/Repo/play2048.co/favicon.ico new file mode 100644 index 0000000..22109e0 Binary files /dev/null and b/public/Repo/play2048.co/favicon.ico differ diff --git a/public/Repo/play2048.co/index.html b/public/Repo/play2048.co/index.html new file mode 100644 index 0000000..00f50a3 --- /dev/null +++ b/public/Repo/play2048.co/index.html @@ -0,0 +1,1069 @@ + + + + + + 2048 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

2048

+
+
0
+
0
+
+
+
+

Join the tiles, get to 2048!
How to play →

New Game +
+
+
+

+

Keep goingTry again
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

How to play:Use your arrow keysSwipe with your fingers to move the tiles. Tiles with the same number merge into one when they touch. Add them up to reach 2048!
Start playing → +

+
+

You’re playing the original version of 2048. Try out the official apps for iOS and Android! All other versions of this game are derivatives and should be used with caution.

+
+

Created by Gabriele Cirulli. Based on 1024 by Veewo Studio. +

+ +
+ + + \ No newline at end of file diff --git a/public/Repo/play2048.co/meta/apple-touch-icon.png b/public/Repo/play2048.co/meta/apple-touch-icon.png new file mode 100644 index 0000000..3fd20f6 Binary files /dev/null and b/public/Repo/play2048.co/meta/apple-touch-icon.png differ diff --git a/public/Repo/play2048.co/meta/icon_bitcoin.svg b/public/Repo/play2048.co/meta/icon_bitcoin.svg new file mode 100644 index 0000000..944d65d --- /dev/null +++ b/public/Repo/play2048.co/meta/icon_bitcoin.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/public/Repo/play2048.co/meta/icon_pp.svg b/public/Repo/play2048.co/meta/icon_pp.svg new file mode 100644 index 0000000..50f2e2c --- /dev/null +++ b/public/Repo/play2048.co/meta/icon_pp.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.eot b/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.eot new file mode 100644 index 0000000..3678ef2 Binary files /dev/null and b/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.eot differ diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.svg b/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.svg new file mode 100644 index 0000000..aa985ae --- /dev/null +++ b/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.svg @@ -0,0 +1,640 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.woff b/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.woff new file mode 100644 index 0000000..184a945 Binary files /dev/null and b/public/Repo/play2048.co/style/fonts/ClearSans-Bold-webfont.woff differ diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.eot b/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.eot new file mode 100644 index 0000000..0dc609d Binary files /dev/null and b/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.eot differ diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.svg b/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.svg new file mode 100644 index 0000000..1d5d2ec --- /dev/null +++ b/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.svg @@ -0,0 +1,670 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.woff b/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.woff new file mode 100644 index 0000000..44555e0 Binary files /dev/null and b/public/Repo/play2048.co/style/fonts/ClearSans-Light-webfont.woff differ diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.eot b/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.eot new file mode 100644 index 0000000..b020e05 Binary files /dev/null and b/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.eot differ diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.svg b/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.svg new file mode 100644 index 0000000..1e2cffd --- /dev/null +++ b/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.svg @@ -0,0 +1,669 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.woff b/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.woff new file mode 100644 index 0000000..9d58858 Binary files /dev/null and b/public/Repo/play2048.co/style/fonts/ClearSans-Regular-webfont.woff differ diff --git a/public/Repo/play2048.co/style/fonts/clear-sans.css b/public/Repo/play2048.co/style/fonts/clear-sans.css new file mode 100644 index 0000000..0a1207b --- /dev/null +++ b/public/Repo/play2048.co/style/fonts/clear-sans.css @@ -0,0 +1,32 @@ +@font-face { + font-family: "Clear Sans"; + src: url("ClearSans-Light-webfont.eot"); + src: url("ClearSans-Light-webfont.eot?") format("embedded-opentype"), + url("ClearSans-Light-webfont.svg") format("svg"), + url("ClearSans-Light-webfont.woff") format("woff"); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Clear Sans"; + src: url("ClearSans-Regular-webfont.eot"); + src: url("ClearSans-Regular-webfont.eot?") format("embedded-opentype"), + url("ClearSans-Regular-webfont.svg") format("svg"), + url("ClearSans-Regular-webfont.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Clear Sans"; + src: url("ClearSans-Bold-webfont.eot"); + src: url("ClearSans-Bold-webfont.eot?") format("embedded-opentype"), + url("ClearSans-Bold-webfont.svg") format("svg"), + url("ClearSans-Bold-webfont.woff") format("woff"); + font-weight: 700; + font-style: normal; + font-display: swap; +} diff --git a/public/Repo/play2048.co/style/main.css b/public/Repo/play2048.co/style/main.css new file mode 100644 index 0000000..48e2357 --- /dev/null +++ b/public/Repo/play2048.co/style/main.css @@ -0,0 +1,1553 @@ +@charset "UTF-8"; +html, +body { + margin: 0; + padding: 0; + background: #faf8ef; + color: #776e65; + font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 18px; +} + +body { + margin-bottom: 80px; +} + +input { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + font: inherit; + border: none; + outline: none; + box-sizing: border-box; + font-weight: bold; + margin: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +input[type="text"], input[type="email"] { + cursor: auto; + background: #fcfbf9; + font-weight: normal; + color: #776e65; + padding: 0 15px; +} + +input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder { + color: #9d948c; +} + +input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder { + color: #9d948c; +} + +input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder { + color: #9d948c; +} + +.heading:after { + content: ""; + display: block; + clear: both; +} + +h1.title { + font-size: 80px; + font-weight: bold; + 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; + } +} + +.scores-container { + float: right; + display: flex; +} + +.scores-container * + * { + margin-left: 5px; +} + +.score-container, +.best-container { + position: relative; + display: 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, .cc_container a:not(.cc_btn) { + 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; + margin-top: 30px; +} + +@-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-message { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(238, 228, 218, 0.73); + z-index: 100; + flex-direction: column; + align-items: center; + justify-content: center; + 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-message p { + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; +} + +.game-message .lower { + display: block; + margin-top: 29px; +} + +.game-message a { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + margin-left: 9px; +} + +.game-message a.keep-playing-button { + display: none; +} + +.game-message.game-won { + background: rgba(237, 194, 46, 0.5); + color: #f9f6f2; +} + +.game-message.game-won a.keep-playing-button { + display: inline-block; +} + +.game-message.game-won, .game-message.game-over { + display: flex; +} + +.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: 107px; +} + +.tile.tile-position-1-1 { + -webkit-transform: translate(0px, 0px); + -moz-transform: translate(0px, 0px); + -ms-transform: translate(0px, 0px); + transform: translate(0px, 0px); +} + +.tile.tile-position-1-2 { + -webkit-transform: translate(0px, 121px); + -moz-transform: translate(0px, 121px); + -ms-transform: translate(0px, 121px); + transform: translate(0px, 121px); +} + +.tile.tile-position-1-3 { + -webkit-transform: translate(0px, 242px); + -moz-transform: translate(0px, 242px); + -ms-transform: translate(0px, 242px); + transform: translate(0px, 242px); +} + +.tile.tile-position-1-4 { + -webkit-transform: translate(0px, 363px); + -moz-transform: translate(0px, 363px); + -ms-transform: translate(0px, 363px); + transform: translate(0px, 363px); +} + +.tile.tile-position-2-1 { + -webkit-transform: translate(121px, 0px); + -moz-transform: translate(121px, 0px); + -ms-transform: translate(121px, 0px); + transform: translate(121px, 0px); +} + +.tile.tile-position-2-2 { + -webkit-transform: translate(121px, 121px); + -moz-transform: translate(121px, 121px); + -ms-transform: translate(121px, 121px); + transform: translate(121px, 121px); +} + +.tile.tile-position-2-3 { + -webkit-transform: translate(121px, 242px); + -moz-transform: translate(121px, 242px); + -ms-transform: translate(121px, 242px); + transform: translate(121px, 242px); +} + +.tile.tile-position-2-4 { + -webkit-transform: translate(121px, 363px); + -moz-transform: translate(121px, 363px); + -ms-transform: translate(121px, 363px); + transform: translate(121px, 363px); +} + +.tile.tile-position-3-1 { + -webkit-transform: translate(242px, 0px); + -moz-transform: translate(242px, 0px); + -ms-transform: translate(242px, 0px); + transform: translate(242px, 0px); +} + +.tile.tile-position-3-2 { + -webkit-transform: translate(242px, 121px); + -moz-transform: translate(242px, 121px); + -ms-transform: translate(242px, 121px); + transform: translate(242px, 121px); +} + +.tile.tile-position-3-3 { + -webkit-transform: translate(242px, 242px); + -moz-transform: translate(242px, 242px); + -ms-transform: translate(242px, 242px); + transform: translate(242px, 242px); +} + +.tile.tile-position-3-4 { + -webkit-transform: translate(242px, 363px); + -moz-transform: translate(242px, 363px); + -ms-transform: translate(242px, 363px); + transform: translate(242px, 363px); +} + +.tile.tile-position-4-1 { + -webkit-transform: translate(363px, 0px); + -moz-transform: translate(363px, 0px); + -ms-transform: translate(363px, 0px); + transform: translate(363px, 0px); +} + +.tile.tile-position-4-2 { + -webkit-transform: translate(363px, 121px); + -moz-transform: translate(363px, 121px); + -ms-transform: translate(363px, 121px); + transform: translate(363px, 121px); +} + +.tile.tile-position-4-3 { + -webkit-transform: translate(363px, 242px); + -moz-transform: translate(363px, 242px); + -ms-transform: translate(363px, 242px); + transform: translate(363px, 242px); +} + +.tile.tile-position-4-4 { + -webkit-transform: translate(363px, 363px); + -moz-transform: translate(363px, 363px); + -ms-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: #eee4da; + 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: #eee1c9; + 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: #f3b27a; +} + +.tile.tile-16 .tile-inner { + color: #f9f6f2; + background: #f69664; +} + +.tile.tile-32 .tile-inner { + color: #f9f6f2; + background: #f77c5f; +} + +.tile.tile-64 .tile-inner { + color: #f9f6f2; + background: #f75f3b; +} + +.tile.tile-128 .tile-inner { + color: #f9f6f2; + background: #edd073; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.238095), inset 0 0 0 1px rgba(255, 255, 255, 0.142857); + 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: #edcc62; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.190476); + 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: #edc950; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.396825), inset 0 0 0 1px rgba(255, 255, 255, 0.238095); + 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: #edc53f; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.285714); + 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: #edc22e; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.555556), inset 0 0 0 1px rgba(255, 255, 255, 0.333333); + 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: #3c3a33; + 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); + -ms-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +@-moz-keyframes appear { + 0% { + opacity: 0; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +@keyframes appear { + 0% { + opacity: 0; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-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); + -ms-transform: scale(0); + transform: scale(0); + } + 50% { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +@-moz-keyframes pop { + 0% { + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + } + 50% { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +@keyframes pop { + 0% { + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + } + 50% { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-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 { + display: flex; + justify-content: space-between; + align-items: center; +} + +.game-intro { + line-height: 1.2; + margin-bottom: 0; + margin-right: 10px; +} + +.how-to-play-link { + display: inline-block; +} + +.restart-button { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + display: block; + text-align: center; + flex-shrink: 0; +} + +@keyframes game-explanation-fading-highlight { + 0% { + background-color: #f3d774; + box-shadow: 0 0 0 15px #f3d774; + } + 100% { + background-color: transparent; + box-shadow: 0 0 0 10px transparent; + } +} + +.game-explanation { + display: block; + margin-top: 30px; + border-radius: 1px; +} + +.game-explanation-highlighted { + -webkit-animation: game-explanation-fading-highlight 2s ease-in 1s; + -moz-animation: game-explanation-fading-highlight 2s ease-in 1s; + animation: game-explanation-fading-highlight 2s ease-in 1s; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; +} + +.game-explanation-touch { + display: none; +} + +@media (hover: none) { + .game-explanation-touch { + display: inline; + } + .game-explanation-mouse { + display: none; + } +} + +.sharing { + margin-top: 20px; + text-align: center; +} + +.sharing > iframe, +.sharing > span, +.sharing > form { + display: inline-block; + vertical-align: middle; +} + +@media screen and (max-width: 520px) { + html, + body { + font-size: 15px; + } + body { + margin-top: 0; + padding: 20px; + } + h1.title { + font-size: 27px; + margin-top: 15px; + } + .container { + width: 100%; + max-width: 320px; + margin: 0 auto; + } + .container:first-child { + margin-top: auto; + } + .game-container { + margin: 0 auto; + } + .score-container, + .best-container { + margin-top: 0; + padding: 15px 10px; + min-width: 40px; + } + .heading { + margin-bottom: 10px; + } + .game-intro { + display: block; + box-sizing: border-box; + line-height: 1.65; + } + .restart-button { + padding: 0 8px; + height: 32px; + line-height: 35px; + 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-message { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(238, 228, 218, 0.73); + z-index: 100; + flex-direction: column; + align-items: center; + justify-content: center; + 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-message p { + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; + } + .game-message .lower { + display: block; + margin-top: 29px; + } + .game-message a { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + margin-left: 9px; + } + .game-message a.keep-playing-button { + display: none; + } + .game-message.game-won { + background: rgba(237, 194, 46, 0.5); + color: #f9f6f2; + } + .game-message.game-won a.keep-playing-button { + display: inline-block; + } + .game-message.game-won, .game-message.game-over { + display: flex; + } + .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: 58px; + } + .tile.tile-position-1-1 { + -webkit-transform: translate(0px, 0px); + -moz-transform: translate(0px, 0px); + -ms-transform: translate(0px, 0px); + transform: translate(0px, 0px); + } + .tile.tile-position-1-2 { + -webkit-transform: translate(0px, 67px); + -moz-transform: translate(0px, 67px); + -ms-transform: translate(0px, 67px); + transform: translate(0px, 67px); + } + .tile.tile-position-1-3 { + -webkit-transform: translate(0px, 135px); + -moz-transform: translate(0px, 135px); + -ms-transform: translate(0px, 135px); + transform: translate(0px, 135px); + } + .tile.tile-position-1-4 { + -webkit-transform: translate(0px, 202px); + -moz-transform: translate(0px, 202px); + -ms-transform: translate(0px, 202px); + transform: translate(0px, 202px); + } + .tile.tile-position-2-1 { + -webkit-transform: translate(67px, 0px); + -moz-transform: translate(67px, 0px); + -ms-transform: translate(67px, 0px); + transform: translate(67px, 0px); + } + .tile.tile-position-2-2 { + -webkit-transform: translate(67px, 67px); + -moz-transform: translate(67px, 67px); + -ms-transform: translate(67px, 67px); + transform: translate(67px, 67px); + } + .tile.tile-position-2-3 { + -webkit-transform: translate(67px, 135px); + -moz-transform: translate(67px, 135px); + -ms-transform: translate(67px, 135px); + transform: translate(67px, 135px); + } + .tile.tile-position-2-4 { + -webkit-transform: translate(67px, 202px); + -moz-transform: translate(67px, 202px); + -ms-transform: translate(67px, 202px); + transform: translate(67px, 202px); + } + .tile.tile-position-3-1 { + -webkit-transform: translate(135px, 0px); + -moz-transform: translate(135px, 0px); + -ms-transform: translate(135px, 0px); + transform: translate(135px, 0px); + } + .tile.tile-position-3-2 { + -webkit-transform: translate(135px, 67px); + -moz-transform: translate(135px, 67px); + -ms-transform: translate(135px, 67px); + transform: translate(135px, 67px); + } + .tile.tile-position-3-3 { + -webkit-transform: translate(135px, 135px); + -moz-transform: translate(135px, 135px); + -ms-transform: translate(135px, 135px); + transform: translate(135px, 135px); + } + .tile.tile-position-3-4 { + -webkit-transform: translate(135px, 202px); + -moz-transform: translate(135px, 202px); + -ms-transform: translate(135px, 202px); + transform: translate(135px, 202px); + } + .tile.tile-position-4-1 { + -webkit-transform: translate(202px, 0px); + -moz-transform: translate(202px, 0px); + -ms-transform: translate(202px, 0px); + transform: translate(202px, 0px); + } + .tile.tile-position-4-2 { + -webkit-transform: translate(202px, 67px); + -moz-transform: translate(202px, 67px); + -ms-transform: translate(202px, 67px); + transform: translate(202px, 67px); + } + .tile.tile-position-4-3 { + -webkit-transform: translate(202px, 135px); + -moz-transform: translate(202px, 135px); + -ms-transform: translate(202px, 135px); + transform: translate(202px, 135px); + } + .tile.tile-position-4-4 { + -webkit-transform: translate(202px, 202px); + -moz-transform: translate(202px, 202px); + -ms-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; + } + .game-message .lower { + margin-top: 10px !important; + } + .sharing > iframe, + .sharing > span, + .sharing > form { + display: block; + margin: 0 auto; + margin-bottom: 20px; + } +} + +.pp-donate button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + font: inherit; + color: inherit; + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; +} + +.pp-donate button img { + vertical-align: -4px; + margin-right: 8px; +} + +.btc-donate { + position: relative; + margin-left: 10px; + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; +} + +.btc-donate img { + vertical-align: -4px; + margin-right: 8px; +} + +.btc-donate a { + color: #f9f6f2; + text-decoration: none; + font-weight: normal; +} + +.btc-donate .address { + cursor: auto; + position: absolute; + width: 340px; + right: 50%; + margin-right: -170px; + padding-bottom: 7px; + top: -30px; + opacity: 0; + pointer-events: none; + -webkit-transition: 400ms ease; + -moz-transition: 400ms ease; + transition: 400ms ease; + -webkit-transition-property: top, opacity; + -moz-transition-property: top, opacity; + transition-property: top, opacity; +} + +.btc-donate .address:after { + position: absolute; + border-top: 10px solid #bbada0; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + content: ""; + bottom: 0px; + left: 50%; + margin-left: -7px; +} + +.btc-donate .address code { + background-color: #bbada0; + padding: 10px 15px; + width: 100%; + border-radius: 3px; + line-height: 1; + font-weight: normal; + font-size: 15px; + font-family: Consolas, "Liberation Mono", Courier, monospace; + text-align: center; +} + +.btc-donate:hover .address, +.btc-donate .address:hover .address { + opacity: 1; + top: -45px; + pointer-events: auto; +} + +@media screen and (max-width: 520px) { + .btc-donate { + width: 120px; + } + .btc-donate .address { + margin-right: -150px; + width: 300px; + } + .btc-donate .address code { + font-size: 13px; + } + .btc-donate .address:after { + left: 50%; + bottom: 2px; + } +} + +@-webkit-keyframes pop-in-big { + 0% { + -webkit-transform: scale(0) translateZ(0); + -moz-transform: scale(0) translateZ(0); + -ms-transform: scale(0) translateZ(0); + transform: scale(0) translateZ(0); + opacity: 0; + margin-top: -40px; + } + 100% { + -webkit-transform: scale(1) translateZ(0); + -moz-transform: scale(1) translateZ(0); + -ms-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); + opacity: 1; + margin-top: 30px; + } +} + +@-moz-keyframes pop-in-big { + 0% { + -webkit-transform: scale(0) translateZ(0); + -moz-transform: scale(0) translateZ(0); + -ms-transform: scale(0) translateZ(0); + transform: scale(0) translateZ(0); + opacity: 0; + margin-top: -40px; + } + 100% { + -webkit-transform: scale(1) translateZ(0); + -moz-transform: scale(1) translateZ(0); + -ms-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); + opacity: 1; + margin-top: 30px; + } +} + +@keyframes pop-in-big { + 0% { + -webkit-transform: scale(0) translateZ(0); + -moz-transform: scale(0) translateZ(0); + -ms-transform: scale(0) translateZ(0); + transform: scale(0) translateZ(0); + opacity: 0; + margin-top: -40px; + } + 100% { + -webkit-transform: scale(1) translateZ(0); + -moz-transform: scale(1) translateZ(0); + -ms-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); + opacity: 1; + margin-top: 30px; + } +} + +@-webkit-keyframes pop-in-small { + 0% { + -webkit-transform: scale(0) translateZ(0); + -moz-transform: scale(0) translateZ(0); + -ms-transform: scale(0) translateZ(0); + transform: scale(0) translateZ(0); + opacity: 0; + margin-top: -40px; + } + 100% { + -webkit-transform: scale(1) translateZ(0); + -moz-transform: scale(1) translateZ(0); + -ms-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); + opacity: 1; + margin-top: 10px; + } +} + +@-moz-keyframes pop-in-small { + 0% { + -webkit-transform: scale(0) translateZ(0); + -moz-transform: scale(0) translateZ(0); + -ms-transform: scale(0) translateZ(0); + transform: scale(0) translateZ(0); + opacity: 0; + margin-top: -40px; + } + 100% { + -webkit-transform: scale(1) translateZ(0); + -moz-transform: scale(1) translateZ(0); + -ms-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); + opacity: 1; + margin-top: 10px; + } +} + +@keyframes pop-in-small { + 0% { + -webkit-transform: scale(0) translateZ(0); + -moz-transform: scale(0) translateZ(0); + -ms-transform: scale(0) translateZ(0); + transform: scale(0) translateZ(0); + opacity: 0; + margin-top: -40px; + } + 100% { + -webkit-transform: scale(1) translateZ(0); + -moz-transform: scale(1) translateZ(0); + -ms-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); + opacity: 1; + margin-top: 10px; + } +} + +.links { + text-align: center; + margin-top: 20px; +} + +.links a { + display: inline-block; +} + +.privacy { + word-wrap: break-word; +} + +/* extras */ +.sidebar { + width: 180px; + top: 0; + bottom: 0; + position: fixed; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.sidebar-left { + left: 0; +} + +.sidebar-right { + right: 0; +} + +@media (max-width: 1060px) { + .sidebar.sidebar-left, + .sidebar.sidebar-left .adsbygoogle { + display: none; + } +} + +@media (max-width: 880px) { + .sidebar, + .sidebar .adsbygoogle { + display: none; + } +} + +.under-board-container, +.under-board-container .adsbygoogle { + width: 100%; + height: 0; + max-height: 0; +} + +.under-board-container .adsbygoogle { + display: none; +} + +@media (max-width: 880px) { + .under-board-container, + .under-board-container .adsbygoogle { + height: auto !important; + max-height: none !important; + display: block; + margin-top: 38px; + } +} + +.cookie-notice { + display: none !important; + position: fixed; + font-size: 15px; + z-index: 999999; + right: 20px; + bottom: 20px; + width: 20%; + min-width: 460px; + background: #e8e5db; + padding: 10px; + margin-top: 30px; + box-sizing: border-box; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; +} + +@media screen and (max-width: 520px) { + .cookie-notice { + width: auto; + left: 20px; + min-width: auto; + } +} + +.cookie-notice, +.cookie-notice p a { + color: #a09488; +} + +.cookie-notice p { + margin-bottom: 0; + flex: 1; +} + +.cookie-notice, +.cookie-notice p { + line-height: 20px; +} + +.cookie-notice-dismiss-button { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + flex: 0 0 auto; + margin-left: 20px; +} + +#ez-cookie-dialog input { + appearance: auto !important; +} + +.ezmob-footer { + background-color: #e8e5db !important; + border: none !important; +} + +.ezmob-footer-close { + font-size: 0 !important; + padding: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + text-align: center !important; + background-color: #8f7a66 !important; + top: -25px !important; + color: white !important; + border: none !important; + border-radius: 3px !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + width: 30px !important; + height: 25px !important; +} + +.ezmob-footer-close::before { + content: "×" !important; + font-size: 26px !important; +} + +ins.adsbygoogle.ad-collapsible.ezfound { + display: none; +} + +.cc_banner-wrapper { + height: 0 !important; + animation: none !important; +} + +.cc_container { + bottom: 106px !important; + left: 6px !important; + right: auto !important; + top: auto !important; + width: 400px !important; + border-radius: 3px !important; + font: inherit !important; + background: #53473c !important; + padding: 15px !important; + color: rgba(255, 255, 255, 0.7) !important; +} + +@media screen and (max-width: 520px) { + .cc_container { + width: auto !important; + bottom: 6px !important; + right: 6px !important; + } +} + +.cc_container * { + animation: none !important; +} + +.cc_container .cc_message { + margin: 0 !important; + font-size: 15px !important; + line-height: 1.2 !important; +} + +.cc_container .cc_btn { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + width: auto !important; + background-color: rgba(255, 255, 255, 0.7) !important; + color: #53473c !important; + height: auto !important; + font-size: 15px !important; +} + +.cc_container a:not(.cc_btn) { + color: white !important; +} + +.start-playing-link { + margin-right: 15px; +} + +.feedback-button { + float: right; +} + +@media screen and (min-width: 520px) { + .feedback-button { + float: none; + position: fixed; + top: 0; + right: 0; + font-size: 13px; + text-decoration: none; + padding: 2px 0; + background-color: #8f7a66; + color: #f9f6f2; + border-bottom-left-radius: 4px; + transform-origin: left bottom; + width: 122px; + text-align: center; + opacity: 0.4; + transition: opacity 200ms ease; + z-index: 1; + } + .feedback-button:hover { + opacity: 1; + } +}