:root{--bg: #faf8ef;--text: #776e65;--board-bg: #bbada0;--cell-bg: #cdc1b4;--tile-default: #3c3a32;--gap: 12px;--radius: 6px;--board-size: min(92vw, 480px)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;display:flex;justify-content:center;padding:16px;-webkit-user-select:none;user-select:none}.app{width:var(--board-size)}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.title{font-size:clamp(40px,12vw,64px);font-weight:800;margin:0;color:#776e65}.scores{display:flex;gap:8px}.score-box{background:var(--board-bg);border-radius:var(--radius);padding:6px 14px;text-align:center;color:#fff;min-width:72px}.score-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:#eee4da}.score-value{display:block;font-size:22px;font-weight:800}.subheader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}.tagline{margin:0;font-size:14px}.new-game{background:#8f7a66;color:#f9f6f2;border:none;border-radius:var(--radius);padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}.new-game:hover{background:#9f8b77}.board{position:relative;width:var(--board-size);height:var(--board-size);background:var(--board-bg);border-radius:var(--radius);padding:var(--gap);touch-action:none}.grid-background,.tile-layer{position:absolute;inset:var(--gap)}.grid-background{display:grid;grid-template-columns:repeat(var(--grid-size, 4),1fr);grid-template-rows:repeat(var(--grid-size, 4),1fr);gap:var(--gap)}.grid-cell{background:var(--cell-bg);border-radius:var(--radius)}.tile-layer{pointer-events:none}.tile{--grid-size: 4;position:absolute;width:calc((100% - (var(--grid-size) - 1) * var(--gap)) / var(--grid-size));height:calc((100% - (var(--grid-size) - 1) * var(--gap)) / var(--grid-size));transform:translate(calc(var(--col) * (100% + var(--gap))),calc(var(--row) * (100% + var(--gap))));transition:transform .1s ease-in-out}.tile-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--tile-default);color:#f9f6f2;font-weight:800;font-size:clamp(20px,7vw,36px)}.tile-2 .tile-inner{background:#eee4da;color:#776e65}.tile-4 .tile-inner{background:#ede0c8;color:#776e65}.tile-8 .tile-inner{background:#f2b179}.tile-16 .tile-inner{background:#f59563}.tile-32 .tile-inner{background:#f67c5f}.tile-64 .tile-inner{background:#f65e3b}.tile-128 .tile-inner{background:#edcf72;font-size:clamp(18px,6vw,30px)}.tile-256 .tile-inner{background:#edcc61;font-size:clamp(18px,6vw,30px)}.tile-512 .tile-inner{background:#edc850;font-size:clamp(18px,6vw,30px)}.tile-1024 .tile-inner{background:#edc53f;font-size:clamp(15px,5vw,24px)}.tile-2048 .tile-inner{background:#edc22e;font-size:clamp(15px,5vw,24px)}.tile-super .tile-inner{background:#3c3a32;font-size:clamp(14px,4.5vw,22px)}.tile-new{animation:pop .16s ease-in-out}.tile-merged{animation:bounce .16s ease-in-out;z-index:2}@keyframes pop{0%{transform:translate(calc(var(--col) * (100% + var(--gap))),calc(var(--row) * (100% + var(--gap)))) scale(0)}to{transform:translate(calc(var(--col) * (100% + var(--gap))),calc(var(--row) * (100% + var(--gap)))) scale(1)}}@keyframes bounce{0%{transform:translate(calc(var(--col) * (100% + var(--gap))),calc(var(--row) * (100% + var(--gap)))) scale(1)}50%{transform:translate(calc(var(--col) * (100% + var(--gap))),calc(var(--row) * (100% + var(--gap)))) scale(1.18)}to{transform:translate(calc(var(--col) * (100% + var(--gap))),calc(var(--row) * (100% + var(--gap)))) scale(1)}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:var(--radius);background:#eee4daba;z-index:3}.overlay.hidden{display:none}.overlay-win{background:#edc22e80}.overlay-message{margin:0;font-size:clamp(32px,10vw,56px);font-weight:800;color:#776e65}.overlay-actions{display:flex;gap:10px}.overlay-button{background:#8f7a66;color:#f9f6f2;border:none;border-radius:var(--radius);padding:10px 18px;font-size:15px;font-weight:700;cursor:pointer}.overlay-button.hidden{display:none}.overlay-button:hover{background:#9f8b77}.controls{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:8px;justify-content:center;margin:20px auto 0}.ctrl{background:#8f7a66;color:#f9f6f2;border:none;border-radius:var(--radius);font-size:20px;cursor:pointer}.ctrl:active{background:#6f5d4d}.ctrl-up{grid-column:2;grid-row:1}.ctrl-left{grid-column:1;grid-row:2}.ctrl-down{grid-column:2;grid-row:2}.ctrl-right{grid-column:3;grid-row:2}.footer{text-align:center;font-size:12px;color:#998d80;margin-top:18px}.credit{margin-top:6px}.credit .heart{color:#e2574c;vertical-align:-3px}.credit a{color:#776e65;font-weight:700;text-decoration:none}.credit a:hover{text-decoration:underline}@media (hover: hover){.controls{opacity:.85}}