:root{--raised:inset 0 1.5px 0 #ffffff8c, inset 1px 0 0 #ffffff2e, inset -1px 0 0 #00000014, inset 0 -4px 0 #0000002e, 0 1px 1px #0000002e, 0 4px 8px -2px #00000047;--raised-strong:inset 0 2px 0 #fff9, inset 1px 0 0 #fff3, inset -1px 0 0 #0000001a, inset 0 -5px 0 #00000038, 0 2px 2px #0003, 0 8px 14px -4px #00000059;--pressed:inset 0 3px 5px #0003, inset 0 1px 1px #0000001f, inset 0 -1px 0 #ffffff4d;--tray:inset 0 4px 10px #00000042, inset 0 -1px 0 #ffffff4d, 0 0 0 1px #ffffff59, 0 1px 0 #fff6, 0 14px 30px -10px #00000059;--sheen:radial-gradient(ellipse 70% 50% at 30% 18%, #ffffff47, #fff0 70%), linear-gradient(180deg, #ffffff29, #fff0 55%);--ambient:radial-gradient(ellipse 70% 45% at 50% 28%, #fff8e673, transparent 70%), radial-gradient(ellipse 120% 60% at 50% 110%, #00000014, transparent 70%);--shade:radial-gradient(ellipse 120% 95% at 50% 40%, transparent 52%, #0000002e)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ambient:radial-gradient(ellipse 80% 60% at 50% 32%, #ffffff0f, transparent 70%);--shade:radial-gradient(ellipse 130% 100% at 50% 40%, transparent 55%, #00000059);--sheen:linear-gradient(180deg, #ffffff1a, #fff0 55%)}}:root[data-theme=dark]{--ambient:radial-gradient(ellipse 80% 60% at 50% 32%, #ffffff0f, transparent 70%);--shade:radial-gradient(ellipse 130% 100% at 50% 40%, transparent 55%, #00000059);--sheen:linear-gradient(180deg, #ffffff1a, #fff0 55%)}@keyframes art-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}@keyframes art-pulse{0%{transform:scale(1)}45%{transform:scale(1.14)}to{transform:scale(1)}}@keyframes art-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@keyframes art-press{0%{transform:scale(1)}40%{transform:scale(.9)}to{transform:scale(1)}}.art-pop{animation:.22s ease-out art-pop}.art-pulse{animation:.22s ease-out art-pulse}.art-shake{animation:.32s ease-in-out art-shake}.art-press{animation:.18s ease-out art-press}@media (prefers-reduced-motion:reduce){.art-pop,.art-pulse,.art-shake,.art-press{animation:none}}.sound-toggle{background:var(--btn,#00000040);width:36px;min-width:36px;height:36px;color:var(--ink,#fff);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:inline-grid}.sound-toggle svg{width:20px;height:20px}.sound-toggle[aria-pressed=true]{opacity:.7}.sound-toggle:focus-visible{outline:3px solid var(--focus,#ffd54a);outline-offset:2px}:root{--bg:#faf8ef;--ink:#3c3a32;--muted:#776e65;--board:#bbada0;--cell:#cdc1b4;--score:#bbada0;--btn:#8f7a66;--btn-ink:#f9f6f2;--dialog:#faf8ef;--focus:#f2a900;--t2:#eee4da;--t4:#ede0c8;--t8:#f2b179;--t16:#f59563;--t32:#f67c5f;--t64:#f65e3b;--t128:#edcf72;--t256:#edcc61;--t512:#edc850;--t1024:#edc53f;--t2048:#edc22e;--t4096:#3c3a32;--dark-ink:#776e65;--light-ink:#f9f6f2;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--veil:#0000008c;--bg:#1f1d19;--ink:#efe9df;--muted:#b4a998;--board:#5a5147;--cell:#6d6358;--score:#5a5147;--dialog:#2a2723;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--veil:#0000008c;--bg:#1f1d19;--ink:#efe9df;--muted:#b4a998;--board:#5a5147;--cell:#6d6358;--score:#5a5147;--dialog:#2a2723;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--ambient), var(--shade), var(--grain,none), var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;font:15px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{--size:min(calc(100vw - 24px), calc(100dvh - 150px), 480px);flex-direction:column;justify-content:center;align-items:center;gap:12px;height:100dvh;padding:8px 12px;display:flex}.bar{width:var(--size);align-items:center;gap:8px;display:flex}.bar h1{color:var(--ink);margin:0 auto 0 0;font-size:clamp(28px,8vw,44px);font-weight:800}.score{background:var(--score);color:#fff;text-align:center;border-radius:6px;flex:none;min-width:56px;padding:4px 8px}.score .label{text-transform:uppercase;opacity:.85;font-size:11px;font-weight:700;display:block}.score .value{font-variant-numeric:tabular-nums;font-size:clamp(14px,4.4vw,18px);font-weight:800}@media (max-width:420px){#app{--size:min(calc(100vw - 24px), calc(100dvh - 200px), 480px)}.bar{flex-wrap:wrap;justify-content:center}.bar h1{text-align:center;flex-basis:100%;margin:0;font-size:32px}.btn{padding:10px}}.btn{font:inherit;color:var(--btn-ink);background:var(--btn);cursor:pointer;white-space:nowrap;border:0;border-radius:6px;min-height:42px;padding:10px 12px;font-weight:700}.btn.primary{background:#f67c5f}.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.btn,.score{box-shadow:var(--raised)}.sound-toggle{--btn:var(--score);--ink:#fff;flex:none}.grid{width:var(--size);height:var(--size);background:var(--board);padding:calc(var(--size) * .025);gap:calc(var(--size) * .025);box-shadow:var(--tray);border-radius:10px;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);display:grid}.cell{background:var(--cell);box-shadow:var(--pressed);border-radius:6px;position:relative}.tile{z-index:1;font-weight:800;font-size:calc(var(--size) * .11);color:var(--dark-ink);font-variant-numeric:tabular-nums;border-radius:6px;place-items:center;display:grid;position:absolute;inset:0}.tile.big{font-size:calc(var(--size) * .085)}.tile.huge{font-size:calc(var(--size) * .064)}.tile.v2{background:var(--t2)}.tile.v4{background:var(--t4)}.tile.v8{background:var(--t8);color:var(--light-ink)}.tile.v16{background:var(--t16);color:var(--light-ink)}.tile.v32{background:var(--t32);color:var(--light-ink)}.tile.v64{background:var(--t64);color:var(--light-ink)}.tile.v128{background:var(--t128);color:var(--light-ink)}.tile.v256{background:var(--t256);color:var(--light-ink)}.tile.v512{background:var(--t512);color:var(--light-ink)}.tile.v1024{background:var(--t1024);color:var(--light-ink)}.tile.v2048{background:var(--t2048);color:var(--light-ink)}.tile.v4096{background:var(--t4096);color:var(--light-ink)}.tile[class*=\ v]{background-image:var(--sheen);box-shadow:var(--raised-strong)}.tile.new{animation:.18s ease-out .11s backwards pop}.tile.merged{animation:.2s ease-out .1s pulse}@keyframes pop{0%{opacity:.4;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes pulse{50%{transform:scale(1.12)}}@media (prefers-reduced-motion:reduce){.tile.new,.tile.merged{animation:none}}.help{color:var(--muted);text-align:center;margin:0;font-size:13px}.overlay{background:var(--veil,#eee4da99);z-index:10;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.dialog{background:var(--dialog);color:var(--ink);text-align:center;border-radius:12px;flex-direction:column;gap:10px;max-width:340px;padding:20px 24px;display:flex;box-shadow:0 10px 40px #00000040}.dialog h2{margin:0;font-size:24px}.dialog p{color:var(--muted);margin:0}@media (max-height:480px){#app{--size:min(calc(100dvh - 20px), calc(100vw - 200px));flex-direction:row;gap:16px}.bar{flex-direction:column;align-items:stretch;width:170px}.bar h1{text-align:center;margin:0}.help{display:none}}