:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--gap-ratio:2.6;--move-ms:.12s;--radius:6px;--bg:#faf8ef;--text:#776e65;--text-strong:#5b534b;--panel:#bbada0;--cell:#cdc1b4;--score-bg:#bbada0;--score-text:#fffdf8;--button-bg:#efe9dc;--button-text:#5b534b;--primary-bg:#8f7a66;--primary-text:#f9f6f2;--overlay-bg:#faf8efdb;--focus:#2f6fdb;--tile-light:#776e65;--tile-dark:#f9f6f2;--t2:#eee4da;--t4:#ede0c8;--t8:#f2b179;--t16:#f59563;--t32:#f67c5f;--t64:#f65e3b;--t128:#edcf72;--t256:#edcc61;--t512:#edc850;--t1024:#edc53f;--t2048:#edc22e;--tsuper:#3c3a32;font-family:Clear Sans,Helvetica Neue,Arial,PingFang SC,Microsoft YaHei,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#1c1a17;--text:#cbbfb2;--text-strong:#efe6da;--panel:#3a352f;--cell:#4a443c;--score-bg:#3a352f;--score-text:#f3ebe0;--button-bg:#3a352f;--button-text:#efe6da;--primary-bg:#b58a5c;--primary-text:#1c1a17;--overlay-bg:#1c1a17db;--focus:#7fb0ff;--tile-light:#f3ebe0;--tile-dark:#1c1a17;--t2:#6b6157;--t4:#7c6c55;--t8:#c9793d;--t16:#d36a36;--t32:#d95a3a;--t64:#d8452a;--t128:#c7a63b;--t256:#c69f2d;--t512:#c39822;--t1024:#c0900f;--t2048:#d4a017;--tsuper:#e8e1d3}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;touch-action:none}body{min-height:100vh;background:var(--bg);min-height:100dvh;color:var(--text);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0}.game{width:min(100%,500px);padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));margin:0 auto}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.title{color:var(--text-strong);margin:0;font-size:clamp(2.4rem,12vw,4.5rem);font-weight:800;line-height:1}.scores{gap:8px;min-width:0;margin-left:auto;display:flex}.score-box{border-radius:var(--radius);background:var(--score-bg);min-width:68px;color:var(--score-text);flex-direction:column;align-items:center;padding:6px 10px;display:flex}.score-label{letter-spacing:.05em;opacity:.85;font-size:.7rem;font-weight:700}.score-value{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:800}.toolbar{justify-content:flex-end;gap:8px;margin:14px 0;display:flex}.button{border-radius:var(--radius);background:var(--button-bg);min-height:40px;color:var(--button-text);font:inherit;cursor:pointer;border:0;padding:8px 16px;font-size:.95rem;font-weight:700}.button-primary{background:var(--primary-bg);color:var(--primary-text)}.button:disabled{cursor:not-allowed;opacity:.45}.button:focus-visible,.board-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.board-wrap{border-radius:var(--radius);width:min(100%,max(200px,100dvh - 17rem));margin-inline:auto;position:relative}.board{aspect-ratio:1;border-radius:var(--radius);background:var(--panel);position:relative}.grid,.tiles{inset:calc(var(--gap-ratio) * 1%);position:absolute}.grid{gap:calc(var(--gap-ratio) * 1%);grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);display:grid}.cell{background:var(--cell);border-radius:4px}.tiles{container-type:inline-size}.tile{--tile-gap:calc(var(--gap-ratio) * 1cqw);width:calc((100% - 3 * var(--tile-gap)) / 4);aspect-ratio:1;transform:translate(calc(var(--col) * (100% + var(--tile-gap))), calc(var(--row) * (100% + var(--tile-gap))));transition:transform var(--move-ms) ease-in-out;will-change:transform;position:absolute;top:0;left:0}.tile-inner{background:var(--t2);width:100%;height:100%;color:var(--tile-light);border-radius:4px;justify-content:center;align-items:center;font-size:9.5cqw;font-weight:800;line-height:1;display:flex}.tile[data-size="3"] .tile-inner{font-size:7.6cqw}.tile[data-size="4"] .tile-inner{font-size:6.2cqw}.tile[data-size="5"] .tile-inner,.tile[data-size="6"] .tile-inner{font-size:5cqw}.tile[data-value="2"] .tile-inner{background:var(--t2)}.tile[data-value="4"] .tile-inner{background:var(--t4)}.tile[data-value="8"] .tile-inner{background:var(--t8);color:var(--tile-dark)}.tile[data-value="16"] .tile-inner{background:var(--t16);color:var(--tile-dark)}.tile[data-value="32"] .tile-inner{background:var(--t32);color:var(--tile-dark)}.tile[data-value="64"] .tile-inner{background:var(--t64);color:var(--tile-dark)}.tile[data-value="128"] .tile-inner{background:var(--t128);color:var(--tile-dark)}.tile[data-value="256"] .tile-inner{background:var(--t256);color:var(--tile-dark)}.tile[data-value="512"] .tile-inner{background:var(--t512);color:var(--tile-dark)}.tile[data-value="1024"] .tile-inner{background:var(--t1024);color:var(--tile-dark)}.tile[data-value="2048"] .tile-inner{background:var(--t2048);color:var(--tile-dark)}.tile[data-value=super] .tile-inner{background:var(--tsuper);color:var(--tile-dark)}.tile-inner.appear{animation:appear .16s ease-out var(--move-ms) backwards}.tile-inner.pop{animation:.18s ease-out pop}@keyframes appear{0%{opacity:0;transform:scale(.2)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1)}}.overlay{border-radius:var(--radius);background:var(--overlay-bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;animation:.26s ease-out fade-in;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay-title{color:var(--text-strong);margin:0;font-size:clamp(2rem,10vw,3rem);font-weight:800}.overlay-text{margin:0;font-size:1.05rem}.overlay-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;display:flex}@keyframes fade-in{0%{opacity:0}}.help{margin:14px 0 0;font-size:.9rem;line-height:1.5}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (orientation:landscape) and (max-height:520px){.game{width:min(100%,900px);height:100vh;grid-template-rows:auto auto 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:0 24px;height:100dvh;display:grid}.board-wrap{grid-area:1/1/4;align-self:start;width:min(100%,100dvh - 32px);margin-inline:0}.header,.toolbar,.help{grid-column:2}.title{font-size:3rem}}@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile-inner.appear,.tile-inner.pop,.overlay{animation:none}}