CoCalc -- main.css

GitHub Repository: AroriaNetwork/3kho-backup
Path: blob/main/projects/cupcake2048/style/main.css
¹⁸³⁴ views
1
@import url(fonts/clear-sans.css);
2
/* $tile-gold-glow-color: lighten($tile-gold-color, 15%); */
3
html, body {
4
  margin: 0;
5
  padding: 0;
6
  background-color: #fff;
7
  color: #4d2523;
8
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
9
  font-size: 18px; }
10

11
body {
12
  padding: 80px 0;
13
  background-image: url(img/bg.jpg);
14
  background-position: top center;
15
  background-repeat: no-repeat; }
16

17
.heading:after {
18
  content: "";
19
  display: block;
20
  clear: both; }
21

22
h1.title {
23
  font-size: 80px;
24
  font-weight: bold;
25
  margin: 0;
26
  display: block;
27
  text-align: center; }
28
  h1.title small {
29
    font-size: 60px; }
30

31
.title-container {
32
  position: relative;
33
  display: inline-block;
34
  padding-bottom: 10px; }
35

36
@-webkit-keyframes move-up {
37
  0% {
38
    top: 25px;
39
    opacity: 1; }
40

41
  100% {
42
    top: -50px;
43
    opacity: 0; } }
44
@-moz-keyframes move-up {
45
  0% {
46
    top: 25px;
47
    opacity: 1; }
48

49
  100% {
50
    top: -50px;
51
    opacity: 0; } }
52
@keyframes move-up {
53
  0% {
54
    top: 25px;
55
    opacity: 1; }
56

57
  100% {
58
    top: -50px;
59
    opacity: 0; } }
60
.scores-container, .scores-points {
61
  text-align: right; }
62

63
.score-container, .best-container,
64
.score-points, .best-points {
65
  overflow: hidden;
66
  position: relative;
67
  display: inline-block;
68
  background: #f67098;
69
  padding: 15px 0px;
70
  font-size: 19px;
71
  text-transform: capitalize;
72
  height: 19px;
73
  line-height: 41px;
74
  font-weight: bold;
75
  border-radius: 3px;
76
  color: white;
77
  margin-top: 8px;
78
  margin-bottom: 16px;
79
  text-align: center;
80
  width: 49%;
81
  float: left; }
82
  .score-container:after, .best-container:after,
83
	.score-points:after, .best-points:after {
84
    position: absolute;
85
    width: 100%;
86
    top: 10px;
87
    left: 0;
88
    text-transform: uppercase;
89
    font-size: 13px;
90
    line-height: 13px;
91
    text-align: center;
92
    color: #3c1b1a; }
93
  .score-container .score-addition, .best-container .score-addition,
94
	.score-points .score-addition, .best-points .score-addition {
95
    position: absolute;
96
    /*right: 60px;*/
97
    width: 100%;
98
    text-align: center;
99
    color: red;
100
    font-size: 19px;
101
    line-height: 19px;
102
    font-weight: bold;
103
    color: rgba(77, 37, 35, 0.9);
104
    z-index: 100;
105
    -webkit-animation: move-up 600ms ease-in;
106
    -moz-animation: move-up 600ms ease-in;
107
    animation: move-up 600ms ease-in;
108
    -webkit-animation-fill-mode: both;
109
    -moz-animation-fill-mode: both;
110
    animation-fill-mode: both; }
111

112
.best-container {
113
  float: right; }
114
.best-points {
115
  float: right; }
116

117
.score-container:after {
118
  content: "Cupcake"; }
119
.score-points:after {
120
  content: "Kcal"; }
121

122
.best-container:after {
123
  content: "Cupcake Max"; }
124
.best-points:after {
125
	content: "Kcal Max"; }
126

127
p {
128
  margin-top: 0;
129
  margin-bottom: 10px;
130
  line-height: 1.65; }
131

132
a {
133
  color: #4d2523;
134
  font-weight: bold;
135
  text-decoration: underline;
136
  cursor: pointer; }
137

138
strong.important {
139
  text-transform: uppercase; }
140

141
hr {
142
  border: none;
143
  border-bottom: 1px solid #fbb8cc;
144
  margin-top: 20px;
145
  margin-bottom: 30px; }
146

147
.container {
148
  width: 500px;
149
  margin: 0 auto; }
150

151
@-webkit-keyframes fade-in {
152
  0% {
153
    opacity: 0; }
154

155
  100% {
156
    opacity: 1; } }
157
@-moz-keyframes fade-in {
158
  0% {
159
    opacity: 0; }
160

161
  100% {
162
    opacity: 1; } }
163
@keyframes fade-in {
164
  0% {
165
    opacity: 0; }
166

167
  100% {
168
    opacity: 1; } }
169
.game-container {
170
  margin-top: 11px;
171
  position: relative;
172
  padding: 15px;
173
  cursor: default;
174
  -webkit-touch-callout: none;
175
  -ms-touch-callout: none;
176
  -webkit-user-select: none;
177
  -moz-user-select: none;
178
  -ms-user-select: none;
179
  -ms-touch-action: none;
180
  touch-action: none;
181
  background: #f67098;
182
  border-radius: 6px;
183
  width: 500px;
184
  height: 500px;
185
  -webkit-box-sizing: border-box;
186
  -moz-box-sizing: border-box;
187
  box-sizing: border-box; }
188
  .game-container .game-message {
189
    display: none;
190
    position: absolute;
191
    top: 0;
192
    right: 0;
193
    bottom: 0;
194
    left: 0;
195
    background: rgba(255, 255, 255, 0.7);
196
    z-index: 100;
197
    text-align: center;
198
    -webkit-animation: fade-in 800ms ease 1200ms;
199
    -moz-animation: fade-in 800ms ease 1200ms;
200
    animation: fade-in 800ms ease 1200ms;
201
    -webkit-animation-fill-mode: both;
202
    -moz-animation-fill-mode: both;
203
    animation-fill-mode: both; }
204
    .game-container .game-message p {
205
      font-size: 60px;
206
      font-weight: bold;
207
      height: 60px;
208
      line-height: 60px;
209
      margin-top: 222px; }
210
    .game-container .game-message .lower {
211
      display: block;
212
      margin-top: 59px; }
213
    .game-container .game-message a {
214
      display: inline-block;
215
      background: #f888a9;
216
      border-radius: 3px;
217
      padding: 0 20px;
218
      text-decoration: none;
219
      color: #3c1b1a;
220
      height: 40px;
221
      line-height: 42px;
222
      margin-left: 9px; }
223
      .game-container .game-message a.keep-playing-button {
224
        display: none; }
225
    .game-container .game-message .score-sharing {
226
      display: inline-block;
227
      vertical-align: middle;
228
      margin-left: 10px; }
229
    .game-container .game-message.game-won {
230
      background: rgba(88, 46, 116, 0.5);
231
      color: white; }
232
      .game-container .game-message.game-won a.keep-playing-button {
233
        display: inline-block; }
234
    .game-container .game-message.game-won, .game-container .game-message.game-over {
235
      display: block; }
236

237
.grid-container {
238
  position: absolute;
239
  z-index: 1; }
240

241
.grid-row {
242
  margin-bottom: 15px; }
243
  .grid-row:last-child {
244
    margin-bottom: 0; }
245
  .grid-row:after {
246
    content: "";
247
    display: block;
248
    clear: both; }
249

250
.grid-cell {
251
  width: 106.25px;
252
  height: 106.25px;
253
  margin-right: 15px;
254
  float: left;
255
  border-radius: 3px;
256
  background: rgba(255, 255, 255, 0.35); }
257
  .grid-cell:last-child {
258
    margin-right: 0; }
259

260
.tile-container {
261
  position: absolute;
262
  z-index: 2; }
263

264
.tile, .tile .tile-inner {
265
  width: 107px;
266
  height: 107px;
267
  line-height: 116.25px; }
268
.tile.tile-position-1-1 {
269
  -webkit-transform: translate(0px, 0px);
270
  -moz-transform: translate(0px, 0px);
271
  transform: translate(0px, 0px); }
272
.tile.tile-position-1-2 {
273
  -webkit-transform: translate(0px, 121px);
274
  -moz-transform: translate(0px, 121px);
275
  transform: translate(0px, 121px); }
276
.tile.tile-position-1-3 {
277
  -webkit-transform: translate(0px, 242px);
278
  -moz-transform: translate(0px, 242px);
279
  transform: translate(0px, 242px); }
280
.tile.tile-position-1-4 {
281
  -webkit-transform: translate(0px, 363px);
282
  -moz-transform: translate(0px, 363px);
283
  transform: translate(0px, 363px); }
284
.tile.tile-position-2-1 {
285
  -webkit-transform: translate(121px, 0px);
286
  -moz-transform: translate(121px, 0px);
287
  transform: translate(121px, 0px); }
288
.tile.tile-position-2-2 {
289
  -webkit-transform: translate(121px, 121px);
290
  -moz-transform: translate(121px, 121px);
291
  transform: translate(121px, 121px); }
292
.tile.tile-position-2-3 {
293
  -webkit-transform: translate(121px, 242px);
294
  -moz-transform: translate(121px, 242px);
295
  transform: translate(121px, 242px); }
296
.tile.tile-position-2-4 {
297
  -webkit-transform: translate(121px, 363px);
298
  -moz-transform: translate(121px, 363px);
299
  transform: translate(121px, 363px); }
300
.tile.tile-position-3-1 {
301
  -webkit-transform: translate(242px, 0px);
302
  -moz-transform: translate(242px, 0px);
303
  transform: translate(242px, 0px); }
304
.tile.tile-position-3-2 {
305
  -webkit-transform: translate(242px, 121px);
306
  -moz-transform: translate(242px, 121px);
307
  transform: translate(242px, 121px); }
308
.tile.tile-position-3-3 {
309
  -webkit-transform: translate(242px, 242px);
310
  -moz-transform: translate(242px, 242px);
311
  transform: translate(242px, 242px); }
312
.tile.tile-position-3-4 {
313
  -webkit-transform: translate(242px, 363px);
314
  -moz-transform: translate(242px, 363px);
315
  transform: translate(242px, 363px); }
316
.tile.tile-position-4-1 {
317
  -webkit-transform: translate(363px, 0px);
318
  -moz-transform: translate(363px, 0px);
319
  transform: translate(363px, 0px); }
320
.tile.tile-position-4-2 {
321
  -webkit-transform: translate(363px, 121px);
322
  -moz-transform: translate(363px, 121px);
323
  transform: translate(363px, 121px); }
324
.tile.tile-position-4-3 {
325
  -webkit-transform: translate(363px, 242px);
326
  -moz-transform: translate(363px, 242px);
327
  transform: translate(363px, 242px); }
328
.tile.tile-position-4-4 {
329
  -webkit-transform: translate(363px, 363px);
330
  -moz-transform: translate(363px, 363px);
331
  transform: translate(363px, 363px); }
332

333
.tile {
334
  position: absolute;
335
  -webkit-transition: 100ms ease-in-out;
336
  -moz-transition: 100ms ease-in-out;
337
  transition: 100ms ease-in-out;
338
  -webkit-transition-property: -webkit-transform;
339
  -moz-transition-property: -moz-transform;
340
  transition-property: transform; }
341
  .tile .tile-inner {
342
    border-radius: 3px;
343
    background: white;
344
    text-align: center;
345
    font-weight: bold;
346
    z-index: 10;
347
    font-size: 55px; }
348
    .tile .tile-inner img {
349
      width: 100%;
350
      height: 100%; }
351
  .tile.tile-2 .tile-inner {
352
    background: white;
353
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
354
  .tile.tile-4 .tile-inner {
355
    background: #eeeaf1;
356
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
357
  .tile.tile-8 .tile-inner {
358
    color: white;
359
    background: #ddd5e3;
360
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
361
  .tile.tile-16 .tile-inner {
362
    color: white;
363
    background: #ccc0d5;
364
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
365
  .tile.tile-32 .tile-inner {
366
    color: white;
367
    background: #bcabc7;
368
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0.07937), inset 0 0 0 1px rgba(255, 255, 255, 0.04762); }
369
  .tile.tile-64 .tile-inner {
370
    color: white;
371
    background: #ab96b9;
372
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0.15873), inset 0 0 0 1px rgba(255, 255, 255, 0.09524); }
373
  .tile.tile-128 .tile-inner {
374
    color: white;
375
    background: #9a81ab;
376
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
377
    font-size: 45px; }
378
    @media screen and (max-width: 520px) {
379
      .tile.tile-128 .tile-inner {
380
        font-size: 25px; } }
381
  .tile.tile-256 .tile-inner {
382
    color: white;
383
    background: #8a6c9d;
384
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
385
    font-size: 45px; }
386
    @media screen and (max-width: 520px) {
387
      .tile.tile-256 .tile-inner {
388
        font-size: 25px; } }
389
  .tile.tile-512 .tile-inner {
390
    color: white;
391
    background: #79578f;
392
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
393
    font-size: 45px; }
394
    @media screen and (max-width: 520px) {
395
      .tile.tile-512 .tile-inner {
396
        font-size: 25px; } }
397
  .tile.tile-1024 .tile-inner {
398
    color: white;
399
    background: #684281;
400
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
401
    font-size: 35px; }
402
    @media screen and (max-width: 520px) {
403
      .tile.tile-1024 .tile-inner {
404
        font-size: 15px; } }
405
  .tile.tile-2048 .tile-inner {
406
    color: white;
407
    background: #582e74;
408
    box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
409
    font-size: 35px; }
410
    @media screen and (max-width: 520px) {
411
      .tile.tile-2048 .tile-inner {
412
        font-size: 15px; } }
413
  .tile.tile-super .tile-inner {
414
    color: white;
415
    background: #343236;
416
    font-size: 30px; }
417
    @media screen and (max-width: 520px) {
418
      .tile.tile-super .tile-inner {
419
        font-size: 10px; } }
420

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

428
  100% {
429
    opacity: 1;
430
    -webkit-transform: scale(1);
431
    -moz-transform: scale(1);
432
    transform: scale(1); } }
433
@-moz-keyframes appear {
434
  0% {
435
    opacity: 0;
436
    -webkit-transform: scale(0);
437
    -moz-transform: scale(0);
438
    transform: scale(0); }
439

440
  100% {
441
    opacity: 1;
442
    -webkit-transform: scale(1);
443
    -moz-transform: scale(1);
444
    transform: scale(1); } }
445
@keyframes appear {
446
  0% {
447
    opacity: 0;
448
    -webkit-transform: scale(0);
449
    -moz-transform: scale(0);
450
    transform: scale(0); }
451

452
  100% {
453
    opacity: 1;
454
    -webkit-transform: scale(1);
455
    -moz-transform: scale(1);
456
    transform: scale(1); } }
457
.tile-new .tile-inner {
458
  -webkit-animation: appear 200ms ease 100ms;
459
  -moz-animation: appear 200ms ease 100ms;
460
  animation: appear 200ms ease 100ms;
461
  -webkit-animation-fill-mode: backwards;
462
  -moz-animation-fill-mode: backwards;
463
  animation-fill-mode: backwards; }
464

465
@-webkit-keyframes pop {
466
  0% {
467
    -webkit-transform: scale(0);
468
    -moz-transform: scale(0);
469
    transform: scale(0); }
470

471
  50% {
472
    -webkit-transform: scale(1.2);
473
    -moz-transform: scale(1.2);
474
    transform: scale(1.2); }
475

476
  100% {
477
    -webkit-transform: scale(1);
478
    -moz-transform: scale(1);
479
    transform: scale(1); } }
480
@-moz-keyframes pop {
481
  0% {
482
    -webkit-transform: scale(0);
483
    -moz-transform: scale(0);
484
    transform: scale(0); }
485

486
  50% {
487
    -webkit-transform: scale(1.2);
488
    -moz-transform: scale(1.2);
489
    transform: scale(1.2); }
490

491
  100% {
492
    -webkit-transform: scale(1);
493
    -moz-transform: scale(1);
494
    transform: scale(1); } }
495
@keyframes pop {
496
  0% {
497
    -webkit-transform: scale(0);
498
    -moz-transform: scale(0);
499
    transform: scale(0); }
500

501
  50% {
502
    -webkit-transform: scale(1.2);
503
    -moz-transform: scale(1.2);
504
    transform: scale(1.2); }
505

506
  100% {
507
    -webkit-transform: scale(1);
508
    -moz-transform: scale(1);
509
    transform: scale(1); } }
510
.tile-merged .tile-inner {
511
  z-index: 20;
512
  -webkit-animation: pop 200ms ease 100ms;
513
  -moz-animation: pop 200ms ease 100ms;
514
  animation: pop 200ms ease 100ms;
515
  -webkit-animation-fill-mode: backwards;
516
  -moz-animation-fill-mode: backwards;
517
  animation-fill-mode: backwards; }
518

519
.above-game:after {
520
  content: "";
521
  display: block;
522
  clear: both; }
523

524
.game-intro {
525
  float: left;
526
  font-size: 25px;
527
  line-height: 42px;
528
  margin-bottom: 0;
529
  margin-top: 5px; }
530

531
.restart-button {
532
  display: inline-block;
533
  background: #f888a9;
534
  border-radius: 3px;
535
  padding: 0 20px;
536
  text-decoration: none;
537
  color: #3c1b1a;
538
  height: 40px;
539
  line-height: 42px;
540
  display: block;
541
  text-align: center;
542
  float: right; }
543

544
.game-explanation {
545
  margin-top: 50px; }
546

547
@media screen and (max-width: 520px) {
548
  html, body {
549
    font-size: 15px; }
550

551
  body {
552
    margin: 20px 0;
553
    padding: 0 20px; }
554

555
  h1.title {
556
    font-size: 27px;
557
    margin-top: 15px; }
558
    h1.title small {
559
      font-size: 27px; }
560

561
  .container {
562
    width: 280px;
563
    margin: 0 auto; }
564

565
  .score-container, .best-container,
566
  .score-points, .best-points {
567
    margin-top: 0;
568
    padding: 15px 0px;
569
    min-width: 40px; }
570

571
  .heading {
572
    margin-bottom: 10px; }
573

574
  .game-intro {
575
    width: 55%;
576
    display: block;
577
    box-sizing: border-box;
578
    line-height: 1.65;
579
    font-size: 16px;
580
    margin-top: 10px; }
581

582
  .restart-button, .retry-button {
583
    width: 42%;
584
    padding: 0;
585
    display: block;
586
    box-sizing: border-box;
587
    margin-top: 2px; }
588

589
  .game-container {
590
    margin-top: 17px;
591
    position: relative;
592
    padding: 10px;
593
    cursor: default;
594
    -webkit-touch-callout: none;
595
    -ms-touch-callout: none;
596
    -webkit-user-select: none;
597
    -moz-user-select: none;
598
    -ms-user-select: none;
599
    -ms-touch-action: none;
600
    touch-action: none;
601
    background: #f67098;
602
    border-radius: 6px;
603
    width: 280px;
604
    height: 280px;
605
    -webkit-box-sizing: border-box;
606
    -moz-box-sizing: border-box;
607
    box-sizing: border-box; }
608
    .game-container .game-message {
609
      display: none;
610
      position: absolute;
611
      top: 0;
612
      right: 0;
613
      bottom: 0;
614
      left: 0;
615
      background: rgba(255, 255, 255, 0.7);
616
      z-index: 100;
617
      text-align: center;
618
      -webkit-animation: fade-in 800ms ease 1200ms;
619
      -moz-animation: fade-in 800ms ease 1200ms;
620
      animation: fade-in 800ms ease 1200ms;
621
      -webkit-animation-fill-mode: both;
622
      -moz-animation-fill-mode: both;
623
      animation-fill-mode: both; }
624
      .game-container .game-message p {
625
        font-size: 60px;
626
        font-weight: bold;
627
        height: 60px;
628
        line-height: 60px;
629
        margin-top: 222px; }
630
      .game-container .game-message .lower {
631
        display: block;
632
        margin-top: 59px; }
633
      .game-container .game-message a {
634
        display: inline-block;
635
        background: #f888a9;
636
        border-radius: 3px;
637
        padding: 0 20px;
638
        text-decoration: none;
639
        color: #3c1b1a;
640
        height: 40px;
641
        line-height: 42px;
642
        margin-left: 9px; }
643
        .game-container .game-message a.keep-playing-button {
644
          display: none; }
645
      .game-container .game-message .score-sharing {
646
        display: inline-block;
647
        vertical-align: middle;
648
        margin-left: 10px; }
649
      .game-container .game-message.game-won {
650
        background: rgba(88, 46, 116, 0.5);
651
        color: white; }
652
        .game-container .game-message.game-won a.keep-playing-button {
653
          display: inline-block; }
654
      .game-container .game-message.game-won, .game-container .game-message.game-over {
655
        display: block; }
656

657
  .grid-container {
658
    position: absolute;
659
    z-index: 1; }
660

661
  .grid-row {
662
    margin-bottom: 10px; }
663
    .grid-row:last-child {
664
      margin-bottom: 0; }
665
    .grid-row:after {
666
      content: "";
667
      display: block;
668
      clear: both; }
669

670
  .grid-cell {
671
    width: 57.5px;
672
    height: 57.5px;
673
    margin-right: 10px;
674
    float: left;
675
    border-radius: 3px;
676
    background: rgba(255, 255, 255, 0.35); }
677
    .grid-cell:last-child {
678
      margin-right: 0; }
679

680
  .tile-container {
681
    position: absolute;
682
    z-index: 2; }
683

684
  .tile, .tile .tile-inner {
685
    width: 58px;
686
    height: 58px;
687
    line-height: 67.5px; }
688
  .tile.tile-position-1-1 {
689
    -webkit-transform: translate(0px, 0px);
690
    -moz-transform: translate(0px, 0px);
691
    transform: translate(0px, 0px); }
692
  .tile.tile-position-1-2 {
693
    -webkit-transform: translate(0px, 67px);
694
    -moz-transform: translate(0px, 67px);
695
    transform: translate(0px, 67px); }
696
  .tile.tile-position-1-3 {
697
    -webkit-transform: translate(0px, 135px);
698
    -moz-transform: translate(0px, 135px);
699
    transform: translate(0px, 135px); }
700
  .tile.tile-position-1-4 {
701
    -webkit-transform: translate(0px, 202px);
702
    -moz-transform: translate(0px, 202px);
703
    transform: translate(0px, 202px); }
704
  .tile.tile-position-2-1 {
705
    -webkit-transform: translate(67px, 0px);
706
    -moz-transform: translate(67px, 0px);
707
    transform: translate(67px, 0px); }
708
  .tile.tile-position-2-2 {
709
    -webkit-transform: translate(67px, 67px);
710
    -moz-transform: translate(67px, 67px);
711
    transform: translate(67px, 67px); }
712
  .tile.tile-position-2-3 {
713
    -webkit-transform: translate(67px, 135px);
714
    -moz-transform: translate(67px, 135px);
715
    transform: translate(67px, 135px); }
716
  .tile.tile-position-2-4 {
717
    -webkit-transform: translate(67px, 202px);
718
    -moz-transform: translate(67px, 202px);
719
    transform: translate(67px, 202px); }
720
  .tile.tile-position-3-1 {
721
    -webkit-transform: translate(135px, 0px);
722
    -moz-transform: translate(135px, 0px);
723
    transform: translate(135px, 0px); }
724
  .tile.tile-position-3-2 {
725
    -webkit-transform: translate(135px, 67px);
726
    -moz-transform: translate(135px, 67px);
727
    transform: translate(135px, 67px); }
728
  .tile.tile-position-3-3 {
729
    -webkit-transform: translate(135px, 135px);
730
    -moz-transform: translate(135px, 135px);
731
    transform: translate(135px, 135px); }
732
  .tile.tile-position-3-4 {
733
    -webkit-transform: translate(135px, 202px);
734
    -moz-transform: translate(135px, 202px);
735
    transform: translate(135px, 202px); }
736
  .tile.tile-position-4-1 {
737
    -webkit-transform: translate(202px, 0px);
738
    -moz-transform: translate(202px, 0px);
739
    transform: translate(202px, 0px); }
740
  .tile.tile-position-4-2 {
741
    -webkit-transform: translate(202px, 67px);
742
    -moz-transform: translate(202px, 67px);
743
    transform: translate(202px, 67px); }
744
  .tile.tile-position-4-3 {
745
    -webkit-transform: translate(202px, 135px);
746
    -moz-transform: translate(202px, 135px);
747
    transform: translate(202px, 135px); }
748
  .tile.tile-position-4-4 {
749
    -webkit-transform: translate(202px, 202px);
750
    -moz-transform: translate(202px, 202px);
751
    transform: translate(202px, 202px); }
752

753
  .tile .tile-inner {
754
    font-size: 35px; }
755

756
  .game-message p {
757
    font-size: 30px !important;
758
    height: 30px !important;
759
    line-height: 30px !important;
760
    margin-top: 90px !important; }
761
  .game-message .lower {
762
    margin-top: 30px !important; }
763
  .game-message.game-won .score-sharing {
764
    margin-top: 10px; } }
765
.legend-row {
766
  padding: 10px 5px; }
767
  .legend-row:after {
768
    content: "";
769
    display: block;
770
    clear: both; }
771
  .legend-row p {
772
    margin-left: 93.33333px;
773
    margin-top: 23.33333px;
774
    text-transform: capitalize; }
775

776
.legend-grid {
777
  position: relative;
778
  padding: 7.5px;
779
  cursor: default;
780
  -webkit-touch-callout: none;
781
  -ms-touch-callout: none;
782
  -webkit-user-select: none;
783
  -moz-user-select: none;
784
  -ms-user-select: none;
785
  -ms-touch-action: none;
786
  touch-action: none;
787
  background: #f67098;
788
  border-radius: 4px;
789
  width: 73px;
790
  height: 73px;
791
  -webkit-box-sizing: border-box;
792
  -moz-box-sizing: border-box;
793
  box-sizing: border-box;
794
  float: left; }
795

796
.legend-cell {
797
  width: 57.5px;
798
  height: 57.5px;
799
  margin-right: 7.5px;
800
  float: left;
801
  border-radius: 3px;
802
  background: rgba(255, 255, 255, 0.35); }
803
  .legend-cell img {
804
    width: 100%;
805
    height: 100%; }
806

807
.cell-2 {
808
  background: white;
809
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
810

811
.cell-4 {
812
  background: #eeeaf1;
813
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
814

815
.cell-8 {
816
  color: white;
817
  background: #ddd5e3;
818
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
819

820
.cell-16 {
821
  color: white;
822
  background: #ccc0d5;
823
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
824

825
.cell-32 {
826
  color: white;
827
  background: #bcabc7;
828
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.07937), inset 0 0 0 1px rgba(255, 255, 255, 0.04762); }
829

830
.cell-64 {
831
  color: white;
832
  background: #ab96b9;
833
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.15873), inset 0 0 0 1px rgba(255, 255, 255, 0.09524); }
834

835
.cell-128 {
836
  color: white;
837
  background: #9a81ab;
838
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286); }
839

840
.cell-256 {
841
  color: white;
842
  background: #8a6c9d;
843
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048); }
844

845
.cell-512 {
846
  color: white;
847
  background: #79578f;
848
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381); }
849

850
.cell-1024 {
851
  color: white;
852
  background: #684281;
853
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571); }
854

855
.cell-2048 {
856
  color: white;
857
  background: #582e74;
858
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); }
859

860
.cell-4096 {
861
  color: white;
862
  background: #582e74;
863
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.38); }
864

865
.cell-8192 {
866
  color: white;
867
  background: #582e74;
868
  box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.43); }
869

870
.repo-link {
871
  margin-top: 40px;
872
  margin-right: 20px;
873
  text-align: right; }
874

875
Product

Resources

Company
