:root{--bg:#faf6f0;--text:#4a3f35;--muted:#8a7d70;--board:#c4b5a5;--cell:#ffffff59;--panel:#b3a291;--panel-text:#fffaf3;--btn:#8f7a66;--btn-hover:#7a6654;--overlay:#faf6f0c7;--t2:#efe6da;--t4:#ecdcc4;--t8:#f2b179;--t16:#f59563;--t32:#f67c5f;--t64:#f65e3b;--t128:#edcf72;--t256:#edcc61;--t512:#edc850;--t1024:#edc53f;--t2048:#edc22e;--tbig:#3c3a32;--tile-dark-text:#5b4e42;--tile-light-text:#fffaf3;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1b1916;--text:#efe6da;--muted:#a39686;--board:#3a332c;--cell:#ffffff0f;--panel:#4a4037;--btn:#a38b74;--btn-hover:#b89f87;--overlay:#1b1916cc;--t2:#5c5248;--t4:#6d5f50;--tile-dark-text:#f5ece0;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif}body{min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) 16px 32px;justify-content:center;display:flex}.app{width:100%;max-width:480px}.top{justify-content:space-between;align-items:center;gap:12px;display:flex}.title{letter-spacing:-.02em;margin:0;font-size:clamp(48px,14vw,72px);font-weight:800;line-height:1}.scores{gap:8px;display:flex}.score-box{background:var(--panel);min-width:72px;color:var(--panel-text);text-align:center;border-radius:8px;padding:6px 12px;position:relative}.score-label{letter-spacing:.08em;text-transform:uppercase;opacity:.8;font-size:11px;font-weight:700;display:block}.score-value{font-variant-numeric:tabular-nums;font-size:22px;font-weight:800;display:block}.score-pop{color:var(--text);pointer-events:none;font-size:20px;font-weight:800;animation:.6s ease-out forwards score-pop;position:absolute;top:18px;left:0;right:0}@keyframes score-pop{to{opacity:0;transform:translateY(-36px)}}.bar{justify-content:space-between;align-items:center;gap:12px;margin:18px 0 16px;display:flex}.tagline,.help{color:var(--muted);margin:0}.help{margin-top:20px;font-size:14px;line-height:1.5}.btn{background:var(--btn);color:#fffaf3;font:inherit;cursor:pointer;border:0;border-radius:8px;flex-shrink:0;padding:10px 16px;font-weight:700}.btn:hover{background:var(--btn-hover)}.btn:focus-visible{outline:3px solid var(--t8);outline-offset:2px}.board{--size:4;--gap:clamp(8px, 3cqw, 14px);--cell-size:calc((100cqw - var(--gap) * (var(--size) + 1)) / var(--size));aspect-ratio:1;background:var(--board);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:10px;width:100%;position:relative;container-type:inline-size}.cell,.tile{top:var(--gap);left:var(--gap);width:var(--cell-size);height:var(--cell-size);transform:translate(calc(var(--c) * (var(--cell-size) + var(--gap))), calc(var(--r) * (var(--cell-size) + var(--gap))));position:absolute}.cell{background:var(--cell);border-radius:6px}.tile{z-index:2;transition:transform .11s ease-in-out}.tile.consumed{z-index:1}.tile-inner{background:var(--tile-bg,var(--tbig));width:100%;height:100%;color:var(--tile-fg,var(--tile-light-text));font-weight:800;font-size:calc(var(--cell-size) * var(--fs,.45));font-variant-numeric:tabular-nums;border-radius:6px;justify-content:center;align-items:center;display:flex}.tile.new .tile-inner{animation:.16s ease-out .1s backwards appear}.tile.merged .tile-inner{animation:.18s ease-out .1s backwards pop}@keyframes appear{0%{opacity:0;transform:scale(0)}}@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.15)}to{transform:scale(1)}}.overlay{z-index:5;background:var(--overlay);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:16px;animation:.4s .3s backwards fade;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay-msg{margin:0;font-size:clamp(32px,10cqw,52px);font-weight:800}.overlay-actions{gap:8px;display:flex}@keyframes fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile-inner,.overlay,.score-pop{animation:none!important}}
