:root{--size:100px;touch-action:none}body{background-color:#000;font-family:'Comic Sans MS'}h1{color:#FFF;font-size:5em;text-align:center;margin:10px}h2{color:#FFF;font-size:2em;text-align:center;margin:10px}p{color:#FFF;font-size:1em;text-align:center;margin:10px}.cell{width:var(--size);height:var(--size);border-radius:calc(var(--size) * .15);background-color:#AAA;margin:calc(var(--size) / 20)}.tile{position:absolute;width:var(--size);height:var(--size);border-radius:calc(var(--size) * .15);margin:calc(var(--size) / 20);display:flex;justify-content:center;align-items:center;transition-property:all;transition-duration:250ms;transform-origin:center center}.tile.hidden{width:0;height:0}.tile p{position:relative;font-weight:bold;color:#766;width:100%;height:100%;top:50%;left:50%;translate:-50% -50%;margin:0;align-content:center}.tile.hidden p{font-size:0}.tile.tile-2{background:#FFE}.tile.tile-2 p{font-size:calc(var(--size) * .5)}.tile.tile-4{background:#FEC}.tile.tile-4 p{font-size:calc(var(--size) * .5)}.tile.tile-8{background:#FEB}.tile.tile-8 p{font-size:calc(var(--size) * .5)}.tile.tile-16{background:#FEB}.tile.tile-16 p{font-size:calc(var(--size) * .45)}.tile.tile-32{background:#FDA}.tile.tile-32 p{font-size:calc(var(--size) * .45)}.tile.tile-64{background:#FC9}.tile.tile-64 p{font-size:calc(var(--size) * .45)}.tile.tile-128{background:#FC9}.tile.tile-128 p{font-size:calc(var(--size) * .4)}.tile.tile-256{background:#FB8}.tile.tile-256 p{font-size:calc(var(--size) * .4)}.tile.tile-512{background:#FA7}.tile.tile-512 p{font-size:calc(var(--size) * .4)}.tile.tile-1024{background:#FA6}.tile.tile-1024 p{font-size:calc(var(--size) * .3)}.tile.tile-2048{background:#F95}.tile.tile-2048 p{font-size:calc(var(--size) * .3)}.tile.tile-4096{background:#F84}.tile.tile-4096 p{font-size:calc(var(--size) * .3)}.tile.tile-8192{background:#F72}.tile.tile-8192 p{font-size:calc(var(--size) * .3)}.tile.tile-16384{background:#F62}.tile.tile-16384 p{font-size:calc(var(--size) * .25)}.tile.tile-32768{background:#F51}.tile.tile-32768 p{font-size:calc(var(--size) * .25)}.tile.tile-65536{background:#F51}.tile.tile-65536 p{font-size:calc(var(--size) * .25)}.tile.pos-1-1{left:calc(var(--size) * 4.5 / 90);top:0}.tile.pos-2-1{left:calc(var(--size) * 4.5 * 23 / 90);top:0}.tile.pos-3-1{left:calc(var(--size) * 4.5 * 45 / 90);top:0}.tile.pos-4-1{left:calc(var(--size) * 4.5 * 67 / 90);top:0}.tile.pos-1-2{left:calc(var(--size) * 4.5 / 90);top:calc(var(--size) * 1.1)}.tile.pos-2-2{left:calc(var(--size) * 4.5 * 23 / 90);top:calc(var(--size) * 1.1)}.tile.pos-3-2{left:calc(var(--size) * 4.5 * 45 / 90);top:calc(var(--size) * 1.1)}.tile.pos-4-2{left:calc(var(--size) * 4.5 * 67 / 90);top:calc(var(--size) * 1.1)}.tile.pos-1-3{left:calc(var(--size) * 4.5 / 90);top:calc(var(--size) * 2.2)}.tile.pos-2-3{left:calc(var(--size) * 4.5 * 23 / 90);top:calc(var(--size) * 2.2)}.tile.pos-3-3{left:calc(var(--size) * 4.5 * 45 / 90);top:calc(var(--size) * 2.2)}.tile.pos-4-3{left:calc(var(--size) * 4.5 * 67 / 90);top:calc(var(--size) * 2.2)}.tile.pos-1-4{left:calc(var(--size) * 4.5 / 90);top:calc(var(--size) * 3.3)}.tile.pos-2-4{left:calc(var(--size) * 4.5 * 23 / 90);top:calc(var(--size) * 3.3)}.tile.pos-3-4{left:calc(var(--size) * 4.5 * 45 / 90);top:calc(var(--size) * 3.3)}.tile.pos-4-4{left:calc(var(--size) * 4.5 * 67 / 90);top:calc(var(--size) * 3.3)}.board{height:100px;background-color:#888;border-radius:10px;margin:10px}.flex{display:flex;justify-content:center;align-items:center}.center{display:flex;flex-direction:column;align-items:center}#game-container{position:relative;width:calc(var(--size) * 4.5);height:calc(var(--size) * 4.4);left:50%;translate:-50% 0}#game-title{font-size:4em;margin:10px}#new-game{background-color:#888;border-radius:10px;margin:10px}#game-background{position:absolute;background-color:#CCC;border-radius:calc(var(--size) * 4.5 * .05);width:calc(var(--size) * 4.5);height:calc(var(--size) * 4.4)}#tile-container{position:absolute;top:0;left:0}#footer{position:absolute;top:0;right:0}#footer *{position:absolute;color:#FFF;right:0;font-size:2em;font-family:'Comic Sans MS';text-align:center}