html,body{margin:0;padding:0;background-color:#fff;color:#4d2523;font-family:"Nunito","Helvetica Neue",Arial,sans-serif;font-size:18px}
:root{--background-color:#faf8ef;--text-color:#222}
[data-theme="dark"]{--background-color:#222;--text-color:#faf8ef}
.game-container,.score-container,.best-container{background-color:#e9c500;color:#fff}
[data-theme="dark"] body{background:#222;color:#faf8ef;--background-color:#222;--text-color:#faf8ef}
[data-theme="dark"] .score-container,[data-theme="dark"] .game-container,[data-theme="dark"] .score-points,[data-theme="dark"] .best-container,[data-theme="dark"] .best-points{background-color:#333;color:#e9c500}
[data-theme="dark"] .score-container:after, [data-theme="dark"] .best-container:after, [data-theme="dark"] .score-points:after, [data-theme="dark"] .best-points:after {color:#fff}
[data-theme="dark"] .checkbox input[type=checkbox]+.check_text {background:#3f3f3f}
[data-theme="dark"] a{color:#efefef}
[data-theme="dark"] .restart-button {background:#E91E63}
[data-theme="dark"] .game-message{color:#1e1e1e}
#theme-toggle{position:absolute;top:25px;left:10px;transform:translateY(-50%);background-color:var(--text-color);color:var(--background-color);border:none;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s ease,color .3s ease;z-index:1000}
.container-fluid{position:relative}
#theme-toggle:before{content:'🌙';font-size:20px}
[data-theme="dark"] #theme-toggle:before{content:'🌞'}
[data-theme="dark"] .theme-toggle{background-color:#333;color:#faf8ef}
[data-theme="dark"] body{margin:0}
[data-theme="dark"] .setting-title.toggle{color:#f0f0f0}
[data-theme="dark"] .setting-desc{color:#bdbdbd}
.heading:after{content:"";display:block;clear:both}
h1.title{font-size:80px;font-weight:700;margin:0;display:block;text-align:center}
h1.title small{font-size:60px}
.title-container{position:relative;display:block;padding-bottom:10px}
@-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,.scores-points{text-align:right}
.score-container,.best-container,.score-points,.best-points{overflow:hidden;position:relative;display:inline-block;background:#f67098;padding:15px 0;font-size:19px;text-transform:capitalize;height:19px;line-height:41px;font-weight:700;border-radius:3px;color:#370707;margin-top:8px;margin-bottom:16px;text-align:center;width:49%;float:left}
.score-container:after,.best-container:after,.score-points:after,.best-points:after{position:absolute;width:100%;top:10px;left:0;text-transform:uppercase;font-size:13px;line-height:13px;text-align:center;color:#3c1b1a}
.score-container .score-addition,.best-container .score-addition,.score-points .score-addition,.best-points .score-addition{position:absolute;width:100%;text-align:center;color:red;font-size:19px;line-height:19px;font-weight:700;color:rgba(77,37,35,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}
.best-container{float:right}
.best-points{float:right}
.score-container:after{content:"Cupcake"}
.score-points:after{content:"Kcal"}
.best-container:after{content:"Cupcake Max"}
.best-points:after{content:"Kcal Max"}
p{margin-top:0;margin-bottom:10px;line-height:1.65}
a{color:#2d1413;font-weight:700;text-decoration:underline;cursor:pointer}
strong.important{text-transform:uppercase}
hr{border:none;border-bottom:1px solid #fbb8cc;margin-top:20px;margin-bottom:30px}
.container{width:500px;margin:0 auto}
@-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:11px;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:#f67098;border-radius:6px;width:500px;height:500px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.game-container .game-message{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,0.7);z-index:100;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-container .game-message p{font-size:60px;color:#1e1e1e;font-weight:700;height:60px;line-height:60px;margin-top:222px}
.game-container .game-message .lower{display:block;margin-top:59px}
.game-container .game-message a{display:inline-block;background:#f888a9;border-radius:3px;padding:0 20px;text-decoration:none;color:#3c1b1a;height:40px;line-height:42px;margin-left:9px}
.game-container .game-message a.keep-playing-button{display:none}
.game-container .game-message .score-sharing{display:inline-block;vertical-align:middle;margin-left:10px}
.game-container .game-message.game-won{background:rgba(88,46,116,0.5);color:#fff}
.game-container .game-message.game-won a.keep-playing-button{display:inline-block}
.game-container .game-message.game-won,.game-container .game-message.game-over{display:block}
.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(255,255,255,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:116.25px}
.tile.tile-position-1-1{-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);transform:translate(0px,0px)}
.tile.tile-position-1-2{-webkit-transform:translate(0px,121px);-moz-transform:translate(0px,121px);transform:translate(0px,121px)}
.tile.tile-position-1-3{-webkit-transform:translate(0px,242px);-moz-transform:translate(0px,242px);transform:translate(0px,242px)}
.tile.tile-position-1-4{-webkit-transform:translate(0px,363px);-moz-transform:translate(0px,363px);transform:translate(0px,363px)}
.tile.tile-position-2-1{-webkit-transform:translate(121px,0px);-moz-transform:translate(121px,0px);transform:translate(121px,0px)}
.tile.tile-position-2-2{-webkit-transform:translate(121px,121px);-moz-transform:translate(121px,121px);transform:translate(121px,121px)}
.tile.tile-position-2-3{-webkit-transform:translate(121px,242px);-moz-transform:translate(121px,242px);transform:translate(121px,242px)}
.tile.tile-position-2-4{-webkit-transform:translate(121px,363px);-moz-transform:translate(121px,363px);transform:translate(121px,363px)}
.tile.tile-position-3-1{-webkit-transform:translate(242px,0px);-moz-transform:translate(242px,0px);transform:translate(242px,0px)}
.tile.tile-position-3-2{-webkit-transform:translate(242px,121px);-moz-transform:translate(242px,121px);transform:translate(242px,121px)}
.tile.tile-position-3-3{-webkit-transform:translate(242px,242px);-moz-transform:translate(242px,242px);transform:translate(242px,242px)}
.tile.tile-position-3-4{-webkit-transform:translate(242px,363px);-moz-transform:translate(242px,363px);transform:translate(242px,363px)}
.tile.tile-position-4-1{-webkit-transform:translate(363px,0px);-moz-transform:translate(363px,0px);transform:translate(363px,0px)}
.tile.tile-position-4-2{-webkit-transform:translate(363px,121px);-moz-transform:translate(363px,121px);transform:translate(363px,121px)}
.tile.tile-position-4-3{-webkit-transform:translate(363px,242px);-moz-transform:translate(363px,242px);transform:translate(363px,242px)}
.tile.tile-position-4-4{-webkit-transform:translate(363px,363px);-moz-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:#fff;text-align:center;font-weight:700;z-index:10;font-size:55px}
.tile .tile-inner img{width:100%;height:100%}
.tile.tile-2 .tile-inner{background:#fff;box-shadow:0 0 30px 10px rgba(0,0,255,0),inset 0 0 0 1px rgba(255,255,255,0)}
.tile.tile-4 .tile-inner{background:#eeeaf1;box-shadow:0 0 30px 10px rgba(0,0,255,0),inset 0 0 0 1px rgba(255,255,255,0)}
.tile.tile-8 .tile-inner{color:#fff;background:#ddd5e3;box-shadow:0 0 30px 10px rgba(0,0,255,0),inset 0 0 0 1px rgba(255,255,255,0)}
.tile.tile-16 .tile-inner{color:#fff;background:#ccc0d5;box-shadow:0 0 30px 10px rgba(0,0,255,0),inset 0 0 0 1px rgba(255,255,255,0)}
.tile.tile-32 .tile-inner{color:#fff;background:#bcabc7;box-shadow:0 0 30px 10px rgba(0,0,255,0.07937),inset 0 0 0 1px rgba(255,255,255,0.04762)}
.tile.tile-64 .tile-inner{color:#fff;background:#ab96b9;box-shadow:0 0 30px 10px rgba(0,0,255,0.15873),inset 0 0 0 1px rgba(255,255,255,0.09524)}
.tile.tile-128 .tile-inner{color:#fff;background:#9a81ab;box-shadow:0 0 30px 10px rgba(0,0,255,0.2381),inset 0 0 0 1px rgba(255,255,255,0.14286);font-size:45px}
@media screen and (max-width: 520px) {
.tile.tile-128 .tile-inner{font-size:25px}
}
.tile.tile-256 .tile-inner{color:#fff;background:#8a6c9d;box-shadow:0 0 30px 10px rgba(0,0,255,0.31746),inset 0 0 0 1px rgba(255,255,255,0.19048);font-size:45px}
@media screen and (max-width: 520px) {
.tile.tile-256 .tile-inner{font-size:25px}
}
.tile.tile-512 .tile-inner{color:#fff;background:#79578f;box-shadow:0 0 30px 10px rgba(0,0,255,0.39683),inset 0 0 0 1px rgba(255,255,255,0.2381);font-size:45px}
@media screen and (max-width: 520px) {
.tile.tile-512 .tile-inner{font-size:25px}
}
.tile.tile-1024 .tile-inner{color:#fff;background:#684281;box-shadow:0 0 30px 10px rgba(0,0,255,0.47619),inset 0 0 0 1px rgba(255,255,255,0.28571);font-size:35px}
@media screen and (max-width: 520px) {
.tile.tile-1024 .tile-inner{font-size:15px}
}
.tile.tile-2048 .tile-inner{color:#fff;background:#582e74;box-shadow:0 0 30px 10px rgba(0,0,255,0.55556),inset 0 0 0 1px rgba(255,255,255,0.33333);font-size:35px}
@media screen and (max-width: 520px) {
.tile.tile-2048 .tile-inner{font-size:15px}
}
.tile.tile-super .tile-inner{color:#fff;background:#343236;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);transform:scale(0)}
100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}
}
@-moz-keyframes appear {
0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}
100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}
}
@keyframes appear {
0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}
100%{opacity:1;-webkit-transform:scale(1);-moz-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);transform:scale(0)}
50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2)}
100%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}
}
@-moz-keyframes pop {
0%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}
50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2)}
100%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}
}
@keyframes pop {
0%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}
50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2)}
100%{-webkit-transform:scale(1);-moz-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:after{content:"";display:block;clear:both}
.game-intro{float:left;font-size:25px;line-height:42px;margin-bottom:0;margin-top:5px}
.restart-button{display:inline-block;background:#f888a9;border-radius:3px;padding:0 20px;text-decoration:none;color:#2d1413;height:40px;line-height:42px;display:block;text-align:center;float:right}
.game-explanation{margin-top:50px}
@media screen and (max-width: 520px) {
html,body{font-size:15px}
body{margin:0;padding:0 20px}
h1.title{font-size:27px; text-align: center;margin-top:10px}
h1.title small{ display: block;text-align: center;font-size:27px}
.container{width:280px;margin:0 auto}
.score-container,.best-container,.score-points,.best-points{margin-top:0;padding:15px 0;min-width:40px}
.heading{margin-bottom:10px}
.game-intro{width:55%;display:block;box-sizing:border-box;line-height:1.65;font-size:16px;margin-top:10px}
.restart-button,.retry-button{width:42%;padding:0;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:#f67098;border-radius:6px;width:280px;height:280px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.game-container .game-message{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,0.7);z-index:100;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-container .game-message p{font-size:60px;font-weight:700;height:60px;line-height:60px;margin-top:222px}
.game-container .game-message .lower{display:block;margin-top:59px}
.game-container .game-message a{display:inline-block;background:#f888a9;border-radius:3px;padding:0 20px;text-decoration:none;color:#3c1b1a;height:40px;line-height:42px;margin-left:9px}
.game-container .game-message a.keep-playing-button{display:none}
.game-container .game-message .score-sharing{display:inline-block;vertical-align:middle;margin-left:10px}
.game-container .game-message.game-won{background:rgba(88,46,116,0.5);color:#fff}
.game-container .game-message.game-won a.keep-playing-button{display:inline-block}
.game-container .game-message.game-won,.game-container .game-message.game-over{display:block}
.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(255,255,255,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:67.5px}
.tile.tile-position-1-1{-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);transform:translate(0px,0px)}
.tile.tile-position-1-2{-webkit-transform:translate(0px,67px);-moz-transform:translate(0px,67px);transform:translate(0px,67px)}
.tile.tile-position-1-3{-webkit-transform:translate(0px,135px);-moz-transform:translate(0px,135px);transform:translate(0px,135px)}
.tile.tile-position-1-4{-webkit-transform:translate(0px,202px);-moz-transform:translate(0px,202px);transform:translate(0px,202px)}
.tile.tile-position-2-1{-webkit-transform:translate(67px,0px);-moz-transform:translate(67px,0px);transform:translate(67px,0px)}
.tile.tile-position-2-2{-webkit-transform:translate(67px,67px);-moz-transform:translate(67px,67px);transform:translate(67px,67px)}
.tile.tile-position-2-3{-webkit-transform:translate(67px,135px);-moz-transform:translate(67px,135px);transform:translate(67px,135px)}
.tile.tile-position-2-4{-webkit-transform:translate(67px,202px);-moz-transform:translate(67px,202px);transform:translate(67px,202px)}
.tile.tile-position-3-1{-webkit-transform:translate(135px,0px);-moz-transform:translate(135px,0px);transform:translate(135px,0px)}
.tile.tile-position-3-2{-webkit-transform:translate(135px,67px);-moz-transform:translate(135px,67px);transform:translate(135px,67px)}
.tile.tile-position-3-3{-webkit-transform:translate(135px,135px);-moz-transform:translate(135px,135px);transform:translate(135px,135px)}
.tile.tile-position-3-4{-webkit-transform:translate(135px,202px);-moz-transform:translate(135px,202px);transform:translate(135px,202px)}
.tile.tile-position-4-1{-webkit-transform:translate(202px,0px);-moz-transform:translate(202px,0px);transform:translate(202px,0px)}
.tile.tile-position-4-2{-webkit-transform:translate(202px,67px);-moz-transform:translate(202px,67px);transform:translate(202px,67px)}
.tile.tile-position-4-3{-webkit-transform:translate(202px,135px);-moz-transform:translate(202px,135px);transform:translate(202px,135px)}
.tile.tile-position-4-4{-webkit-transform:translate(202px,202px);-moz-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;margin-top:90px!important}
.game-message .lower{margin-top:30px!important}
.game-message.game-won .score-sharing{margin-top:10px}
}
.legend-row{padding:10px 5px}
.legend-row:after{content:"";display:block;clear:both}
.legend-row p{margin-left:93.33333px;margin-top:23.33333px;text-transform:capitalize}
.legend-grid{position:relative;padding:7.5px;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:#f67098;border-radius:4px;width:73px;height:73px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left}
.legend-cell{width:57.5px;height:57.5px;margin-right:7.5px;float:left;border-radius:3px;background:rgba(255,255,255,0.35)}
.legend-cell img{width:100%;height:100%}
.cell-2{background:#fff;box-shadow:0 0 30px 5px rgba(0,0,255,0),inset 0 0 0 1px rgba(255,255,255,0)}
.cell-4{background:#eeeaf1;box-shadow:0 0 30px 5px rgba(0,0,255,0),inset 0 0 0 1px rgba(255,255,255,0)}
.cell-8{color:#fff;background:#ddd5e3;box-shadow:0 0 30px 5px rgba(0,0,255,0),inset 0 0 0 1px rgba(255,255,255,0)}
.cell-16{color:#fff;background:#ccc0d5;box-shadow:0 0 30px 5px rgba(0,0,255,0),inset 0 0 0 1px rgba(255,255,255,0)}
.cell-32{color:#fff;background:#bcabc7;box-shadow:0 0 30px 5px rgba(0,0,255,0.07937),inset 0 0 0 1px rgba(255,255,255,0.04762)}
.cell-64{color:#fff;background:#ab96b9;box-shadow:0 0 30px 5px rgba(0,0,255,0.15873),inset 0 0 0 1px rgba(255,255,255,0.09524)}
.cell-128{color:#fff;background:#9a81ab;box-shadow:0 0 30px 5px rgba(0,0,255,0.2381),inset 0 0 0 1px rgba(255,255,255,0.14286)}
.cell-256{color:#fff;background:#8a6c9d;box-shadow:0 0 30px 5px rgba(0,0,255,0.31746),inset 0 0 0 1px rgba(255,255,255,0.19048)}
.cell-512{color:#fff;background:#79578f;box-shadow:0 0 30px 5px rgba(0,0,255,0.39683),inset 0 0 0 1px rgba(255,255,255,0.2381)}
.cell-1024{color:#fff;background:#684281;box-shadow:0 0 30px 5px rgba(0,0,255,0.47619),inset 0 0 0 1px rgba(255,255,255,0.28571)}
.cell-2048{color:#fff;background:#582e74;box-shadow:0 0 30px 5px rgba(0,0,255,0.55556),inset 0 0 0 1px rgba(255,255,255,0.33333)}
.cell-4096{color:#fff;background:#582e74;box-shadow:0 0 30px 5px rgba(0,0,255,0.6),inset 0 0 0 1px rgba(255,255,255,0.38)}
.cell-8192{color:#fff;background:#582e74;box-shadow:0 0 30px 5px rgba(0,0,255,0.7),inset 0 0 0 1px rgba(255,255,255,0.43)}
.otherversion{margin:5px 5px 0 0;text-align:right}
.facebook-button,.twitter-button,.whatsapp-button{padding:10px 20px;border-radius:5px;margin:5px;cursor:pointer;transition:background-color .3s ease;font-family:'Work Sans',sans-serif;font-size:16px;font-weight:700}
.facebook-button{background-color:#3b5998;color:#fff}
.twitter-button{background-color:#202020;color:#fff}
.whatsapp-button{background-color:#077330;color:#fff}
.facebook-button:hover,.share-button:hover,.twitter-button:hover,.whatsapp-button:hover{background-color:#f67098}
.share-button{padding:10px 20px;border-radius:5px;margin:5px;cursor:pointer;transition:background-color .3s ease;font-family:'Work Sans',sans-serif;font-size:16px;font-weight:700;background-color:#bb281d;color:#fff}
#shareResult,#shareResultMobile{text-align:center}
.data-setting{position:relative}
.data-setting hr{display:block;width:100%;height:2px;margin:12px 0;border:none;background:#e8ebf3}
.setting-title.toggle{color:#2e3239;font-size:18px;font-weight:700;margin-bottom:2px}
.setting-desc.toggle{text-align:left;max-width:84%;display:inline-block}
.setting-desc{color:#4F515A;font-size:13px}
.data-setting .checkbox{width:48px;margin:-35px auto 0;position:absolute;right:15px}
.checkbox .label_check{line-height:0;display:table-cell;height:24px;vertical-align:top}
.checkbox input[type=checkbox]{display:none}
.checkbox input[type=checkbox]+.check_text{position:relative;display:block;width:48px;height:26px;cursor:pointer;text-indent:-9999px;border-radius:100px;background:#8d8c8c}
.checkbox input[type=checkbox]:checked+.check_text{background:#f67098}
.checkbox input[type=checkbox]:checked+.check_text:after{left:25px}
.checkbox input[type=checkbox]+.check_text:after{position:absolute;top:3px;left:3px;width:20px;height:20px;content:'';transition:.2s linear;border-radius:50%;background:#fff}
.tile-text.hide{display:none}
.tile .tile-inner .tile-text{font-weight:400;font-size:1rem;line-height:1;text-align:center;margin:0;padding:1px 2px;min-width:1.25rem;position:absolute;right:0;bottom:0;color:rgba(255,255,255,.9);background:rgba(0,0,0,.75);text-shadow:0 0 1px #212121;border-bottom-right-radius:1px;border-top-left-radius:3px}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;color:#fff;z-index:1000}
.theme-toggle{cursor:pointer}
.navbar .menu-btn{background-color:#444;color:#fff;border:none;border-radius:50%;width:50px;height:50px;font-size:24px;cursor:pointer;display:flex;justify-content:center;align-items:center;z-index:1001;position:absolute;top:30px;right:50px}
.menu-btn:focus{outline:none}
.nav{display:none;list-style:none;margin:0;padding:0;flex-direction:column;position:absolute;top:70px;right:20px;background-color:#444;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.3);width:200px}
.nav li a{text-decoration:none;color:#fff;padding:10px;display:block;text-align:center}
.nav a:hover{background-color:#555}
.navbar.active .nav{display:flex;z-index:1000}
@media screen and (max-width: 520px) {
.navbar .menu-btn{width:40px;height:40px;font-size:20px;top:10px;right:10px}
.nav{width:100%;top:60px;right:0;border-radius:20px}
.nav li a{padding:15px}
.nav li{border-bottom:2px solid #555}
.nav li:last-child{border-bottom:none}
}
.menu-btn.open{background-color:#e7584e}
@media (min-width: 521px) {
.tile .tile-inner .tile-text{font-size:.875rem;min-width:1rem}
#theme-toggle{top:50px;left:40px;width:50px;height:50px}
.menu-btn{width:50px;height:50px;right:25px;top:25px}
.nav{top:90px}
}
@media (min-width: 521px) and (max-width: 695px) {
h1.title{font-size:40px;text-align:center}
h1.title small{font-size:30px;display:block;text-align:center}
}
.theme-color span,.theme-color>div{display:inline-block}.theme-color{padding-top:20px}.theme-color span{width:60px;height:40px;background:#f67098;margin:0 0 10px;cursor:pointer;color:#f67098;position:relative;border-radius:.3rem}.theme-color span.active:after{content:"";width:0;height:0;border:8px solid;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;position:absolute;bottom:calc(100% - 2px);left:calc(50% - 8px);z-index:1}@media (max-width:575px){.theme-color{padding-left:4%;padding-right:4%}.theme-color span{width:40px;height:30px}}
.pink2 .best-container,.pink2 .best-points,.pink2 .game-container,.pink2 .score-container,.pink2 .score-points{background:#c44569}.pink2 .best-container:after,.pink2 .best-points:after,.pink2 .score-container:after,.pink2 .score-points:after{color:#eaacbe}.pink2 a.restart-button,.pink2 a.restart-button:hover,.pink2 a.undo-button{background:#cf6a87;color:#fafafa}.red .best-container,.red .best-points,.red .game-container,.red .score-container,.red .score-points{background:#c0392b}.red .best-container:after,.red .best-points:after,.red .score-container:after,.red .score-points:after{color:#e2bbb7}.red a.restart-button,.red a.restart-button:hover,.red a.undo-button{background:#e74c3c;color:#fafafa}.yellow .best-container,.yellow .best-points,.yellow .game-container,.yellow .score-container,.yellow .score-points{background:#f39c12}.yellow .best-container:after,.yellow .best-points:after,.yellow .score-container:after,.yellow .score-points:after{color:#fbd79d}.yellow a.restart-button,.yellow a.restart-button:hover,.yellow a.undo-button{background:#f1c40f;color:#140c0c}[data-theme=dark] .yellow .best-container,[data-theme=dark] .yellow .best-points,[data-theme=dark] .yellow .game-container,[data-theme=dark] .yellow .score-container,[data-theme=dark] .yellow .score-points{color:#65210c}.blue .best-container,.blue .best-points,.blue .game-container,.blue .score-container,.blue .score-points{background:#2980b9}.blue .best-container:after,.blue .best-points:after,.blue .score-container:after,.blue .score-points:after{color:#a7cae0}.blue a.restart-button,.blue a.restart-button:hover,.blue a.undo-button{background:#3498db;color:#fafafa}.blue2 .best-container,.blue2 .best-points,.blue2 .game-container,.blue2 .score-container,.blue2 .score-points{background:#574b90}.blue2 .best-container:after,.blue2 .best-points:after,.blue2 .score-container:after,.blue2 .score-points:after{color:#c2c0d0}.blue2 a.restart-button,.blue2 a.restart-button:hover,.blue2 a.undo-button{background:#786fa6;color:#fafafa}.green .best-container,.green .best-points,.green .game-container,.green .score-container,.green .score-points{background:#16a085}.green .best-container:after,.green .best-points:after,.green .score-container:after,.green .score-points:after{color:#73d2c0}.green a.restart-button,.green a.restart-button:hover,.green a.undo-button{background:#1abc9c;color:#fafafa}.green2 .best-container,.green2 .best-points,.green2 .game-container,.green2 .score-container,.green2 .score-points{background:#27ae60}.green2 .best-container:after,.green2 .best-points:after,.green2 .score-container:after,.green2 .score-points:after{color:#7edca5}.green2 a.restart-button,.green2 a.restart-button:hover,.green2 a.undo-button{background:#2ecc71;color:#fafafa}.violet .best-container,.violet .best-points,.violet .game-container,.violet .score-container,.violet .score-points{background:#8e44ad}.violet .best-container:after,.violet .best-points:after,.violet .score-container:after,.violet .score-points:after{color:#bf95d0}.violet a.restart-button,.violet a.restart-button:hover,.violet a.undo-button{background:#9b59b6;color:#fafafa}.black .best-container,.black .best-points,.black .game-container,.black .score-container,.black .score-points{background:#2c3e50}.black .best-container:after,.black .best-points:after,.black .score-container:after,.black .score-points:after{color:#989898}.black a.restart-button,.black a.restart-button:hover,.black a.undo-button{background:#34495e;color:#fafafa}
#csbtns{opacity:0;transition:opacity 0.3s ease-in;}