*{margin:0;padding:0;box-sizing:border-box;font-family:clear sans,helvetica neue,Arial,sans-serif}body{display:flex;justify-content:center;align-items:center;min-height:100vh}#app{display:flex;flex-direction:column}.header{display:flex}.title{font-size:4.2rem;font-weight:700;color:#776e65;flex-grow:1}.container-score{flex-grow:1;display:flex;align-items:flex-start;justify-content:flex-end;gap:10px}.score,.best-score{min-width:80px;font-weight:700;font-size:1.5rem;padding:5px 10px;background:#bbada0;color:#fff;border-radius:3px;display:flex;flex-direction:column;align-items:center;gap:5px}.score h3,.best-score h3{font-size:.8rem;color:#eee4da}.newgame{padding:10px 0;display:flex;justify-content:space-between;align-items:center}.container-buttons{display:flex;align-items:center;gap:.3rem}.container-buttons .arrow{width:30px;height:30px;border-radius:3px;overflow:hidden;transition:.1s;cursor:pointer}.left{transform:rotate(-90deg)}.right{transform:rotate(90deg)}.bottom{transform:rotate(180deg)}.container-buttons .arrow img{width:100%;height:100%}.newgame button{font-weight:700;background:#8f7a66;color:#fff;padding:10px 15px;margin:10px 0;border-radius:3px;border:none;font-size:1.1rem;cursor:pointer;outline:none}.container-win{display:none;position:absolute;width:100%;height:100%;justify-content:center;align-items:center;flex-direction:column;gap:1rem;background:#ffffff7a;backdrop-filter:blur(2px);padding:2rem;z-index:100;transition:.5s}.container-win h1{font-size:3rem;color:#333;margin-bottom:1rem;text-align:center;text-shadow:0 0 1px #fff;animation:win 4s ease infinite}.container-win .win-score{font-weight:700;font-size:1.3rem}.container-win .win-score span{font-size:1.4rem;letter-spacing:-.1rem;font-weight:900;color:#333}.container-win button{font-weight:700;background:#8f7a66;color:#fff;padding:12px 17px;margin:10px 0;border-radius:3px;border:none;font-size:1.6rem;cursor:pointer;outline:none}.board{position:relative;display:grid;background:#bbada0;gap:10px;padding:10px;border-radius:3px}.board-cell{background:#cdc1b4;color:transparent;display:flex;justify-content:center;align-items:center;font-size:2rem;font-weight:700;border-radius:3px}.container-squares{display:flex;position:absolute;width:100%;height:100%;padding:10px}.square{position:absolute;transition:.1s ease-in-out;transition-property:transform}.square-number{position:absolute;width:100%;height:100%;color:transparent;display:flex;justify-content:center;align-items:center;font-size:2rem;font-weight:700;border-radius:3px}.square-animated{animation:newSquare .2s ease}.square-2{background:#eee4da;color:#776e65;animation:appear .3s ease}.square-4{background:#ede0c8;color:#776e65}.square-8{background:#f2b179;color:#f9f6f2}.square-16{background:#f59563;color:#f9f6f2}.square-32{background:#f67e5f;color:#f9f6f2}.square-64{background:#f65e3b;color:#f9f6f2}.square-128{background:#edcf72;color:#f9f6f2}.square-256{background:#edcc61;color:#f9f6f2}.square-512{background:#4cc74a;color:#f9f6f2}.square-1024{background:#33b5e5;color:#f9f6f2}.square-2048{background:#09c;color:#f9f6f2}@keyframes appear{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes newSquare{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes win{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}