*,:before,:after{box-sizing:border-box}:root{--bg:#faf8ef;--text:#776e65;--board:#bbada0;--cell:#cdc1b4;--accent:#8f7a66;--gap:clamp(8px, 2.5vw, 14px);--board-size:min(92vw, 460px)}html,body{background:var(--bg);color:var(--text);margin:0;font-family:Clear Sans,Helvetica Neue,Arial,sans-serif}.app{width:var(--board-size);margin:0 auto;padding:16px 0 24px}.top{justify-content:space-between;align-items:center;gap:8px;display:flex}h1{margin:0;font-size:clamp(40px,13vw,72px);line-height:1}.scores{gap:6px;display:flex}.score-box{background:var(--board);color:#fff;text-align:center;border-radius:6px;flex-direction:column;min-width:70px;padding:6px 12px;display:flex}.score-box .label{text-transform:uppercase;color:#eee4da;letter-spacing:.5px;font-size:11px}.score-box .value{font-size:20px;font-weight:700}.actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:14px 0;display:flex}.hint{margin:0;font-size:15px}.buttons{gap:8px;display:flex}button{background:var(--accent);color:#f9f6f2;cursor:pointer;border:0;border-radius:6px;padding:10px 14px;font-family:inherit;font-size:15px;font-weight:700}button:hover:not(:disabled){filter:brightness(1.1)}button:focus-visible{outline-offset:2px;outline:3px solid #f59563}button:disabled{opacity:.45;cursor:not-allowed}button[hidden]{display:none}.board-wrap{touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.board{gap:var(--gap);padding:var(--gap);background:var(--board);aspect-ratio:1;border-radius:8px;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);width:100%;display:grid}.cell{background:var(--cell);border-radius:5px;min-width:0;min-height:0}.tiles{pointer-events:none;--tile-size:calc((var(--board-size) - 5 * var(--gap)) / 4);position:absolute;inset:0}.tile{width:var(--tile-size);height:var(--tile-size);transform:translate(calc(var(--gap) + var(--c) * (var(--tile-size) + var(--gap))), calc(var(--gap) + var(--r) * (var(--tile-size) + var(--gap))));transition:transform .11s ease-in-out;position:absolute;top:0;left:0}.tile-inner{border-radius:5px;justify-content:center;align-items:center;width:100%;height:100%;font-size:clamp(22px,9vw,52px);font-weight:700;display:flex}.tile-inner.d3{font-size:clamp(20px,7.5vw,44px)}.tile-inner.d4{font-size:clamp(16px,6vw,34px)}.tile-inner.d5{font-size:clamp(13px,4.8vw,28px)}.t2{color:#776e65;background:#eee4da}.t4{color:#776e65;background:#ede0c8}.t8{color:#f9f6f2;background:#f2b179}.t16{color:#f9f6f2;background:#f59563}.t32{color:#f9f6f2;background:#f67c5f}.t64{color:#f9f6f2;background:#f65e3b}.t128{color:#f9f6f2;background:#edcf72}.t256{color:#f9f6f2;background:#edcc61}.t512{color:#f9f6f2;background:#edc850}.t1024{color:#f9f6f2;background:#edc53f}.t2048{color:#f9f6f2;background:#edc22e;box-shadow:0 0 20px #edc22e99}.tbig{color:#f9f6f2;background:#3c3a32}.tile-inner.new{animation:.18s ease-out pop}.tile-inner.merged{animation:.18s ease-in-out bump}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.overlay{text-align:center;background:#eee4dac7;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;animation:.3s ease-in fade;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay.win{color:#f9f6f2;background:#edc22e8c}.overlay-title{margin:0;font-size:clamp(32px,10vw,56px);font-weight:700}.overlay-text{margin:0;font-size:18px}.overlay .buttons{flex-wrap:wrap;justify-content:center}@keyframes fade{0%{opacity:0}to{opacity:1}}.controls{margin-top:16px;font-size:14px;line-height:1.4}@media (width<=400px){.score-box{min-width:58px;padding:5px 8px}.score-box .value{font-size:17px}button{padding:9px 10px;font-size:14px}.hint{font-size:14px}}@media (prefers-reduced-motion:reduce){.tile-inner.new,.tile-inner.merged,.overlay{animation:none}.tile{transition:none}}