:root{font-family:Arial,sans-serif;line-height:1.5;font-weight:400;color:#776e65;background-color:#faf8ef;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;display:flex;justify-content:center;align-items:center;min-width:280px;min-height:100vh;overscroll-behavior:none;touch-action:none}.container{width:100%;max-width:500px;margin:0 auto;padding:1rem;text-align:center}h1{font-size:3.5rem;font-weight:700;margin-bottom:1rem;color:#776e65}.game-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap}.controls-left,.controls-right{display:flex;align-items:center;margin:.25rem 0}.game-controls label{font-weight:700;margin-right:.5rem}.game-controls select{padding:.5rem;border-radius:3px;border:2px solid #bbada0;background-color:#f9f6f2;font-size:1rem}button{background-color:#8f7a66;color:#fff;border:none;border-radius:3px;padding:.5rem 1rem;font-weight:700;cursor:pointer;font-size:1rem;transition:background-color .3s}button:hover{background-color:#9f8b77}.menu-button{margin-left:.5rem;padding:.5rem .7rem;font-size:1.2rem}.score-container{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.score-box{background-color:#bbada0;color:#fff;padding:.5rem 1.5rem;border-radius:3px;font-weight:700;min-width:100px;margin:.25rem 0}.highest-tile-box{min-width:120px}.score-label{display:block;font-size:.8rem;text-transform:uppercase}#score,#best-score,#highest-tile{font-size:1.5rem}.highest-tile{display:inline-block;width:80%;margin:0 auto;padding:.2rem 0;border-radius:3px}.highest-tile.tile-2{background-color:#eee4da;color:#776e65}.highest-tile.tile-4{background-color:#ede0c8;color:#776e65}.highest-tile.tile-8{background-color:#f2b179;color:#f9f6f2}.highest-tile.tile-16{background-color:#f59563;color:#f9f6f2}.highest-tile.tile-32{background-color:#f67c5f;color:#f9f6f2}.highest-tile.tile-64{background-color:#f65e3b;color:#f9f6f2}.highest-tile.tile-128{background-color:#edcf72;color:#f9f6f2}.highest-tile.tile-256{background-color:#edcc61;color:#f9f6f2}.highest-tile.tile-512{background-color:#edc850;color:#f9f6f2}.highest-tile.tile-1024{background-color:#edc53f;color:#f9f6f2;font-size:1.2rem}.highest-tile.tile-2048{background-color:#edc22e;color:#f9f6f2;font-size:1.2rem}.highest-tile.tile-4096,.highest-tile.tile-8192{background-color:#3c3a32;color:#f9f6f2;font-size:1.2rem}#game-container{position:relative;margin:0 auto;padding:.5rem;display:flex;justify-content:center;align-items:center}.grid-container{background-color:#bbada0;border-radius:6px;position:relative;width:100%;max-width:400px;margin:0 auto;overflow:hidden}.animation-grid{display:block;z-index:10;overflow:hidden}.grid-cell{background-color:#eee4da59;border-radius:3px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.tile{width:100%;height:100%;border-radius:3px;font-weight:700;display:flex;justify-content:center;align-items:center;font-size:1.5rem;transition:transform .1s,background-color .1s}.tile-new{animation:tile-appear .2s ease-in-out}.tile-2{background-color:#eee4da;color:#776e65}.tile-4{background-color:#ede0c8;color:#776e65}.tile-8{background-color:#f2b179;color:#f9f6f2}.tile-16{background-color:#f59563;color:#f9f6f2}.tile-32{background-color:#f67c5f;color:#f9f6f2}.tile-64{background-color:#f65e3b;color:#f9f6f2}.tile-128{background-color:#edcf72;color:#f9f6f2;font-size:1.2rem}.tile-256{background-color:#edcc61;color:#f9f6f2;font-size:1.2rem}.tile-512{background-color:#edc850;color:#f9f6f2;font-size:1.2rem}.tile-1024{background-color:#edc53f;color:#f9f6f2;font-size:1rem}.tile-2048{background-color:#edc22e;color:#f9f6f2;font-size:1rem}.tile-super{background-color:#3c3a32;color:#f9f6f2;font-size:.8rem}.game-over{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#eee4daba;display:flex;justify-content:center;align-items:center;border-radius:6px;z-index:20}.game-over-message{background-color:#fff;padding:2rem;border-radius:6px;text-align:center;box-shadow:0 4px 8px #0003}.game-over-message h2{font-size:2rem;margin-bottom:1rem}.game-over-message button{margin-top:1rem;padding:.6rem 1.2rem;font-size:1.1rem}.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;justify-content:center;align-items:center;z-index:100}.popup-content{background-color:#faf8ef;padding:2rem;border-radius:6px;max-width:90%;max-height:90%;overflow-y:auto;position:relative;box-shadow:0 4px 8px #0003}.close-popup{position:absolute;top:10px;right:15px;font-size:1.5rem;cursor:pointer;color:#776e65}.popup h2{margin-bottom:1.5rem;color:#776e65;text-align:center}.popup-text{text-align:left}.popup-text h3{margin:1rem 0 .5rem;color:#776e65}.popup-text p,.popup-text li{margin-bottom:.5rem}.popup-text ul{padding-left:1.5rem}.menu-items{display:flex;flex-direction:column;gap:.8rem}.menu-item-btn{width:100%;padding:.8rem;font-size:1.1rem}@keyframes tile-appear{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.1)}to{transform:scale(1)}}@keyframes tile-merge{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}#scroll-lock{pointer-events:none}@media (max-width: 500px){.container{padding:.5rem}h1{font-size:2.5rem;margin-bottom:.5rem}.game-controls{display:grid;grid-template-columns:auto auto;gap:.5rem;margin-bottom:.5rem;align-items:center}.controls-left{display:flex;align-items:center;grid-column:1}.controls-right{display:flex;justify-content:flex-end;grid-column:2;gap:.3rem}.game-controls label{font-size:.9rem;margin-right:.2rem;white-space:nowrap}.game-controls select{padding:.3rem;font-size:.9rem;max-width:4rem}button{padding:.3rem .6rem;font-size:.9rem}.menu-button{padding:.3rem .5rem;font-size:1rem;margin-left:.3rem}.score-container{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem}.highest-tile-box{grid-column:span 2;width:100%}.score-box{padding:.3rem .5rem;min-width:0;width:100%;margin:0}.score-label{font-size:.7rem}#score,#best-score,#highest-tile,.tile{font-size:1.2rem}.tile-128,.tile-256,.tile-512{font-size:1rem}.tile-1024,.tile-2048{font-size:.8rem}.popup-content{padding:1.5rem;max-width:95%;max-height:80%}.popup h2{font-size:1.5rem;margin-bottom:1rem}.popup-text h3{font-size:1.2rem}.popup-text{font-size:.9rem}.game-over-message{padding:1.5rem}.game-over-message h2{font-size:1.8rem}.game-over-message button{padding:.5rem 1rem}}@media (max-width: 350px){h1{font-size:2rem}.container{padding:.3rem}.game-controls{grid-template-columns:1fr;gap:.3rem}.controls-left,.controls-right{grid-column:1;width:100%;justify-content:space-between}.controls-right{margin-top:.3rem}.game-controls select{max-width:3.5rem}button{padding:.25rem .5rem;font-size:.8rem}.menu-button,.score-box{padding:.25rem .4rem}#score,#best-score,#highest-tile{font-size:1rem}.popup-content{padding:1rem}.tile{font-size:1rem}.tile-128,.tile-256,.tile-512{font-size:.8rem}.tile-1024,.tile-2048{font-size:.7rem}.game-over-message{padding:1rem}.game-over-message h2{font-size:1.5rem}.game-over-message button{padding:.4rem .8rem;font-size:.9rem}}@media (max-width: 300px){h1{font-size:1.8rem}.game-controls label{font-size:.8rem}.game-controls select{font-size:.8rem;padding:.2rem;max-width:3rem}button{font-size:.8rem;padding:.2rem .4rem}.score-box{padding:.2rem .4rem}.score-label{font-size:.6rem}#score,#best-score,#highest-tile,.tile{font-size:.9rem}.tile-128,.tile-256,.tile-512{font-size:.7rem}.tile-1024,.tile-2048{font-size:.6rem}.game-over-message{padding:.8rem}.game-over-message h2{font-size:1.3rem;margin-bottom:.5rem}.game-over-message button{padding:.3rem .6rem;font-size:.8rem;margin-top:.5rem}}