@font-face{font-family:Clear Sans;src:url(./ClearSans-Light-webfont.eot);src:url(./ClearSans-Light-webfont.eot?#iefix) format("embedded-opentype"),url(./ClearSans-Light-webfont.svg#clear_sans_lightregular) format("svg"),url(./ClearSans-Light-webfont.woff) format("woff");font-weight:200;font-style:normal}@font-face{font-family:Clear Sans;src:url(./ClearSans-Regular-webfont.eot);src:url(./ClearSans-Regular-webfont.eot?#iefix) format("embedded-opentype"),url(./ClearSans-Regular-webfont.svg#clear_sansregular) format("svg"),url(./ClearSans-Regular-webfont.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Clear Sans;src:url(./ClearSans-Bold-webfont.eot);src:url(./ClearSans-Bold-webfont.eot?#iefix) format("embedded-opentype"),url(./ClearSans-Bold-webfont.svg#clear_sansbold) format("svg"),url(./ClearSans-Bold-webfont.woff) format("woff");font-weight:700;font-style:normal}:root{--bg-color: #faf8ef;--text-color: #776e65;--grid-bg: #bbada0;--tile-bg: #eee4da;--tile-2-bg: #eee4da;--tile-4-bg: #ede0c8;--tile-8-bg: #f2b179;--tile-16-bg: #f59563;--tile-32-bg: #f67c5f;--tile-64-bg: #f65e3b;--tile-128-bg: #edcf72;--tile-256-bg: #edcc61;--tile-512-bg: #edc850;--tile-1024-bg: #edc53f;--tile-2048-bg: #edc22e;--tile-super-bg: #3c3a32;--button-bg: #8f7a66;--button-hover: #9f8a76;--score-bg: #bbada0;--message-bg: rgba(238, 228, 218, .5);--message-won-bg: rgba(237, 194, 46, .5)}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #d4d4d4;--grid-bg: #2d2d2d;--tile-bg: #3c3c3c;--tile-2-bg: #3c3c3c;--tile-4-bg: #4a4a4a;--tile-8-bg: #5a5a5a;--tile-16-bg: #6a6a6a;--tile-32-bg: #7a7a7a;--tile-64-bg: #8a8a8a;--tile-128-bg: #9a9a9a;--tile-256-bg: #aaaaaa;--tile-512-bg: #bbbbbb;--tile-1024-bg: #cccccc;--tile-2048-bg: #dddddd;--tile-super-bg: #eeeeee;--button-bg: #4a4a4a;--button-hover: #5a5a5a;--score-bg: #2d2d2d;--message-bg: rgba(60, 60, 60, .8);--message-won-bg: rgba(255, 193, 7, .3)}.notification-container{position:fixed;top:0;left:0;right:0;z-index:1000;pointer-events:none}.notification{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 20px;margin:15px auto;max-width:500px;border-radius:8px;box-shadow:0 4px 12px #00000026;animation:slideInDown .3s ease-out;position:relative;overflow:hidden;pointer-events:auto}.notification:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:shimmer 2s infinite}.notification .notification-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;position:relative;z-index:1}.notification .notification-message{font-weight:600;font-size:14px}.notification .notification-actions{display:flex;gap:8px}.notification .notification-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.notification .notification-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.notification .notification-btn.primary{background:#ffffffe6!important;color:#667eea!important}.notification .notification-btn.primary:hover{background:#fff!important}.notification.progress .notification-message{animation:pulse 1.5s infinite}.notification.success{background:linear-gradient(135deg,#4caf50,#45a049)}.notification.error{background:linear-gradient(135deg,#f44336,#d32f2f)}.notification.warning{background:linear-gradient(135deg,#ff9800,#f57c00)}.notification.info{background:linear-gradient(135deg,#2196f3,#1976d2)}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{left:-100%}to{left:100%}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.tile{will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translateZ(0);-webkit-transition:-webkit-transform .1s ease-in-out,opacity .1s ease-in-out;-moz-transition:-moz-transform .1s ease-in-out,opacity .1s ease-in-out;-ms-transition:-ms-transform .1s ease-in-out,opacity .1s ease-in-out;transition:transform .1s ease-in-out,opacity .1s ease-in-out}.tile.tile-position-1-1{transform:translateZ(0)}.tile.tile-position-1-2{transform:translate3d(0,121px,0)}.tile.tile-position-1-3{transform:translate3d(0,242px,0)}.tile.tile-position-1-4{transform:translate3d(0,363px,0)}.tile.tile-position-2-1{transform:translate3d(121px,0,0)}.tile.tile-position-2-2{transform:translate3d(121px,121px,0)}.tile.tile-position-2-3{transform:translate3d(121px,242px,0)}.tile.tile-position-2-4{transform:translate3d(121px,363px,0)}.tile.tile-position-3-1{transform:translate3d(242px,0,0)}.tile.tile-position-3-2{transform:translate3d(242px,121px,0)}.tile.tile-position-3-3{transform:translate3d(242px,242px,0)}.tile.tile-position-3-4{transform:translate3d(242px,363px,0)}.tile.tile-position-4-1{transform:translate3d(363px,0,0)}.tile.tile-position-4-2{transform:translate3d(363px,121px,0)}.tile.tile-position-4-3{transform:translate3d(363px,242px,0)}.tile.tile-position-4-4{transform:translate3d(363px,363px,0)}@keyframes tile-appear{0%{opacity:0;transform:scale(.8) translateZ(0)}to{opacity:1;transform:scale(1) translateZ(0)}}@keyframes tile-merge{0%{transform:scale(1) translateZ(0)}50%{transform:scale(1.1) translateZ(0)}to{transform:scale(1) translateZ(0)}}@keyframes score-addition{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-50px,0) scale(.8)}}@keyframes game-message-fade-in{0%{opacity:0;transform:translate3d(0,-20px,0) scale(.95)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes button-hover{0%{transform:scale(1) translateZ(0)}to{transform:scale(1.05) translateZ(0)}}.tile.tile-new{animation:tile-appear .2s ease-out}.tile.tile-merged{animation:tile-merge .2s ease-out}.score-addition{animation:score-addition .6s ease-in forwards;will-change:transform,opacity}.game-message{animation:game-message-fade-in .8s ease-out 1.2s both;will-change:transform,opacity}.theme-toggle:hover,.restart-button:hover,.undo-button:hover,.redo-button:hover,.stats-button:hover{animation:button-hover .15s ease-out forwards;will-change:transform}html,body{transition:background-color .3s ease,color .3s ease;will-change:background-color,color}.score-container,.best-container,.game-container,.grid-cell,.tile .tile-inner,.game-message{transition:background-color .3s ease;will-change:background-color}.tile-container{will-change:transform;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translateZ(0)}@media (prefers-reduced-motion: reduce){.tile,.score-addition,.game-message,.theme-toggle,.restart-button,.undo-button,.redo-button,.stats-button{animation:none!important;transition:none!important}.tile{transition:transform 50ms ease-in-out!important}}@media (prefers-contrast: high){.tile{border:2px solid currentColor}.tile.tile-merged{animation:none;border:3px solid currentColor}}html,body{margin:0;padding:0;background:var(--bg-color);color:var(--text-color);font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;font-size:18px}body{margin:80px 0}.heading:after{content:"";display:block;clear:both}h1.title{font-size:80px;font-weight:700;margin:0;display:block;float:left}@keyframes move-up{0%{top:25px;opacity:1}to{top:-50px;opacity:0}}.scores-container{float:right;text-align:right}.controls-container{float:right;display:flex;gap:8px;margin-top:8px;clear:right}.score-container,.best-container{position:relative;display:inline-block;background:var(--score-bg);padding:15px 25px;font-size:25px;height:25px;line-height:47px;font-weight:700;border-radius:3px;color:#fff;margin-top:8px;text-align:center}.score-container:after,.best-container:after{position:absolute;width:100%;top:10px;left:0;text-transform:uppercase;font-size:13px;line-height:13px;text-align:center;color:#eee4da}.score-container .score-addition,.best-container .score-addition{position:absolute;right:30px;color:red;font-size:25px;line-height:25px;font-weight:700;color:#776e65e6;z-index:100;-webkit-animation:move-up .6s ease-in;-moz-animation:move-up .6s ease-in;animation:move-up .6s ease-in;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}.score-container:after{content:"Score"}.best-container:after{content:"Best"}.theme-toggle{background:var(--button-bg);border:none;border-radius:3px;color:#fff;font-size:16px;padding:0;margin:0;cursor:pointer;transition:background-color .3s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.theme-toggle:hover{background:var(--button-hover)}p{margin-top:0;margin-bottom:10px;line-height:1.65}a{color:#776e65;font-weight:700;text-decoration:underline;cursor:pointer}strong.important{text-transform:uppercase}hr{border:none;border-bottom:1px solid rgb(215.5181818182,212,208.4818181818);margin-top:20px;margin-bottom:30px}.container{width:500px;margin:0 auto}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.game-container{margin-top:40px;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:var(--grid-bg);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;inset:0;background:var(--message-bg);z-index:100;text-align:center}.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:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;margin-left:9px}.game-container .game-message a.keep-playing-button{display:none}.game-container .game-message{-webkit-animation:fade-in .8s ease 1.2s;-moz-animation:fade-in .8s ease 1.2s;animation:fade-in .8s ease 1.2s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}.game-container .game-message.game-won{background:var(--message-won-bg);color:#f9f6f2}.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:#eee4da59}.grid-cell:last-child{margin-right:0}.tile-container{position:absolute;z-index:2}.tile,.tile .tile-inner{width:107px;height:107px;line-height:107px}.tile{position:absolute}.tile .tile-inner{border-radius:3px;background:var(--tile-bg);text-align:center;font-weight:700;z-index:10;font-size:55px}.tile.tile-2 .tile-inner{background:var(--tile-2-bg);box-shadow:0 0 30px 10px #f3d77400,inset 0 0 0 1px #fff0}.tile.tile-4 .tile-inner{background:var(--tile-4-bg);box-shadow:0 0 30px 10px #f3d77400,inset 0 0 0 1px #fff0}.tile.tile-8 .tile-inner{background:var(--tile-8-bg);color:#f9f6f2}.tile.tile-16 .tile-inner{background:var(--tile-16-bg);color:#f9f6f2}.tile.tile-32 .tile-inner{background:var(--tile-32-bg);color:#f9f6f2}.tile.tile-64 .tile-inner{background:var(--tile-64-bg);color:#f9f6f2}.tile.tile-128 .tile-inner{background:var(--tile-128-bg);color:#f9f6f2;box-shadow:0 0 30px 10px #f3d7743d,inset 0 0 0 1px #ffffff24;font-size:45px}@media screen and (max-width: 520px){.tile.tile-128 .tile-inner{font-size:25px}}.tile.tile-256 .tile-inner{background:var(--tile-256-bg);color:#f9f6f2;box-shadow:0 0 30px 10px #f3d77451,inset 0 0 0 1px #ffffff31;font-size:45px}@media screen and (max-width: 520px){.tile.tile-256 .tile-inner{font-size:25px}}.tile.tile-512 .tile-inner{background:var(--tile-512-bg);color:#f9f6f2;box-shadow:0 0 30px 10px #f3d77465,inset 0 0 0 1px #ffffff3d;font-size:45px}@media screen and (max-width: 520px){.tile.tile-512 .tile-inner{font-size:25px}}.tile.tile-1024 .tile-inner{background:var(--tile-1024-bg);color:#f9f6f2;box-shadow:0 0 30px 10px #f3d77479,inset 0 0 0 1px #ffffff49;font-size:35px}@media screen and (max-width: 520px){.tile.tile-1024 .tile-inner{font-size:15px}}.tile.tile-2048 .tile-inner{background:var(--tile-2048-bg);color:#f9f6f2;box-shadow:0 0 30px 10px #f3d7748e,inset 0 0 0 1px #fff5;font-size:35px}@media screen and (max-width: 520px){.tile.tile-2048 .tile-inner{font-size:15px}}.tile.tile-super .tile-inner{color:#f9f6f2;background:var(--tile-super-bg);font-size:30px}@media screen and (max-width: 520px){.tile.tile-super .tile-inner{font-size:10px}}.tile-merged .tile-inner{z-index:20}.above-game:after{content:"";display:block;clear:both}.game-intro{float:left;line-height:42px;margin-bottom:0}.game-controls{float:right;display:flex;gap:10px}.restart-button,.undo-button,.redo-button,.stats-button{display:inline-block;background:var(--button-bg);border-radius:3px;padding:0 15px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;text-align:center;cursor:pointer;transition:background-color .3s ease}.restart-button:hover,.undo-button:hover,.redo-button:hover,.stats-button:hover{background:var(--button-hover)}.game-explanation{margin-top:50px}.undo-button[disabled],.redo-button[disabled]{background:#bbada0;cursor:not-allowed;opacity:.6;pointer-events:none}.stats-modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080;animation:fade-in .3s ease}.stats-content{background-color:var(--bg-color);margin:5% auto;padding:0;border-radius:8px;width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 20px #0000004d;animation:slide-in .3s ease}.stats-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #ddd;background:var(--button-bg);color:#fff;border-radius:8px 8px 0 0}.stats-header h2{margin:0;font-size:24px}.stats-close{font-size:28px;font-weight:700;cursor:pointer;line-height:1;transition:opacity .3s ease}.stats-close:hover{opacity:.7}.stats-body{padding:20px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:30px}.stat-item{text-align:center;padding:15px;background:var(--score-bg);border-radius:6px;color:#fff;transition:background-color .3s ease}.stat-value{font-size:28px;font-weight:700;margin-bottom:5px}.stat-label{font-size:14px;opacity:.9;text-transform:uppercase;letter-spacing:.5px}.stats-actions{text-align:center}.reset-stats-button{background:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.reset-stats-button:hover{background:#c82333}@keyframes slide-in{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@media screen and (max-width: 520px){html,body{font-size:15px}body{margin:20px 0;padding:0 20px}h1.title{font-size:27px;margin-top:15px}.container{width:280px;margin:0 auto}.score-container,.best-container{margin-top:0;padding:15px 10px;min-width:40px}.heading{margin-bottom:10px}.game-intro{width:55%;display:block;box-sizing:border-box;line-height:1.65}.game-controls{width:100%;display:flex;gap:5px;margin-top:2px}.restart-button,.undo-button,.redo-button,.stats-button{flex:1;padding:0 5px;font-size:12px;height:35px;line-height:35px}.stats-content{margin:10% auto;width:95%;max-height:85vh}.stats-grid{grid-template-columns:repeat(2,1fr);gap:15px}.stat-item{padding:10px}.stat-value{font-size:20px}.stat-label{font-size:12px}.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:#bbada0;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;inset:0;background:#eee4da80;z-index:100;text-align:center;-webkit-animation:fade-in .8s ease 1.2s;-moz-animation:fade-in .8s ease 1.2s;animation:fade-in .8s ease 1.2s;-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:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;margin-left:9px}.game-container .game-message a.keep-playing-button{display:none}.game-container .game-message.game-won{background:#edc22e80;color:#f9f6f2}.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:#eee4da59}.grid-cell:last-child{margin-right:0}.tile-container{position:absolute;z-index:2}.tile,.tile .tile-inner{width:58px;height:58px;line-height:58px}.tile.tile-position-1-1{-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);-ms-transform:translate(0px,0px);transform:translate(0)}.tile.tile-position-1-2{-webkit-transform:translate(0px,67px);-moz-transform:translate(0px,67px);-ms-transform:translate(0px,67px);transform:translateY(67px)}.tile.tile-position-1-3{-webkit-transform:translate(0px,135px);-moz-transform:translate(0px,135px);-ms-transform:translate(0px,135px);transform:translateY(135px)}.tile.tile-position-1-4{-webkit-transform:translate(0px,202px);-moz-transform:translate(0px,202px);-ms-transform:translate(0px,202px);transform:translateY(202px)}.tile.tile-position-2-1{-webkit-transform:translate(67px,0px);-moz-transform:translate(67px,0px);-ms-transform:translate(67px,0px);transform:translate(67px)}.tile.tile-position-2-2{-webkit-transform:translate(67px,67px);-moz-transform:translate(67px,67px);-ms-transform:translate(67px,67px);transform:translate(67px,67px)}.tile.tile-position-2-3{-webkit-transform:translate(67px,135px);-moz-transform:translate(67px,135px);-ms-transform:translate(67px,135px);transform:translate(67px,135px)}.tile.tile-position-2-4{-webkit-transform:translate(67px,202px);-moz-transform:translate(67px,202px);-ms-transform:translate(67px,202px);transform:translate(67px,202px)}.tile.tile-position-3-1{-webkit-transform:translate(135px,0px);-moz-transform:translate(135px,0px);-ms-transform:translate(135px,0px);transform:translate(135px)}.tile.tile-position-3-2{-webkit-transform:translate(135px,67px);-moz-transform:translate(135px,67px);-ms-transform:translate(135px,67px);transform:translate(135px,67px)}.tile.tile-position-3-3{-webkit-transform:translate(135px,135px);-moz-transform:translate(135px,135px);-ms-transform:translate(135px,135px);transform:translate(135px,135px)}.tile.tile-position-3-4{-webkit-transform:translate(135px,202px);-moz-transform:translate(135px,202px);-ms-transform:translate(135px,202px);transform:translate(135px,202px)}.tile.tile-position-4-1{-webkit-transform:translate(202px,0px);-moz-transform:translate(202px,0px);-ms-transform:translate(202px,0px);transform:translate(202px)}.tile.tile-position-4-2{-webkit-transform:translate(202px,67px);-moz-transform:translate(202px,67px);-ms-transform:translate(202px,67px);transform:translate(202px,67px)}.tile.tile-position-4-3{-webkit-transform:translate(202px,135px);-moz-transform:translate(202px,135px);-ms-transform:translate(202px,135px);transform:translate(202px,135px)}.tile.tile-position-4-4{-webkit-transform:translate(202px,202px);-moz-transform:translate(202px,202px);-ms-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}.notification{margin:10px;max-width:none}.notification .notification-content{flex-direction:column;text-align:center}.notification .notification-actions{width:100%;justify-content:center}.notification .notification-btn{flex:1;max-width:100px}}
