*{margin:0;padding:0;box-sizing:border-box}
:root{--radius:12px;--shadow:0 6px 20px rgba(120,110,90,0.15);--bg:#FAF8EF;--board:#BBADA0;--empty:rgba(238,228,218,0.35)}
body{min-height:100vh;background:var(--bg);font-family:'Segoe UI','PingFang SC',sans-serif;display:flex;flex-direction:column;align-items:center;user-select:none;-webkit-user-select:none}
.back-btn{position:fixed;top:12px;left:12px;z-index:100;background:#fff;color:#776E65;padding:7px 15px;border-radius:30px;text-decoration:none;font-size:14px;font-weight:600;box-shadow:var(--shadow)}
.game-wrap{width:min(400px,94vw);margin:50px auto 20px}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.hud .title{font-size:36px;font-weight:800;color:#776E65}
.hud-item{background:#BBADA0;border-radius:8px;padding:6px 18px;text-align:center;min-width:70px}
.hud .label{font-size:11px;color:rgba(255,255,255,0.7);font-weight:600;text-transform:uppercase}
.hud .val{font-size:20px;font-weight:800;color:#fff}
.board{position:relative;background:var(--board);border-radius:var(--radius);padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cell{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px;transition:none}
.cell-0{background:var(--empty);color:transparent}
.cell-2{background:#EEE4DA;color:#776E65}
.cell-4{background:#EDE0C8;color:#776E65}
.cell-8{background:#F2B179;color:#fff}
.cell-16{background:#F59563;color:#fff}
.cell-32{background:#F67C5F;color:#fff}
.cell-64{background:#F65E3B;color:#fff}
.cell-128{background:#EDCF72;color:#fff;font-size:24px}
.cell-256{background:#EDCC61;color:#fff;font-size:24px}
.cell-512{background:#EDC850;color:#fff;font-size:24px}
.cell-1024{background:#EDC53F;color:#fff;font-size:20px}
.cell-2048{background:#EDC22E;color:#fff;font-size:20px}
.cell-big{background:#3C3A32;color:#fff;font-size:18px}
.cell.pop{animation:pop .2s ease-out}
.cell.merge{animation:merge .25s ease-out}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes merge{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(250,248,239,0.75);border-radius:var(--radius);z-index:20;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.show{opacity:1;pointer-events:auto}
.card{background:#fff;border-radius:16px;padding:28px 24px;text-align:center;box-shadow:var(--shadow);animation:popIn .3s ease-out;max-width:280px;width:88%}
.card-emoji{font-size:40px;margin-bottom:4px}
.card h2{font-size:22px;color:#776E65;margin-bottom:6px}
.card .final-score{font-size:44px;font-weight:800;color:#F67C5F;margin:4px 0}
.card p{color:#999;font-size:14px;margin-bottom:12px}
.btn-start{padding:11px 32px;background:linear-gradient(135deg,#F2B179,#F67C5F);color:#fff;border:none;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(246,124,95,0.3)}
.btn-start:hover{transform:scale(1.05)}
.tip{text-align:center;color:#BBB;font-size:13px;margin-top:12px}
@keyframes popIn{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}
@media(max-width:420px){.game-wrap{margin-top:44px}.hud .title{font-size:28px}.cell{font-size:22px}}