:root{color-scheme:light;--bg: #f4ecdd;--panel: #efe5d2;--board: #e6d6ba;--cell: #f0e7d5;--ink: #2b2622;--ink-dim: #8a7c69;--line: #d8c5a3;--accent: #d4622a;--accent-2: #e8a02c;--scrim: rgba(244, 236, 221, .86);--t2-bg: #efe1c8;--t2-fg: #6b5f51;--t4-bg: #ecd6b2;--t4-fg: #5a4e40;--gap: 14px;--radius: 16px;--tile-radius: 11px;--shadow: 0 18px 40px -16px rgba(76, 53, 24, .4)}.dark{color-scheme:dark;--bg: #13100e;--panel: #1f1a16;--board: #2a231d;--cell: #352c24;--ink: #f4ead9;--ink-dim: #a8978a;--line: #3d3228;--accent: #e8a02c;--accent-2: #d4622a;--scrim: rgba(19, 16, 14, .86);--t2-bg: #403228;--t2-fg: #e9d9c4;--t4-bg: #4d3a28;--t4-fg: #f0dcc0;--shadow: 0 18px 40px -12px rgba(0, 0, 0, .7)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px 14px 40px;overflow-x:hidden;background-color:var(--bg);background-image:radial-gradient(120% 90% at 50% -10%,rgba(232,160,44,.1),transparent 55%),radial-gradient(80% 60% at 90% 110%,rgba(212,98,42,.08),transparent 50%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");color:var(--ink);font-family:Fraunces,Georgia,serif;transition:background-color .35s ease,color .35s ease}[dir=rtl] body{font-family:IBM Plex Sans Arabic,system-ui,sans-serif}.wrap{width:100%;max-width:480px}.hd{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}.brand h1{font-size:clamp(46px,15vw,68px);font-weight:900;line-height:.85;letter-spacing:-.03em;font-family:Space Mono,monospace;background:linear-gradient(180deg,var(--accent-2) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.tagline{color:var(--ink-dim);font-size:13px;margin-top:6px;letter-spacing:.02em;max-width:220px}[dir=rtl] body .tagline{font-size:14px}.scores{display:flex;gap:10px;flex-shrink:0}.score-box{background:var(--board);border:1px solid var(--line);border-radius:12px;padding:8px 14px;text-align:center;min-width:74px;transition:background-color .35s ease,border-color .35s ease}.score-box .label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);font-family:Space Mono,monospace}[dir=rtl] body .score-box .label{text-transform:none;letter-spacing:0;font-family:IBM Plex Sans Arabic,sans-serif;font-weight:700}.score-box .val{display:block;font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;font-family:Space Mono,monospace}[dir=rtl] body .score-box .val{font-family:IBM Plex Sans Arabic,sans-serif}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}.controls-actions{display:flex;gap:10px;flex:1 1 auto}.controls-prefs{display:flex;gap:10px;flex-wrap:wrap}.btn{font-family:Space Mono,monospace;font-weight:700;border:none;cursor:pointer;border-radius:11px;color:var(--ink);transition:transform .12s ease,filter .2s ease,background .2s ease}[dir=rtl] body .btn{font-family:IBM Plex Sans Arabic,sans-serif}.btn:active{transform:scale(.95)}.btn-primary{flex:1 1 auto;background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#1a120a;padding:13px 18px;font-size:15px;box-shadow:0 6px 16px -6px #e8a02c99}.btn-primary:hover{filter:brightness(1.07)}.btn-icon{background:var(--board);color:var(--ink);border:1px solid var(--line);width:48px;height:48px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:18px}.btn-icon:hover:not(:disabled){background:var(--cell)}.btn-icon:disabled{opacity:.38;cursor:not-allowed}.seg{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--board)}.seg button{border:none;background:transparent;cursor:pointer;font-family:Space Mono,monospace;font-weight:700;font-size:13px;padding:0 14px;height:48px;color:var(--ink-dim);transition:background .15s,color .15s}[dir=rtl] body .seg button{font-family:IBM Plex Sans Arabic,sans-serif}.seg button+button{border-inline-start:1px solid var(--line)}.seg button.active{background:var(--accent);color:#1a120a}.board-wrap{position:relative}.board{position:relative;width:100%;aspect-ratio:1 / 1;padding:var(--gap);background:var(--board);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);container-type:inline-size;touch-action:none;user-select:none;-webkit-user-select:none;transition:background-color .35s ease,border-color .35s ease}.grid-bg{position:absolute;inset:var(--gap);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--gap)}.grid-bg .cell{background:var(--cell);border-radius:var(--tile-radius);transition:background-color .35s ease}.tiles{position:absolute;inset:var(--gap)}.tile{position:absolute;left:0;top:0;width:calc((100% - 3 * var(--gap)) / 4);height:calc((100% - 3 * var(--gap)) / 4);display:flex;align-items:center;justify-content:center;border-radius:var(--tile-radius);font-weight:700;font-family:Space Mono,monospace;font-variant-numeric:tabular-nums;font-size:10cqw;line-height:1;box-shadow:0 4px 10px -4px #00000080;--pos: translate( calc(var(--vcol) * (100% + var(--gap))), calc(var(--row) * (100% + var(--gap))) );transform:var(--pos);transition:transform .13s cubic-bezier(.3,.8,.4,1);will-change:transform}[dir=rtl] body .tile{font-family:IBM Plex Sans Arabic,sans-serif;font-weight:700}.tile.len3{font-size:8cqw}.tile.len4{font-size:6.2cqw}.tile.is-new{animation:pop .18s ease}.tile.is-merged{animation:merge .2s ease}@keyframes pop{0%{transform:var(--pos) scale(.1)}60%{transform:var(--pos) scale(1.12)}to{transform:var(--pos) scale(1)}}@keyframes merge{0%{transform:var(--pos) scale(1)}40%{transform:var(--pos) scale(1.22)}to{transform:var(--pos) scale(1)}}.t2{background:var(--t2-bg);color:var(--t2-fg)}.t4{background:var(--t4-bg);color:var(--t4-fg)}.t8{background:#c97b3a;color:#fff6ea}.t16{background:#d4622a;color:#fff6ea}.t32{background:#dd4f2e;color:#fff6ea}.t64{background:#e23b2e;color:#fff6ea}.t128{background:#e8a02c;color:#2a1a08;box-shadow:0 0 16px -2px #e8a02c73,0 4px 10px -4px #00000080}.t256{background:#f0ab1f;color:#2a1a08;box-shadow:0 0 20px -2px #f0ab1f8c,0 4px 10px -4px #00000080}.t512{background:#f6b80f;color:#2a1a08;box-shadow:0 0 24px #f6b80f99,0 4px 10px -4px #00000080}.t1024{background:linear-gradient(135deg,#ffd23f,#ff9a1f);color:#2a1a08;box-shadow:0 0 30px #ffb41eb3}.t2048{background:linear-gradient(135deg,#ffe066,#ff7b00);color:#2a1a08;box-shadow:0 0 40px 4px #ffb41ed9}.tbig{background:linear-gradient(135deg,#1a1a1a,#000);color:var(--accent);border:1px solid var(--accent);box-shadow:0 0 30px #e8a02c99}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;border-radius:var(--radius);background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade .35s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.overlay h2{font-size:clamp(38px,12vw,56px);font-weight:900;letter-spacing:-.02em}[dir=rtl] body .overlay h2{font-family:IBM Plex Sans Arabic,sans-serif}.overlay.win h2{color:var(--accent-2)}.overlay.lose h2{color:var(--accent)}.overlay p{color:var(--ink-dim);font-size:15px;max-width:280px}.overlay .btn-primary{flex:0 0 auto;padding:13px 30px}.help{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:background-color .35s ease,border-color .35s ease}.help summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:16px;-webkit-user-select:none;user-select:none}.help summary::-webkit-details-marker{display:none}.help summary .chev{color:var(--accent);font-family:Space Mono,monospace;transition:transform .25s ease}.help[open] summary .chev{transform:rotate(90deg)}[dir=rtl] body .help[open] summary .chev{transform:rotate(-90deg)}.help-body{padding:4px 18px 20px;color:var(--ink-dim);font-size:14.5px;line-height:1.65}[dir=rtl] body .help-body{font-size:15.5px;line-height:1.8}.help-intro{color:var(--ink);margin-bottom:14px}.help-body ul{list-style:none}.help-body li{position:relative;padding-inline-start:24px;margin-bottom:10px}.help-body li:before{content:"◆";position:absolute;inset-inline-start:0;top:1px;color:var(--accent);font-size:11px}.keys{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}kbd{background:var(--cell);border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;padding:7px 11px;font-family:Space Mono,monospace;font-size:13px;color:var(--ink);min-width:38px;text-align:center}.footer{text-align:center;color:var(--ink-dim);font-size:12px;margin-top:22px;font-family:Space Mono,monospace;letter-spacing:.04em}[dir=rtl] body .footer{font-family:IBM Plex Sans Arabic,sans-serif;letter-spacing:0}@media(max-width:380px){:root{--gap: 11px}.score-box{min-width:64px;padding:7px 10px}.seg button{padding:0 11px}}@media(prefers-reduced-motion:reduce){.tile{transition:none}.tile.is-new,.tile.is-merged,.overlay{animation:none}}
