*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;background-color:#333;color:#f0f0f0}button{font:inherit}body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;overflow-x:hidden;padding:20px}h1{margin-bottom:20px;font-size:clamp(28px,6vw,48px);text-shadow:none}.score-container{display:flex;justify-content:center;gap:40px;margin-bottom:30px;flex-wrap:wrap}.score-container div{background-color:#444;padding:12px 20px;border-radius:8px;color:#f0f0f0;font-size:clamp(14px,3vw,18px);font-weight:700;border:1px solid #555555}.score-container span{color:gold;font-weight:700}.game-container{--cell-size: clamp(60px, 18vw, 100px);--cell-gap: clamp(8px, 2vw, 12px);background-color:rgba(50,50,50,.4);padding:var(--cell-gap);border-radius:clamp(8px,2vw,15px);backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,.3)}@media(max-width:768px){body{padding:10px}h1{margin-bottom:15px}.score-container{gap:20px;margin-bottom:20px}.game-container{padding:var(--cell-gap)}}@media(max-height:600px){body{padding:10px}h1,.score-container{margin-bottom:10px}}.game-grid{display:grid;grid-template-columns:repeat(4,var(--cell-size));grid-template-rows:repeat(4,var(--cell-size));gap:var(--cell-gap);background-color:rgba(0,0,0,.1);padding:var(--cell-gap);border-radius:8px;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cell{background-color:rgba(255,255,255,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative}.grid-cell[data-value]{font-size:clamp(20px,4vw,40px);font-weight:700;transition:all .1s ease-out;box-shadow:0 4px 8px rgba(0,0,0,.2)}.new-cell{animation:pop-in .2s ease-out}.merged-cell{animation:merge-scale .2s ease-out}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes merge-scale{0%{transform:scale(.95)}50%{transform:scale(1.1)}to{transform:scale(1)}}.grid-cell[data-value="2"]{background:linear-gradient(135deg,#eee4da,#ede0c8);color:#776e65}.grid-cell[data-value="4"]{background:linear-gradient(135deg,#ede0c8,#f2b179);color:#f9f6f2}.grid-cell[data-value="8"]{background:linear-gradient(135deg,#f2b179,#f59563);color:#f9f6f2;font-weight:700}.grid-cell[data-value="16"]{background:linear-gradient(135deg,#f59563,#f67c5f);color:#f9f6f2;font-weight:700}.grid-cell[data-value="32"]{background:linear-gradient(135deg,#f67c5f,#f65e3b);color:#f9f6f2;font-weight:700}.grid-cell[data-value="64"]{background:linear-gradient(135deg,#f65e3b,#edcf72);color:#f9f6f2;font-weight:700}.grid-cell[data-value="128"]{background:linear-gradient(135deg,#edcf72,#edcc61);color:#f9f6f2;font-weight:700;font-size:clamp(18px,3.5vw,35px)}.grid-cell[data-value="256"]{background:linear-gradient(135deg,#edcc61,#edc850);color:#f9f6f2;font-weight:700;font-size:clamp(18px,3.5vw,35px)}.grid-cell[data-value="512"]{background:linear-gradient(135deg,#edc850,#edc53f);color:#f9f6f2;font-weight:700;font-size:clamp(18px,3.5vw,35px)}.grid-cell[data-value="1024"]{background:linear-gradient(135deg,#edc22e,#3c3c0c);color:#f9f6f2;font-weight:700;font-size:clamp(16px,3vw,30px)}.grid-cell[data-value="2048"]{background:linear-gradient(135deg,#3d2817,#000);color:#f9f6f2;font-weight:700;font-size:clamp(16px,3vw,30px);box-shadow:0 0 20px rgba(237,194,46,.5)}.grid-cell[data-value="4096"]{background:linear-gradient(135deg,#667eea,#764ba2);color:#f9f6f2;font-weight:700;font-size:clamp(14px,2.5vw,25px)}.grid-cell[data-value="8192"]{background:linear-gradient(135deg,#764ba2,#f093fb);color:#f9f6f2;font-weight:700;font-size:clamp(14px,2.5vw,25px)}.grid-cell[data-value="16384"]{background:linear-gradient(135deg,#f093fb,#4facfe);color:#f9f6f2;font-weight:700;font-size:clamp(12px,2vw,20px)}.grid-cell[data-value]:not([data-value="2"]):not([data-value="4"]):not([data-value="8"]):not([data-value="16"]):not([data-value="32"]):not([data-value="64"]):not([data-value="128"]):not([data-value="256"]):not([data-value="512"]):not([data-value="1024"]):not([data-value="2048"]):not([data-value="4096"]):not([data-value="8192"]):not([data-value="16384"]){background:linear-gradient(135deg,#30cfd0,#330867);color:#f9f6f2;font-weight:700;font-size:clamp(7px,1.2vw,12px)}.game-over,.win-overlay{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);flex-direction:column;justify-content:center;align-items:center;padding:40px 30px;border-radius:15px;color:#fff;z-index:100;animation:modal-pop .3s ease-out;max-width:90vw;text-align:center}.game-over:before,.win-overlay:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5);z-index:-1;border-radius:15px}.game-over{background-color:rgba(80,50,50,.95);box-shadow:0 10px 40px rgba(0,0,0,.5)}.win-overlay{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 10px 40px rgba(102,126,234,.5)}.game-over h2,.win-overlay h2{font-size:clamp(24px,5vw,40px);margin-bottom:15px}.game-over p,.win-overlay p{font-size:clamp(14px,3vw,18px);margin-bottom:25px;opacity:.95}@keyframes modal-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media(max-width:768px){.game-over,.win-overlay{padding:30px 20px;margin:0 20px}}.restart-game-button,.continue-button{padding:12px 24px;cursor:pointer;background-color:#fff;border:none;border-radius:8px;font-size:clamp(14px,2.5vw,18px);font-weight:700;transition:all .3s ease;box-shadow:0 4px 15px rgba(0,0,0,.2);margin-top:10px}.restart-game-button:hover,.continue-button:hover{background-color:#f0f0f0;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}.restart-game-button:active,.continue-button:active{transform:translateY(0)}.new-game-button{margin-top:24px;padding:12px 28px;background-color:#555;color:#f0f0f0;border:2px solid #666666;border-radius:8px;cursor:pointer;font-size:clamp(14px,2.5vw,16px);font-weight:700;transition:all .3s ease;box-shadow:0 4px 8px rgba(0,0,0,.3)}.new-game-button:hover{background-color:#666;transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.4)}.new-game-button:active{transform:translateY(0)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
