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
.scores-container {
53
  float: right;
54
  text-align: right; }
55

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

93
.score-container:after {
94
  content: "Score"; }
95

96
.best-container:after {
97
  content: "Best"; }
98

99
p {
100
  margin-top: 0;
101
  margin-bottom: 10px;
102
  line-height: 1.65; }
103

104
a {
105
  color: #776e65;
106
  font-weight: bold;
107
  text-decoration: underline;
108
  cursor: pointer; }
109

110
strong.important {
111
  text-transform: uppercase; }
112

113
hr {
114
  border: none;
115
  border-bottom: 1px solid #d8d4d0;
116
  margin-top: 20px;
117
  margin-bottom: 30px; }
118

119
.container {
120
  width: 984px;
121
  margin: 0 auto; }
122

123
@-webkit-keyframes fade-in {
124
  0% {
125
    opacity: 0; }
126

127
  100% {
128
    opacity: 1; } }
129

130
@-moz-keyframes fade-in {
131
  0% {
132
    opacity: 0; }
133

134
  100% {
135
    opacity: 1; } }
136

137
@keyframes fade-in {
138
  0% {
139
    opacity: 0; }
140

141
  100% {
142
    opacity: 1; } }
143

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

198
.grid-container {
199
  position: absolute;
200
  z-index: 1; }
201

202
.grid-row {
203
  margin-bottom: 15px; }
204
  .grid-row:last-child {
205
    margin-bottom: 0; }
206
  .grid-row:after {
207
    content: "";
208
    display: block;
209
    clear: both; }
210

211
.grid-cell {
212
  width: 106.25px;
213
  height: 106.25px;
214
  margin-right: 15px;
215
  float: left;
216
  border-radius: 3px;
217
  background: rgba(238, 228, 218, 0.35); }
218
  .grid-cell:last-child {
219
    margin-right: 0; }
220

221
.tile-container {
222
  position: absolute;
223
  z-index: 2; }
224

225
.tile {
226
  width: 106.25px;
227
  height: 106.25px;
228
  line-height: 116.25px; }
229
  .tile.tile-position-1-1 {
230
    position: absolute;
231
    left: 0px;
232
    top: 0px; }
233
  .tile.tile-position-1-2 {
234
    position: absolute;
235
    left: 0px;
236
    top: 121px; }
237
  .tile.tile-position-1-3 {
238
    position: absolute;
239
    left: 0px;
240
    top: 243px; }
241
  .tile.tile-position-1-4 {
242
    position: absolute;
243
    left: 0px;
244
    top: 364px; }
245
  .tile.tile-position-1-5 {
246
    position: absolute;
247
    left: 0px;
248
    top: 485px; }
249
  .tile.tile-position-1-6 {
250
    position: absolute;
251
    left: 0px;
252
    top: 606px; }
253
  .tile.tile-position-1-7 {
254
    position: absolute;
255
    left: 0px;
256
    top: 728px; }
257
  .tile.tile-position-1-8 {
258
    position: absolute;
259
    left: 0px;
260
    top: 849px; }
261
  .tile.tile-position-2-1 {
262
    position: absolute;
263
    left: 121px;
264
    top: 0px; }
265
  .tile.tile-position-2-2 {
266
    position: absolute;
267
    left: 121px;
268
    top: 121px; }
269
  .tile.tile-position-2-3 {
270
    position: absolute;
271
    left: 121px;
272
    top: 243px; }
273
  .tile.tile-position-2-4 {
274
    position: absolute;
275
    left: 121px;
276
    top: 364px; }
277
  .tile.tile-position-2-5 {
278
    position: absolute;
279
    left: 121px;
280
    top: 485px; }
281
  .tile.tile-position-2-6 {
282
    position: absolute;
283
    left: 121px;
284
    top: 606px; }
285
  .tile.tile-position-2-7 {
286
    position: absolute;
287
    left: 121px;
288
    top: 728px; }
289
  .tile.tile-position-2-8 {
290
    position: absolute;
291
    left: 121px;
292
    top: 849px; }
293
  .tile.tile-position-3-1 {
294
    position: absolute;
295
    left: 243px;
296
    top: 0px; }
297
  .tile.tile-position-3-2 {
298
    position: absolute;
299
    left: 243px;
300
    top: 121px; }
301
  .tile.tile-position-3-3 {
302
    position: absolute;
303
    left: 243px;
304
    top: 243px; }
305
  .tile.tile-position-3-4 {
306
    position: absolute;
307
    left: 243px;
308
    top: 364px; }
309
  .tile.tile-position-3-5 {
310
    position: absolute;
311
    left: 243px;
312
    top: 485px; }
313
  .tile.tile-position-3-6 {
314
    position: absolute;
315
    left: 243px;
316
    top: 606px; }
317
  .tile.tile-position-3-7 {
318
    position: absolute;
319
    left: 243px;
320
    top: 728px; }
321
  .tile.tile-position-3-8 {
322
    position: absolute;
323
    left: 243px;
324
    top: 849px; }
325
  .tile.tile-position-4-1 {
326
    position: absolute;
327
    left: 364px;
328
    top: 0px; }
329
  .tile.tile-position-4-2 {
330
    position: absolute;
331
    left: 364px;
332
    top: 121px; }
333
  .tile.tile-position-4-3 {
334
    position: absolute;
335
    left: 364px;
336
    top: 243px; }
337
  .tile.tile-position-4-4 {
338
    position: absolute;
339
    left: 364px;
340
    top: 364px; }
341
  .tile.tile-position-4-5 {
342
    position: absolute;
343
    left: 364px;
344
    top: 485px; }
345
  .tile.tile-position-4-6 {
346
    position: absolute;
347
    left: 364px;
348
    top: 606px; }
349
  .tile.tile-position-4-7 {
350
    position: absolute;
351
    left: 364px;
352
    top: 728px; }
353
  .tile.tile-position-4-8 {
354
    position: absolute;
355
    left: 364px;
356
    top: 849px; }
357
  .tile.tile-position-5-1 {
358
    position: absolute;
359
    left: 485px;
360
    top: 0px; }
361
  .tile.tile-position-5-2 {
362
    position: absolute;
363
    left: 485px;
364
    top: 121px; }
365
  .tile.tile-position-5-3 {
366
    position: absolute;
367
    left: 485px;
368
    top: 243px; }
369
  .tile.tile-position-5-4 {
370
    position: absolute;
371
    left: 485px;
372
    top: 364px; }
373
  .tile.tile-position-5-5 {
374
    position: absolute;
375
    left: 485px;
376
    top: 485px; }
377
  .tile.tile-position-5-6 {
378
    position: absolute;
379
    left: 485px;
380
    top: 606px; }
381
  .tile.tile-position-5-7 {
382
    position: absolute;
383
    left: 485px;
384
    top: 728px; }
385
  .tile.tile-position-5-8 {
386
    position: absolute;
387
    left: 485px;
388
    top: 849px; }
389
  .tile.tile-position-6-1 {
390
    position: absolute;
391
    left: 606px;
392
    top: 0px; }
393
  .tile.tile-position-6-2 {
394
    position: absolute;
395
    left: 606px;
396
    top: 121px; }
397
  .tile.tile-position-6-3 {
398
    position: absolute;
399
    left: 606px;
400
    top: 243px; }
401
  .tile.tile-position-6-4 {
402
    position: absolute;
403
    left: 606px;
404
    top: 364px; }
405
  .tile.tile-position-6-5 {
406
    position: absolute;
407
    left: 606px;
408
    top: 485px; }
409
  .tile.tile-position-6-6 {
410
    position: absolute;
411
    left: 606px;
412
    top: 606px; }
413
  .tile.tile-position-6-7 {
414
    position: absolute;
415
    left: 606px;
416
    top: 728px; }
417
  .tile.tile-position-6-8 {
418
    position: absolute;
419
    left: 606px;
420
    top: 849px; }
421
  .tile.tile-position-7-1 {
422
    position: absolute;
423
    left: 728px;
424
    top: 0px; }
425
  .tile.tile-position-7-2 {
426
    position: absolute;
427
    left: 728px;
428
    top: 121px; }
429
  .tile.tile-position-7-3 {
430
    position: absolute;
431
    left: 728px;
432
    top: 243px; }
433
  .tile.tile-position-7-4 {
434
    position: absolute;
435
    left: 728px;
436
    top: 364px; }
437
  .tile.tile-position-7-5 {
438
    position: absolute;
439
    left: 728px;
440
    top: 485px; }
441
  .tile.tile-position-7-6 {
442
    position: absolute;
443
    left: 728px;
444
    top: 606px; }
445
  .tile.tile-position-7-7 {
446
    position: absolute;
447
    left: 728px;
448
    top: 728px; }
449
  .tile.tile-position-7-8 {
450
    position: absolute;
451
    left: 728px;
452
    top: 849px; }
453
  .tile.tile-position-8-1 {
454
    position: absolute;
455
    left: 849px;
456
    top: 0px; }
457
  .tile.tile-position-8-2 {
458
    position: absolute;
459
    left: 849px;
460
    top: 121px; }
461
  .tile.tile-position-8-3 {
462
    position: absolute;
463
    left: 849px;
464
    top: 243px; }
465
  .tile.tile-position-8-4 {
466
    position: absolute;
467
    left: 849px;
468
    top: 364px; }
469
  .tile.tile-position-8-5 {
470
    position: absolute;
471
    left: 849px;
472
    top: 485px; }
473
  .tile.tile-position-8-6 {
474
    position: absolute;
475
    left: 849px;
476
    top: 606px; }
477
  .tile.tile-position-8-7 {
478
    position: absolute;
479
    left: 849px;
480
    top: 728px; }
481
  .tile.tile-position-8-8 {
482
    position: absolute;
483
    left: 849px;
484
    top: 849px; }
485

486
.tile {
487
  border-radius: 3px;
488
  background: #eee4da;
489
  text-align: center;
490
  font-weight: bold;
491
  z-index: 10;
492
  font-size: 55px;
493
  -webkit-transition: 100ms ease-in-out;
494
  -moz-transition: 100ms ease-in-out;
495
  -webkit-transition-property: top, left;
496
  -moz-transition-property: top, left; }
497
  .tile.tile-2 {
498
    background: #eee4da;
499
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
500
  .tile.tile-4 {
501
    background: #ede0c8;
502
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
503
  .tile.tile-8 {
504
    color: #f9f6f2;
505
    background: #f2b179; }
506
  .tile.tile-16 {
507
    color: #f9f6f2;
508
    background: #f59563; }
509
  .tile.tile-32 {
510
    color: #f9f6f2;
511
    background: #f67c5f; }
512
  .tile.tile-64 {
513
    color: #f9f6f2;
514
    background: #f65e3b; }
515
  .tile.tile-128 {
516
    color: #f9f6f2;
517
    background: #edcf72;
518
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
519
    font-size: 45px; }
520
    @media screen and (max-width: 480px) {
521
      .tile.tile-128 {
522
        font-size: 25px; } }
523
  .tile.tile-256 {
524
    color: #f9f6f2;
525
    background: #edcc61;
526
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
527
    font-size: 45px; }
528
    @media screen and (max-width: 480px) {
529
      .tile.tile-256 {
530
        font-size: 25px; } }
531
  .tile.tile-512 {
532
    color: #f9f6f2;
533
    background: #edc850;
534
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
535
    font-size: 45px; }
536
    @media screen and (max-width: 480px) {
537
      .tile.tile-512 {
538
        font-size: 25px; } }
539
  .tile.tile-1024 {
540
    color: #f9f6f2;
541
    background: #edc53f;
542
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
543
    font-size: 35px; }
544
    @media screen and (max-width: 480px) {
545
      .tile.tile-1024 {
546
        font-size: 15px; } }
547
  .tile.tile-2048 {
548
    color: #f9f6f2;
549
    background: #edc22e;
550
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
551
    font-size: 35px; }
552
    @media screen and (max-width: 480px) {
553
      .tile.tile-2048 {
554
        font-size: 15px; } }
555
  .tile.tile-4096 {
556
    color: #f9f6f2;
557
    background: #ebb914;
558
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.63556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
559
    font-size: 35px; }
560
    @media screen and (max-width: 480px) {
561
      .tile.tile-4096 {
562
        font-size: 15px; } }
563
  .tile.tile-8192 {
564
    color: #f9f6f2;
565
    background: #d3a612;
566
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.71556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
567
    font-size: 35px; }
568
    @media screen and (max-width: 480px) {
569
      .tile.tile-8192 {
570
        font-size: 15px; } }
571
  .tile.tile-16384 {
572
    color: #f9f6f2;
573
    background: #bc9410;
574
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.79556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
575
    font-size: 30px; }
576
    @media screen and (max-width: 480px) {
577
      .tile.tile-16384 {
578
        font-size: 10px; } }
579
   .tile.tile-32768 {
580
    color: #f9f6f2;
581
    background: #bc9410;
582
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.79556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
583
    font-size: 30px; }
584
    @media screen and (max-width: 480px) {
585
      .tile.tile-32768 {
586
        font-size: 10px; } }
587
   .tile.tile-65536 {
588
    color: #f9f6f2;
589
    background: #bc9410;
590
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.79556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
591
    font-size: 30px; }
592
    @media screen and (max-width: 480px) {
593
      .tile.tile-65536 {
594
        font-size: 10px; } }
595
   .tile.tile-131072 {
596
    color: #f9f6f2;
597
    background: #bc9410;
598
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.79556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
599
    font-size: 30px; }
600
    @media screen and (max-width: 480px) {
601
      .tile.tile-131072 {
602
        font-size: 10px; } }
603
   .tile.tile-262144 {
604
    color: #f9f6f2;
605
    background: #bc9410;
606
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.79556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
607
    font-size: 30px; }
608
    @media screen and (max-width: 480px) {
609
      .tile.tile-262144 {
610
        font-size: 10px; } }
611
   .tile.tile-524288 {
612
    color: #f9f6f2;
613
    background: #bc9410;
614
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.79556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
615
    font-size: 30px; }
616
    @media screen and (max-width: 480px) {
617
      .tile.tile-523288 {
618
        font-size: 10px; } }
619
   .tile.tile-1048576 {
620
    color: #f9f6f2;
621
    background: #bc9410;
622
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.79556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
623
    font-size: 23px; }
624
    @media screen and (max-width: 480px) {
625
      .tile.tile-1048576 {
626
        font-size: 5px; } }
627

628
@-webkit-keyframes appear {
629
  0% {
630
    opacity: 0;
631
    -webkit-transform: scale(0);
632
    -moz-transform: scale(0); }
633

634
  100% {
635
    opacity: 1;
636
    -webkit-transform: scale(1);
637
    -moz-transform: scale(1); } }
638

639
@-moz-keyframes appear {
640
  0% {
641
    opacity: 0;
642
    -webkit-transform: scale(0);
643
    -moz-transform: scale(0); }
644

645
  100% {
646
    opacity: 1;
647
    -webkit-transform: scale(1);
648
    -moz-transform: scale(1); } }
649

650
@keyframes appear {
651
  0% {
652
    opacity: 0;
653
    -webkit-transform: scale(0);
654
    -moz-transform: scale(0); }
655

656
  100% {
657
    opacity: 1;
658
    -webkit-transform: scale(1);
659
    -moz-transform: scale(1); } }
660

661
.tile-new {
662
  -webkit-animation: appear 200ms ease 100ms;
663
  -moz-animation: appear 200ms ease 100ms;
664
  -webkit-animation-fill-mode: both;
665
  -moz-animation-fill-mode: both; }
666

667
@-webkit-keyframes pop {
668
  0% {
669
    -webkit-transform: scale(0);
670
    -moz-transform: scale(0); }
671

672
  50% {
673
    -webkit-transform: scale(1.2);
674
    -moz-transform: scale(1.2); }
675

676
  100% {
677
    -webkit-transform: scale(1);
678
    -moz-transform: scale(1); } }
679

680
@-moz-keyframes pop {
681
  0% {
682
    -webkit-transform: scale(0);
683
    -moz-transform: scale(0); }
684

685
  50% {
686
    -webkit-transform: scale(1.2);
687
    -moz-transform: scale(1.2); }
688

689
  100% {
690
    -webkit-transform: scale(1);
691
    -moz-transform: scale(1); } }
692

693
@keyframes pop {
694
  0% {
695
    -webkit-transform: scale(0);
696
    -moz-transform: scale(0); }
697

698
  50% {
699
    -webkit-transform: scale(1.2);
700
    -moz-transform: scale(1.2); }
701

702
  100% {
703
    -webkit-transform: scale(1);
704
    -moz-transform: scale(1); } }
705

706
.tile-merged {
707
  z-index: 20;
708
  -webkit-animation: pop 200ms ease 100ms;
709
  -moz-animation: pop 200ms ease 100ms;
710
  -webkit-animation-fill-mode: both;
711
  -moz-animation-fill-mode: both; }
712

713
.game-intro {
714
  margin-bottom: 0; }
715

716
.game-explanation {
717
  margin-top: 50px; }
718

719
@media screen and (max-width: 480px) {
720
  html, body {
721
    font-size: 15px; }
722

723
  body {
724
    margin: 20px 0;
725
    padding: 0 20px; }
726

727
  h1.title {
728
    font-size: 27px;
729
    margin-top: 15px; }
730

731
  .container {
732
    width: 550px;
733
    margin: 0 auto; }
734

735
  .score-container, .best-container {
736
    margin-top: 0;
737
    padding: 15px 10px;
738
    min-width: 40px; }
739

740
  .heading {
741
    margin-bottom: 10px; }
742

743
  .game-container {
744
    margin-top: 40px;
745
    position: relative;
746
    padding: 10px;
747
    cursor: default;
748
    -webkit-touch-callout: none;
749
    -webkit-user-select: none;
750
    -moz-user-select: none;
751
    background: #bbada0;
752
    border-radius: 6px;
753
    width: 550px;
754
    height: 550px;
755
    -webkit-box-sizing: border-box;
756
    -moz-box-sizing: border-box;
757
    box-sizing: border-box; }
758
    .game-container .game-message {
759
      display: none;
760
      position: absolute;
761
      top: 0;
762
      right: 0;
763
      bottom: 0;
764
      left: 0;
765
      background: rgba(238, 228, 218, 0.5);
766
      z-index: 100;
767
      text-align: center;
768
      -webkit-animation: fade-in 800ms ease 1200ms;
769
      -moz-animation: fade-in 800ms ease 1200ms;
770
      -webkit-animation-fill-mode: both;
771
      -moz-animation-fill-mode: both; }
772
      .game-container .game-message p {
773
        font-size: 60px;
774
        font-weight: bold;
775
        height: 60px;
776
        line-height: 60px;
777
        margin-top: 222px; }
778
      .game-container .game-message .lower {
779
        display: block;
780
        margin-top: 59px; }
781
      .game-container .game-message a {
782
        display: inline-block;
783
        background: #8f7a66;
784
        border-radius: 3px;
785
        padding: 0 20px;
786
        text-decoration: none;
787
        color: #f9f6f2;
788
        height: 40px;
789
        line-height: 42px;
790
        margin-left: 9px; }
791
      .game-container .game-message.game-won {
792
        background: rgba(237, 194, 46, 0.5);
793
        color: #f9f6f2; }
794
      .game-container .game-message.game-won, .game-container .game-message.game-over {
795
        display: block; }
796

797
  .grid-container {
798
    position: absolute;
799
    z-index: 1; }
800

801
  .grid-row {
802
    margin-bottom: 10px; }
803
    .grid-row:last-child {
804
      margin-bottom: 0; }
805
    .grid-row:after {
806
      content: "";
807
      display: block;
808
      clear: both; }
809

810
  .grid-cell {
811
    width: 57.5px;
812
    height: 57.5px;
813
    margin-right: 10px;
814
    float: left;
815
    border-radius: 3px;
816
    background: rgba(238, 228, 218, 0.35); }
817
    .grid-cell:last-child {
818
      margin-right: 0; }
819

820
  .tile-container {
821
    position: absolute;
822
    z-index: 2; }
823

824
  .tile {
825
    width: 57.5px;
826
    height: 57.5px;
827
    line-height: 67.5px; }
828
    .tile.tile-position-1-1 {
829
      position: absolute;
830
      left: 0px;
831
      top: 0px; }
832
    .tile.tile-position-1-2 {
833
      position: absolute;
834
      left: 0px;
835
      top: 68px; }
836
    .tile.tile-position-1-3 {
837
      position: absolute;
838
      left: 0px;
839
      top: 135px; }
840
    .tile.tile-position-1-4 {
841
      position: absolute;
842
      left: 0px;
843
      top: 203px; }
844
    .tile.tile-position-1-5 {
845
      position: absolute;
846
      left: 0px;
847
      top: 270px; }
848
    .tile.tile-position-1-6 {
849
      position: absolute;
850
      left: 0px;
851
      top: 338px; }
852
    .tile.tile-position-1-7 {
853
      position: absolute;
854
      left: 0px;
855
      top: 405px; }
856
    .tile.tile-position-1-8 {
857
      position: absolute;
858
      left: 0px;
859
      top: 473px; }
860
    .tile.tile-position-2-1 {
861
      position: absolute;
862
      left: 68px;
863
      top: 0px; }
864
    .tile.tile-position-2-2 {
865
      position: absolute;
866
      left: 68px;
867
      top: 68px; }
868
    .tile.tile-position-2-3 {
869
      position: absolute;
870
      left: 68px;
871
      top: 135px; }
872
    .tile.tile-position-2-4 {
873
      position: absolute;
874
      left: 68px;
875
      top: 203px; }
876
    .tile.tile-position-2-5 {
877
      position: absolute;
878
      left: 68px;
879
      top: 270px; }
880
    .tile.tile-position-2-6 {
881
      position: absolute;
882
      left: 68px;
883
      top: 338px; }
884
    .tile.tile-position-2-7 {
885
      position: absolute;
886
      left: 68px;
887
      top: 405px; }
888
    .tile.tile-position-2-8 {
889
      position: absolute;
890
      left: 68px;
891
      top: 473px; }
892
    .tile.tile-position-3-1 {
893
      position: absolute;
894
      left: 135px;
895
      top: 0px; }
896
    .tile.tile-position-3-2 {
897
      position: absolute;
898
      left: 135px;
899
      top: 68px; }
900
    .tile.tile-position-3-3 {
901
      position: absolute;
902
      left: 135px;
903
      top: 135px; }
904
    .tile.tile-position-3-4 {
905
      position: absolute;
906
      left: 135px;
907
      top: 203px; }
908
    .tile.tile-position-3-5 {
909
      position: absolute;
910
      left: 135px;
911
      top: 270px; }
912
    .tile.tile-position-3-6 {
913
      position: absolute;
914
      left: 135px;
915
      top: 338px; }
916
    .tile.tile-position-3-7 {
917
      position: absolute;
918
      left: 135px;
919
      top: 405px; }
920
    .tile.tile-position-3-8 {
921
      position: absolute;
922
      left: 135px;
923
      top: 473px; }
924
    .tile.tile-position-4-1 {
925
      position: absolute;
926
      left: 203px;
927
      top: 0px; }
928
    .tile.tile-position-4-2 {
929
      position: absolute;
930
      left: 203px;
931
      top: 68px; }
932
    .tile.tile-position-4-3 {
933
      position: absolute;
934
      left: 203px;
935
      top: 135px; }
936
    .tile.tile-position-4-4 {
937
      position: absolute;
938
      left: 203px;
939
      top: 203px; }
940
    .tile.tile-position-4-5 {
941
      position: absolute;
942
      left: 203px;
943
      top: 270px; }
944
    .tile.tile-position-4-6 {
945
      position: absolute;
946
      left: 203px;
947
      top: 338px; }
948
    .tile.tile-position-4-7 {
949
      position: absolute;
950
      left: 203px;
951
      top: 405px; }
952
    .tile.tile-position-4-8 {
953
      position: absolute;
954
      left: 203px;
955
      top: 473px; }
956
	.tile.tile-position-5-1 {
957
      position: absolute;
958
      left: 270px;
959
      top: 0px; }
960
    .tile.tile-position-5-2 {
961
      position: absolute;
962
      left: 270px;
963
      top: 68px; }
964
    .tile.tile-position-5-3 {
965
      position: absolute;
966
      left: 270px;
967
      top: 135px; }
968
    .tile.tile-position-5-4 {
969
      position: absolute;
970
      left: 270px;
971
      top: 203px; }
972
    .tile.tile-position-5-5 {
973
      position: absolute;
974
      left: 270px;
975
      top: 270px; }
976
    .tile.tile-position-5-6 {
977
      position: absolute;
978
      left: 270px;
979
      top: 338px; }
980
    .tile.tile-position-5-7 {
981
      position: absolute;
982
      left: 270px;
983
      top: 405px; }
984
    .tile.tile-position-5-8 {
985
      position: absolute;
986
      left: 270px;
987
      top: 473px; }
988
	.tile.tile-position-6-1 {
989
      position: absolute;
990
      left: 338px;
991
      top: 0px; }
992
    .tile.tile-position-6-2 {
993
      position: absolute;
994
      left: 338px;
995
      top: 68px; }
996
    .tile.tile-position-6-3 {
997
      position: absolute;
998
      left: 338px;
999
      top: 135px; }
1000
    .tile.tile-position-6-4 {
1001
      position: absolute;
1002
      left: 338px;
1003
      top: 203px; }
1004
    .tile.tile-position-6-5 {
1005
      position: absolute;
1006
      left: 338px;
1007
      top: 270px; }
1008
    .tile.tile-position-6-6 {
1009
      position: absolute;
1010
      left: 338px;
1011
      top: 338px; }
1012
    .tile.tile-position-6-7 {
1013
      position: absolute;
1014
      left: 338px;
1015
      top: 405px; }
1016
    .tile.tile-position-6-8 {
1017
      position: absolute;
1018
      left: 338px;
1019
      top: 473px; }
1020
	.tile.tile-position-7-1 {
1021
      position: absolute;
1022
      left: 405px;
1023
      top: 0px; }
1024
    .tile.tile-position-7-2 {
1025
      position: absolute;
1026
      left: 405px;
1027
      top: 68px; }
1028
    .tile.tile-position-7-3 {
1029
      position: absolute;
1030
      left: 405px;
1031
      top: 135px; }
1032
    .tile.tile-position-7-4 {
1033
      position: absolute;
1034
      left: 405px;
1035
      top: 203px; }
1036
    .tile.tile-position-7-5 {
1037
      position: absolute;
1038
      left: 405px;
1039
      top: 270px; }
1040
    .tile.tile-position-7-6 {
1041
      position: absolute;
1042
      left: 405px;
1043
      top: 338px; }
1044
    .tile.tile-position-7-7 {
1045
      position: absolute;
1046
      left: 405px;
1047
      top: 405px; }
1048
    .tile.tile-position-7-8 {
1049
      position: absolute;
1050
      left: 405px;
1051
      top: 473px; }
1052
	.tile.tile-position-8-1 {
1053
      position: absolute;
1054
      left: 473px;
1055
      top: 0px; }
1056
    .tile.tile-position-8-2 {
1057
      position: absolute;
1058
      left: 473px;
1059
      top: 68px; }
1060
    .tile.tile-position-8-3 {
1061
      position: absolute;
1062
      left: 473px;
1063
      top: 135px; }
1064
    .tile.tile-position-8-4 {
1065
      position: absolute;
1066
      left: 473px;
1067
      top: 203px; }
1068
    .tile.tile-position-8-5 {
1069
      position: absolute;
1070
      left: 473px;
1071
      top: 270px; }
1072
    .tile.tile-position-8-6 {
1073
      position: absolute;
1074
      left: 473px;
1075
      top: 338px; }
1076
    .tile.tile-position-8-7 {
1077
      position: absolute;
1078
      left: 473px;
1079
      top: 405px; }
1080
    .tile.tile-position-8-8 {
1081
      position: absolute;
1082
      left: 473px;
1083
      top: 473px; }
1084

1085
  .game-container {
1086
    margin-top: 20px; }
1087

1088
  .tile {
1089
    font-size: 35px; }
1090

1091
  .game-message p {
1092
    font-size: 30px !important;
1093
    height: 30px !important;
1094
    line-height: 30px !important;
1095
    margin-top: 90px !important; }
1096
  .game-message .lower {
1097
    margin-top: 30px !important; } }
1098

1099