/* دمج الأرقام — own look: warm sunset board, chunky candy tiles */
:root{--bg:#fff4e6;--card:#fff;--ink:#3b1f0e;--muted:#9a6b4b;--line:#3b1f0e;--main:#ff8a00;--main2:#ff4f6d;--cell:60px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{background:radial-gradient(circle at 0 0,#ffd8a8 0,#0000 45%),radial-gradient(circle at 100% 100%,#ffc9d6 0,#0000 45%),var(--bg)}
.page{position:relative;max-width:560px;margin:0 auto;padding:10px 12px calc(12px + env(safe-area-inset-bottom));height:100dvh;display:flex;flex-direction:column;gap:8px}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:40px;height:40px;border:2.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:17px;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.sbox,.next{background:#fff;border:2.5px solid var(--line);border-radius:16px;padding:4px 10px;text-align:center;box-shadow:0 3px 0 var(--line)}
.sbox small,.next small{display:block;font-size:11px;color:var(--muted);line-height:1.2}.sbox b{font-size:24px;line-height:1.2}
.nq{display:flex;align-items:center;gap:6px;justify-content:center}
.wrap{flex:1;min-height:0;display:grid;place-items:center}
.board{position:relative;width:calc(var(--cell) * 5 + 16px);height:calc(var(--cell) * 7 + 16px);padding:8px;border:3px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#ffe8cc,#ffd0a1);box-shadow:0 6px 0 var(--line);touch-action:none;user-select:none;-webkit-user-select:none}
.cols{position:absolute;inset:8px;display:grid;grid-template-columns:repeat(5,1fr)}
.cols i{border-radius:12px;margin:2px;background:#ffffff55;transition:background .15s}
.cols i.hot{background:#ffffffaa}
.cols i.full{background:#ff4f6d33}
#tiles{position:absolute;inset:8px}
.t{display:grid;place-items:center;width:var(--cell);height:var(--cell);border:3px solid var(--line);border-radius:14px;background:var(--c,#ffb020);color:#fff;font-weight:800;font-size:calc(var(--cell) * .4);line-height:1;box-shadow:inset 0 -5px 0 #0003,inset 0 4px 0 #fff5;text-shadow:0 2px 0 #0004}
.t.small-font{font-size:calc(var(--cell) * .3)}
#tiles .t{position:absolute;left:0;top:0;transition:transform .14s ease-in,opacity .16s}
#tiles .t.pop{animation:pop .28s cubic-bezier(.3,1.7,.5,1)}
#tiles .t.gone{opacity:0}
#tiles .t.smash{animation:smash .3s ease forwards}
@keyframes pop{0%{scale:1}45%{scale:1.25}100%{scale:1}}
@keyframes smash{to{scale:.2;rotate:40deg;opacity:0}}
.next .t{width:42px;height:42px;font-size:17px;border-width:2.5px;border-radius:11px}
.next .t.mini{width:28px;height:28px;font-size:12px;opacity:.7;border-radius:8px}
.combo{position:absolute;left:50%;top:38%;translate:-50% 0;padding:6px 16px;border:3px solid var(--line);border-radius:999px;background:#ffe066;color:var(--ink);font-size:24px;font-weight:800;white-space:nowrap;animation:comboIn .9s ease forwards;pointer-events:none;z-index:5}
@keyframes comboIn{0%{scale:.5;opacity:0}20%{scale:1.15;opacity:1}70%{scale:1;opacity:1}100%{opacity:0;translate:-50% -30px}}
.tools{display:flex;gap:8px;justify-content:center}
.tool{border:2.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:800;padding:7px 12px;box-shadow:0 3px 0 var(--line);cursor:pointer}
.tool b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--main);color:#fff;font-size:13px}
.tool:disabled{opacity:.45}
.tool.on{background:#ffe066}
.board.hammering .t{cursor:crosshair;animation:shake .5s ease-in-out infinite}
@keyframes shake{25%{rotate:-3deg}75%{rotate:3deg}}
.panel{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;background:#fff4e6f0;backdrop-filter:blur(3px)}
.panel[hidden]{display:none}
.panel h1{margin:0;font-size:44px;line-height:1.1;color:var(--main);text-shadow:0 3px 0 var(--line)}
.panel h2{margin:0;font-size:32px}
.lead{margin:0;color:var(--muted);font-size:16px;max-width:320px}
.logo{display:flex;align-items:center;gap:6px;direction:ltr}
.logo span{display:grid;place-items:center;width:58px;height:58px;border:3px solid var(--line);border-radius:14px;background:var(--c);color:#fff;font-size:28px;font-weight:800;box-shadow:inset 0 -5px 0 #0003,0 4px 0 var(--line)}
.logo span:nth-child(2){animation:slide 1.6s ease-in-out infinite}
.logo .arrow{width:auto;border:0;background:none;box-shadow:none;color:var(--ink);font-size:24px}
@keyframes slide{50%{translate:-10px 0}}
.btn{width:min(280px,100%);border:3px solid var(--line);border-radius:16px;padding:12px;font:inherit;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 var(--line)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.btn-main{background:linear-gradient(135deg,var(--main),var(--main2));color:#fff}
.btn-ghost{background:#fff;color:var(--ink);font-size:16px}
.best-line{margin:0;font-size:15px}
.howto{margin:4px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted);line-height:1.7}
.over-emo{font-size:62px;line-height:1}
.score-row{display:flex;gap:8px;margin:6px 0}
.score-row div{background:#fff;border:2.5px solid var(--line);border-radius:14px;padding:6px 12px;min-width:84px;box-shadow:0 3px 0 var(--line)}
.score-row small{display:block;font-size:11px;color:var(--muted)}.score-row b{font-size:22px}
.new-best{margin:0;color:#e8590c;font-weight:800;font-size:18px}
.board,.nq{direction:ltr}
.page>.panel{top:56px;border-radius:22px}