*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#111;font-family:Montserrat,Arial,sans-serif}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:70px 12px 20px;overflow-x:hidden}
#mobilewrap{width:min(92vw,500px)}
#container{position:relative;width:100%;aspect-ratio:1/1;background:#B0BEC5;border-radius:8px;padding:10px;touch-action:none;user-select:none}
.topbar{position:absolute;left:0;right:0;top:-62px;height:54px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.score{height:54px;min-width:110px;padding:6px 14px;background:#B0BEC5;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score .title{font-size:12px;font-weight:700;color:#455A64}.scorefield{font-size:24px;font-weight:700;color:#fff}
.button,.restart{border:0;border-radius:7px;background:#CFD8DC;color:#455A64;font-weight:700;cursor:pointer;padding:0 18px;height:44px;font-size:15px}
.button:active,.restart:active{transform:scale(.97)}
.grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.row{display:contents}.base{background:#CFD8DC;border-radius:6px}
.tiles{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;pointer-events:none}
.tile{display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:700;font-family:Arial,sans-serif;font-size:clamp(22px,7vw,38px);animation:pop .16s ease-out}
.tile-2{background:rgba(255,255,255,.9);color:#455A64}.tile-4{background:#B3E5FC;color:#455A64}.tile-8{background:#81D4FA;color:#455A64}.tile-16{background:#4FC3F7;color:#fff}.tile-32{background:#29B6F6;color:#fff}.tile-64{background:#03A9F4;color:#fff}.tile-128{background:#E6EE9C;color:#455A64}.tile-256{background:#DCE775;color:#455A64}.tile-512{background:#D4E157;color:#455A64}.tile-1024{background:#FFEB3B;color:#455A64;font-size:clamp(18px,6vw,30px)}.tile-2048{background:#FFC107;color:#fff;box-shadow:0 0 12px #FFC107;font-size:clamp(18px,6vw,30px)}
.overlay{position:absolute;inset:10px;border-radius:6px;background:rgba(255,255,255,.78);display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transition:opacity .2s;z-index:5}
.overlay.show{opacity:1;visibility:visible}.overlay strong{display:block;font-size:clamp(32px,10vw,54px);color:#455A64;margin-bottom:18px}.overlay .bestscore{display:block;color:#455A64;font-size:14px;margin-bottom:16px}
@keyframes pop{from{transform:scale(.55)}to{transform:scale(1)}}
@media(max-width:380px){body{padding-top:64px}.topbar{top:-56px;height:50px}.score{height:50px;min-width:95px}.button{height:40px;font-size:13px}.grid,.tiles{gap:7px}.container{padding:7px}}