1
@import url(fonts/clear-sans.css);
2
html, body {
3
  margin: 0;
4
  padding: 0;
5
  background: #faf8ef;
6
  color: #776e65;
7
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
8
  font-size: 18px; }
9

10
body {
11
  margin: 80px 0; }
12

13
.heading:after {
14
  content: "";
15
  display: block;
16
  clear: both; }
17

18
h1.title {
19
  font-size: 80px;
20
  font-weight: bold;
21
  margin: 0;
22
  display: block;
23
  float: left; }
24

25
@-webkit-keyframes move-up {
26
  0% {
27
    top: 25px;
28
    opacity: 1; }
29

30
  100% {
31
    top: -50px;
32
    opacity: 0; } }
33

34
@-moz-keyframes move-up {
35
  0% {
36
    top: 25px;
37
    opacity: 1; }
38

39
  100% {
40
    top: -50px;
41
    opacity: 0; } }
42

43
@keyframes move-up {
44
  0% {
45
    top: 25px;
46
    opacity: 1; }
47

48
  100% {
49
    top: -50px;
50
    opacity: 0; } }
51

52
.score-container {
53
  position: relative;
54
  float: right;
55
  background: #bbada0;
56
  padding: 15px 25px;
57
  font-size: 25px;
58
  height: 25px;
59
  line-height: 47px;
60
  font-weight: bold;
61
  border-radius: 3px;
62
  color: white;
63
  margin-top: 8px; }
64
  .score-container:after {
65
    position: absolute;
66
    width: 100%;
67
    top: 10px;
68
    left: 0;
69
    content: "Score";
70
    text-transform: uppercase;
71
    font-size: 13px;
72
    line-height: 13px;
73
    text-align: center;
74
    color: #eee4da; }
75
  .score-container .score-addition {
76
    position: absolute;
77
    right: 30px;
78
    color: red;
79
    font-size: 25px;
80
    line-height: 25px;
81
    font-weight: bold;
82
    color: rgba(119, 110, 101, 0.9);
83
    z-index: 100;
84
    -webkit-animation: move-up 600ms ease-in;
85
    -moz-animation: move-up 600ms ease-in;
86
    -webkit-animation-fill-mode: both;
87
    -moz-animation-fill-mode: both; }
88

89
p {
90
  margin-top: 0;
91
  margin-bottom: 10px;
92
  line-height: 1.65; }
93

94
a {
95
  color: #776e65;
96
  font-weight: bold;
97
  text-decoration: underline;
98
  cursor: pointer; }
99

100
strong.important {
101
  text-transform: uppercase; }
102

103
hr {
104
  border: none;
105
  border-bottom: 1px solid #d8d4d0;
106
  margin-top: 20px;
107
  margin-bottom: 30px; }
108

109
.container {
110
  width: 500px;
111
  margin: 0 auto; }
112

113
@-webkit-keyframes fade-in {
114
  0% {
115
    opacity: 0; }
116

117
  100% {
118
    opacity: 1; } }
119

120
@-moz-keyframes fade-in {
121
  0% {
122
    opacity: 0; }
123

124
  100% {
125
    opacity: 1; } }
126

127
@keyframes fade-in {
128
  0% {
129
    opacity: 0; }
130

131
  100% {
132
    opacity: 1; } }
133

134
.game-container {
135
  margin-top: 40px;
136
  position: relative;
137
  padding: 15px;
138
  cursor: default;
139
  -webkit-touch-callout: none;
140
  -webkit-user-select: none;
141
  -moz-user-select: none;
142
  background: #bbada0;
143
  border-radius: 6px;
144
  width: 500px;
145
  height: 500px;
146
  -webkit-box-sizing: border-box;
147
  -moz-box-sizing: border-box;
148
  box-sizing: border-box; }
149
  .game-container .game-message {
150
    display: none;
151
    position: absolute;
152
    top: 0;
153
    right: 0;
154
    bottom: 0;
155
    left: 0;
156
    background: rgba(238, 228, 218, 0.5);
157
    z-index: 100;
158
    text-align: center;
159
    -webkit-animation: fade-in 800ms ease 1200ms;
160
    -moz-animation: fade-in 800ms ease 1200ms;
161
    -webkit-animation-fill-mode: both;
162
    -moz-animation-fill-mode: both; }
163
    .game-container .game-message p {
164
      font-size: 60px;
165
      font-weight: bold;
166
      height: 60px;
167
      line-height: 60px;
168
      margin-top: 222px; }
169
    .game-container .game-message .lower {
170
      display: block;
171
      margin-top: 59px; }
172
    .game-container .game-message a {
173
      display: inline-block;
174
      background: #8f7a66;
175
      border-radius: 3px;
176
      padding: 0 20px;
177
      text-decoration: none;
178
      color: #f9f6f2;
179
      height: 40px;
180
      line-height: 42px;
181
      margin-left: 9px; }
182
    .game-container .game-message .score-sharing {
183
      display: inline-block;
184
      vertical-align: middle;
185
      margin-left: 10px; }
186
    .game-container .game-message.game-won {
187
      background: rgba(237, 194, 46, 0.5);
188
      color: #f9f6f2; }
189
    .game-container .game-message.game-won, .game-container .game-message.game-over {
190
      display: block; }
191

192
.grid-container {
193
  position: absolute;
194
  z-index: 1; }
195

196
.grid-row {
197
  margin-bottom: 15px; }
198
  .grid-row:last-child {
199
    margin-bottom: 0; }
200
  .grid-row:after {
201
    content: "";
202
    display: block;
203
    clear: both; }
204

205
.grid-cell {
206
  width: 106.25px;
207
  height: 106.25px;
208
  margin-right: 15px;
209
  float: left;
210
  border-radius: 3px;
211
  background: rgba(238, 228, 218, 0.35); }
212
  .grid-cell:last-child {
213
    margin-right: 0; }
214

215
.tile-container {
216
  position: absolute;
217
  z-index: 2; }
218

219
.tile {
220
  width: 106.25px;
221
  height: 106.25px;
222
  line-height: 116.25px; }
223
  .tile.tile-position-1-1 {
224
    position: absolute;
225
    left: 0px;
226
    top: 0px; }
227
  .tile.tile-position-1-2 {
228
    position: absolute;
229
    left: 0px;
230
    top: 121px; }
231
  .tile.tile-position-1-3 {
232
    position: absolute;
233
    left: 0px;
234
    top: 243px; }
235
  .tile.tile-position-1-4 {
236
    position: absolute;
237
    left: 0px;
238
    top: 364px; }
239
  .tile.tile-position-2-1 {
240
    position: absolute;
241
    left: 121px;
242
    top: 0px; }
243
  .tile.tile-position-2-2 {
244
    position: absolute;
245
    left: 121px;
246
    top: 121px; }
247
  .tile.tile-position-2-3 {
248
    position: absolute;
249
    left: 121px;
250
    top: 243px; }
251
  .tile.tile-position-2-4 {
252
    position: absolute;
253
    left: 121px;
254
    top: 364px; }
255
  .tile.tile-position-3-1 {
256
    position: absolute;
257
    left: 243px;
258
    top: 0px; }
259
  .tile.tile-position-3-2 {
260
    position: absolute;
261
    left: 243px;
262
    top: 121px; }
263
  .tile.tile-position-3-3 {
264
    position: absolute;
265
    left: 243px;
266
    top: 243px; }
267
  .tile.tile-position-3-4 {
268
    position: absolute;
269
    left: 243px;
270
    top: 364px; }
271
  .tile.tile-position-4-1 {
272
    position: absolute;
273
    left: 364px;
274
    top: 0px; }
275
  .tile.tile-position-4-2 {
276
    position: absolute;
277
    left: 364px;
278
    top: 121px; }
279
  .tile.tile-position-4-3 {
280
    position: absolute;
281
    left: 364px;
282
    top: 243px; }
283
  .tile.tile-position-4-4 {
284
    position: absolute;
285
    left: 364px;
286
    top: 364px; }
287

288
.tile {
289
  border-radius: 3px;
290
  background: #eee4da;
291
  text-align: center;
292
  font-weight: bold;
293
  z-index: 10;
294
  font-size: 55px;
295
  -webkit-transition: 100ms ease-in-out;
296
  -moz-transition: 100ms ease-in-out;
297
  -webkit-transition-property: top, left;
298
  -moz-transition-property: top, left; }
299
  .tile.tile-2 {
300
    background: #eee4da;
301
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
302
  .tile.tile-4 {
303
    background: #ede0c8;
304
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
305
  .tile.tile-8 {
306
    color: #f9f6f2;
307
    background: #f2b179; }
308
  .tile.tile-16 {
309
    color: #f9f6f2;
310
    background: #f59563; }
311
  .tile.tile-32 {
312
    color: #f9f6f2;
313
    background: #f67c5f; }
314
  .tile.tile-64 {
315
    color: #f9f6f2;
316
    background: #f65e3b; }
317
  .tile.tile-128 {
318
    color: #f9f6f2;
319
    background: #edcf72;
320
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
321
    font-size: 45px; }
322
    @media screen and (max-width: 480px) {
323
      .tile.tile-128 {
324
        font-size: 25px; } }
325
  .tile.tile-256 {
326
    color: #f9f6f2;
327
    background: #edcc61;
328
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
329
    font-size: 45px; }
330
    @media screen and (max-width: 480px) {
331
      .tile.tile-256 {
332
        font-size: 25px; } }
333
  .tile.tile-512 {
334
    color: #f9f6f2;
335
    background: #edc850;
336
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
337
    font-size: 45px; }
338
    @media screen and (max-width: 480px) {
339
      .tile.tile-512 {
340
        font-size: 25px; } }
341
  .tile.tile-1024 {
342
    color: #f9f6f2;
343
    background: #edc53f;
344
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
345
    font-size: 35px; }
346
    @media screen and (max-width: 480px) {
347
      .tile.tile-1024 {
348
        font-size: 15px; } }
349
  .tile.tile-2048 {
350
    color: #f9f6f2;
351
    background: #edc22e;
352
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
353
    font-size: 35px; }
354
    @media screen and (max-width: 480px) {
355
      .tile.tile-2048 {
356
        font-size: 15px; } }
357

358
@-webkit-keyframes appear {
359
  0% {
360
    opacity: 0;
361
    -webkit-transform: scale(0);
362
    -moz-transform: scale(0); }
363

364
  100% {
365
    opacity: 1;
366
    -webkit-transform: scale(1);
367
    -moz-transform: scale(1); } }
368

369
@-moz-keyframes appear {
370
  0% {
371
    opacity: 0;
372
    -webkit-transform: scale(0);
373
    -moz-transform: scale(0); }
374

375
  100% {
376
    opacity: 1;
377
    -webkit-transform: scale(1);
378
    -moz-transform: scale(1); } }
379

380
@keyframes appear {
381
  0% {
382
    opacity: 0;
383
    -webkit-transform: scale(0);
384
    -moz-transform: scale(0); }
385

386
  100% {
387
    opacity: 1;
388
    -webkit-transform: scale(1);
389
    -moz-transform: scale(1); } }
390

391
.tile-new {
392
  -webkit-animation: appear 200ms ease 100ms;
393
  -moz-animation: appear 200ms ease 100ms;
394
  -webkit-animation-fill-mode: both;
395
  -moz-animation-fill-mode: both; }
396

397
@-webkit-keyframes pop {
398
  0% {
399
    -webkit-transform: scale(0);
400
    -moz-transform: scale(0); }
401

402
  50% {
403
    -webkit-transform: scale(1.2);
404
    -moz-transform: scale(1.2); }
405

406
  100% {
407
    -webkit-transform: scale(1);
408
    -moz-transform: scale(1); } }
409

410
@-moz-keyframes pop {
411
  0% {
412
    -webkit-transform: scale(0);
413
    -moz-transform: scale(0); }
414

415
  50% {
416
    -webkit-transform: scale(1.2);
417
    -moz-transform: scale(1.2); }
418

419
  100% {
420
    -webkit-transform: scale(1);
421
    -moz-transform: scale(1); } }
422

423
@keyframes pop {
424
  0% {
425
    -webkit-transform: scale(0);
426
    -moz-transform: scale(0); }
427

428
  50% {
429
    -webkit-transform: scale(1.2);
430
    -moz-transform: scale(1.2); }
431

432
  100% {
433
    -webkit-transform: scale(1);
434
    -moz-transform: scale(1); } }
435

436
.tile-merged {
437
  z-index: 20;
438
  -webkit-animation: pop 200ms ease 100ms;
439
  -moz-animation: pop 200ms ease 100ms;
440
  -webkit-animation-fill-mode: both;
441
  -moz-animation-fill-mode: both; }
442

443
.game-intro {
444
  margin-bottom: 0; }
445

446
.game-explanation {
447
  margin-top: 50px; }
448

449
.sharing {
450
  margin-top: 20px;
451
  text-align: center; }
452
  .sharing > iframe, .sharing span {
453
    display: inline-block;
454
    vertical-align: middle; }
455

456
@media screen and (max-width: 480px) {
457
  html, body {
458
    font-size: 15px; }
459

460
  body {
461
    margin: 20px 0;
462
    padding: 0 20px; }
463

464
  h1.title {
465
    font-size: 50px; }
466

467
  .container {
468
    width: 280px;
469
    margin: 0 auto; }
470

471
  .score-container {
472
    margin-top: 0; }
473

474
  .heading {
475
    margin-bottom: 10px; }
476

477
  .game-container {
478
    margin-top: 40px;
479
    position: relative;
480
    padding: 10px;
481
    cursor: default;
482
    -webkit-touch-callout: none;
483
    -webkit-user-select: none;
484
    -moz-user-select: none;
485
    background: #bbada0;
486
    border-radius: 6px;
487
    width: 280px;
488
    height: 280px;
489
    -webkit-box-sizing: border-box;
490
    -moz-box-sizing: border-box;
491
    box-sizing: border-box; }
492
    .game-container .game-message {
493
      display: none;
494
      position: absolute;
495
      top: 0;
496
      right: 0;
497
      bottom: 0;
498
      left: 0;
499
      background: rgba(238, 228, 218, 0.5);
500
      z-index: 100;
501
      text-align: center;
502
      -webkit-animation: fade-in 800ms ease 1200ms;
503
      -moz-animation: fade-in 800ms ease 1200ms;
504
      -webkit-animation-fill-mode: both;
505
      -moz-animation-fill-mode: both; }
506
      .game-container .game-message p {
507
        font-size: 60px;
508
        font-weight: bold;
509
        height: 60px;
510
        line-height: 60px;
511
        margin-top: 222px; }
512
      .game-container .game-message .lower {
513
        display: block;
514
        margin-top: 59px; }
515
      .game-container .game-message a {
516
        display: inline-block;
517
        background: #8f7a66;
518
        border-radius: 3px;
519
        padding: 0 20px;
520
        text-decoration: none;
521
        color: #f9f6f2;
522
        height: 40px;
523
        line-height: 42px;
524
        margin-left: 9px; }
525
      .game-container .game-message .score-sharing {
526
        display: inline-block;
527
        vertical-align: middle;
528
        margin-left: 10px; }
529
      .game-container .game-message.game-won {
530
        background: rgba(237, 194, 46, 0.5);
531
        color: #f9f6f2; }
532
      .game-container .game-message.game-won, .game-container .game-message.game-over {
533
        display: block; }
534

535
  .grid-container {
536
    position: absolute;
537
    z-index: 1; }
538

539
  .grid-row {
540
    margin-bottom: 10px; }
541
    .grid-row:last-child {
542
      margin-bottom: 0; }
543
    .grid-row:after {
544
      content: "";
545
      display: block;
546
      clear: both; }
547

548
  .grid-cell {
549
    width: 57.5px;
550
    height: 57.5px;
551
    margin-right: 10px;
552
    float: left;
553
    border-radius: 3px;
554
    background: rgba(238, 228, 218, 0.35); }
555
    .grid-cell:last-child {
556
      margin-right: 0; }
557

558
  .tile-container {
559
    position: absolute;
560
    z-index: 2; }
561

562
  .tile {
563
    width: 57.5px;
564
    height: 57.5px;
565
    line-height: 67.5px; }
566
    .tile.tile-position-1-1 {
567
      position: absolute;
568
      left: 0px;
569
      top: 0px; }
570
    .tile.tile-position-1-2 {
571
      position: absolute;
572
      left: 0px;
573
      top: 68px; }
574
    .tile.tile-position-1-3 {
575
      position: absolute;
576
      left: 0px;
577
      top: 135px; }
578
    .tile.tile-position-1-4 {
579
      position: absolute;
580
      left: 0px;
581
      top: 203px; }
582
    .tile.tile-position-2-1 {
583
      position: absolute;
584
      left: 68px;
585
      top: 0px; }
586
    .tile.tile-position-2-2 {
587
      position: absolute;
588
      left: 68px;
589
      top: 68px; }
590
    .tile.tile-position-2-3 {
591
      position: absolute;
592
      left: 68px;
593
      top: 135px; }
594
    .tile.tile-position-2-4 {
595
      position: absolute;
596
      left: 68px;
597
      top: 203px; }
598
    .tile.tile-position-3-1 {
599
      position: absolute;
600
      left: 135px;
601
      top: 0px; }
602
    .tile.tile-position-3-2 {
603
      position: absolute;
604
      left: 135px;
605
      top: 68px; }
606
    .tile.tile-position-3-3 {
607
      position: absolute;
608
      left: 135px;
609
      top: 135px; }
610
    .tile.tile-position-3-4 {
611
      position: absolute;
612
      left: 135px;
613
      top: 203px; }
614
    .tile.tile-position-4-1 {
615
      position: absolute;
616
      left: 203px;
617
      top: 0px; }
618
    .tile.tile-position-4-2 {
619
      position: absolute;
620
      left: 203px;
621
      top: 68px; }
622
    .tile.tile-position-4-3 {
623
      position: absolute;
624
      left: 203px;
625
      top: 135px; }
626
    .tile.tile-position-4-4 {
627
      position: absolute;
628
      left: 203px;
629
      top: 203px; }
630

631
  .game-container {
632
    margin-top: 20px; }
633

634
  .tile {
635
    font-size: 35px; }
636

637
  .game-message p {
638
    font-size: 30px !important;
639
    height: 30px !important;
640
    line-height: 30px !important;
641
    margin-top: 90px !important; }
642
  .game-message .lower {
643
    margin-top: 30px !important; } }
644
.btc-donate {
645
  position: relative;
646
  margin-left: 20px;
647
  display: inline-block;
648
  background: #8f7a66;
649
  border-radius: 3px;
650
  padding: 0 20px;
651
  text-decoration: none;
652
  color: #f9f6f2;
653
  height: 40px;
654
  line-height: 42px;
655
  cursor: pointer; }
656
  .btc-donate img {
657
    vertical-align: -4px;
658
    margin-right: 8px; }
659
  .btc-donate a {
660
    color: #f9f6f2;
661
    text-decoration: none;
662
    font-weight: normal; }
663
  .btc-donate .address {
664
    cursor: auto;
665
    position: absolute;
666
    width: 340px;
667
    right: 50%;
668
    margin-right: -170px;
669
    padding-bottom: 7px;
670
    top: -30px;
671
    opacity: 0;
672
    pointer-events: none;
673
    -webkit-transition: 400ms ease;
674
    -moz-transition: 400ms ease;
675
    -webkit-transition-property: top, opacity;
676
    -moz-transition-property: top, opacity; }
677
    .btc-donate .address:after {
678
      position: absolute;
679
      border-top: 10px solid #bbada0;
680
      border-right: 7px solid transparent;
681
      border-left: 7px solid transparent;
682
      content: "";
683
      bottom: 0px;
684
      left: 50%;
685
      margin-left: -7px; }
686
    .btc-donate .address code {
687
      background-color: #bbada0;
688
      padding: 10px 15px;
689
      width: 100%;
690
      border-radius: 3px;
691
      line-height: 1;
692
      font-weight: normal;
693
      font-size: 15px;
694
      font-family: Consolas, "Liberation Mono", Courier, monospace;
695
      text-align: center; }
696
  .btc-donate:hover .address, .btc-donate .address:hover .address {
697
    opacity: 1;
698
    top: -45px;
699
    pointer-events: auto; }
700