*{margin:0;padding:0;box-sizing:border-box}:root{--grid-size: min(90vw, 500px);--cell-gap: calc(var(--grid-size) * .025);--cell-size: calc((var(--grid-size) - var(--cell-gap) * 5) / 4);--border-radius: calc(var(--grid-size) * .012)}html,body{height:100%;overflow:hidden;touch-action:none}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:#faf8ef;display:flex;justify-content:center;align-items:flex-start;padding-top:max(2vh,12px)}#app{display:flex;flex-direction:column;align-items:center;width:var(--grid-size);gap:16px}.header{display:flex;justify-content:space-between;align-items:center;width:100%}.title{font-size:clamp(40px,8vw,64px);font-weight:900;color:#776e65;line-height:1}.scores{display:flex;gap:8px}.score-box{background:#bbada0;border-radius:6px;padding:6px 16px;text-align:center;min-width:70px}.score-box .label{font-size:11px;font-weight:700;color:#eee4da;text-transform:uppercase;letter-spacing:1px}.score-box .value{font-size:22px;font-weight:800;color:#fff;line-height:1.2}.score-pop{position:absolute;top:-10px;right:0;font-size:14px;font-weight:800;color:#776e65e6;animation:scorePop .6s ease forwards;pointer-events:none}@keyframes scorePop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}.subtitle-row{display:flex;justify-content:space-between;align-items:center;width:100%}.subtitle{font-size:14px;color:#776e65}.new-game-btn{background:#8f7a66;color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:14px;font-weight:800;cursor:pointer;transition:background .15s;font-family:inherit}.new-game-btn:hover{background:#9f8b77}.grid-container{position:relative;width:var(--grid-size);height:var(--grid-size);background:#bbada0;border-radius:calc(var(--border-radius) * 2);padding:var(--cell-gap)}.grid-bg{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--cell-gap);width:100%;height:100%}.cell-bg{background:#eee4da59;border-radius:var(--border-radius)}.tile-layer{position:absolute;inset:var(--cell-gap)}.tile{position:absolute;width:var(--cell-size);height:var(--cell-size);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;font-weight:800;transition:top .12s ease,left .12s ease;z-index:1}.tile[data-new=true]{animation:tileAppear .2s ease}.tile[data-merged=true]{animation:tileMerge .2s ease;z-index:2}@keyframes tileAppear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes tileMerge{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.tile-2{background:#eee4da;color:#776e65;font-size:calc(var(--cell-size) * .4)}.tile-4{background:#ede0c8;color:#776e65;font-size:calc(var(--cell-size) * .4)}.tile-8{background:#f2b179;color:#f9f6f2;font-size:calc(var(--cell-size) * .4)}.tile-16{background:#f59563;color:#f9f6f2;font-size:calc(var(--cell-size) * .4)}.tile-32{background:#f67c5f;color:#f9f6f2;font-size:calc(var(--cell-size) * .4)}.tile-64{background:#f65e3b;color:#f9f6f2;font-size:calc(var(--cell-size) * .4)}.tile-128{background:#edcf72;color:#f9f6f2;font-size:calc(var(--cell-size) * .34);box-shadow:0 0 30px 10px #f3d77440}.tile-256{background:#edcc61;color:#f9f6f2;font-size:calc(var(--cell-size) * .34);box-shadow:0 0 30px 10px #f3d77459}.tile-512{background:#edc850;color:#f9f6f2;font-size:calc(var(--cell-size) * .34);box-shadow:0 0 30px 10px #f3d77473}.tile-1024{background:#edc53f;color:#f9f6f2;font-size:calc(var(--cell-size) * .28);box-shadow:0 0 30px 10px #f3d7748c}.tile-2048{background:#edc22e;color:#f9f6f2;font-size:calc(var(--cell-size) * .28);box-shadow:0 0 30px 10px #f3d774a6}.tile-super{background:#3c3a32;color:#f9f6f2;font-size:calc(var(--cell-size) * .22)}.game-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#eee4daba;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:calc(var(--border-radius) * 2);z-index:10;animation:overlayIn .3s ease}.game-overlay.won{background:#edc22e80}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.overlay-text{font-size:clamp(36px,8vw,56px);font-weight:900;color:#776e65;margin-bottom:16px}.game-overlay.won .overlay-text{color:#f9f6f2}.overlay-btn{background:#8f7a66;color:#fff;border:none;border-radius:6px;padding:12px 28px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;margin:4px}.overlay-btn:hover{background:#9f8b77}.footer{font-size:12px;color:#776e65;text-align:center;opacity:.7;padding-top:4px}