/* تحدي الذاكرة — new look (owner 2026-10-27): fresh mint & coral game table, chunky cartoon cards that really flip */
:root{--ink:#1f2d3d;--muted:#5f7182;--line:#1f2d3d;--main:#24c6a4;--main2:#ff7a59}
*{box-sizing:border-box}
html,body{margin:0;height:100%;color:var(--ink);font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;overflow:hidden}
body{background:radial-gradient(circle at 85% 0,#fff7c9 0,#0000 35%),radial-gradient(circle,#ffffff55 2px,#0000 3px) 0 0/26px 26px,linear-gradient(180deg,#b9f3e4,#8fe3cf 55%,#ffd6c7)}
.page{position:relative;max-width:560px;margin:0 auto;padding:calc(10px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px)) 12px calc(10px + 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:#fff;color:var(--ink);font-size:17px;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.hud{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}
.chip{background:#fff;border:2.5px solid var(--line);border-radius:16px;padding:2px 10px;text-align:center;box-shadow:0 3px 0 var(--line)}
.chip small{display:block;font-size:11px;color:var(--muted);line-height:1.3}.chip b{font-size:21px;line-height:1.15;font-variant-numeric:tabular-nums}
.chip.wide{background:linear-gradient(135deg,#fff3c4,#ffe08a)}
.board-wrap{position:relative;flex:1;min-height:0;display:grid;place-items:center;border:3px solid var(--line);border-radius:24px;box-shadow:0 4px 0 var(--line);background:radial-gradient(circle,#ffffff40 1.5px,#0000 2px) 0 0/16px 16px,linear-gradient(160deg,#2a9d8f,#1d7f74)}
.board{display:grid;grid-template-columns:repeat(var(--cols),var(--cw,70px));gap:8px;padding:8px;perspective:900px}
.card{position:relative;width:var(--cw,70px);aspect-ratio:.8;border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.3,1.35,.5,1);animation:deal .45s var(--d) backwards}
@keyframes deal{from{transform:translateY(-30px) scale(.6);opacity:0}}
.card.open{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border:3px solid var(--line);border-radius:14px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 4px 0 var(--line)}
.back{background:repeating-linear-gradient(45deg,#ff7a59 0 8px,#ff8f73 8px 16px)}
.back i{display:grid;place-items:center;width:55%;aspect-ratio:1;border-radius:50%;background:#fff;color:#ff7a59;font-style:normal;font-weight:800;font-size:calc(var(--cw,70px) * .38);border:2.5px solid var(--line)}
.front{transform:rotateY(180deg);background:var(--t,#fff);font-size:calc(var(--cw,70px) * .52);line-height:1}
.card.done .front{background:#d9fbe9;box-shadow:0 0 0 3px #24c6a4,0 4px 0 var(--line);animation:pop .4s ease}
@keyframes pop{50%{transform:rotateY(180deg) scale(1.12)}}
.card.done{transform:rotateY(180deg)}
.card.shake{animation:shake .35s}
@keyframes shake{25%{translate:-4px 0}75%{translate:4px 0}}
.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:6px 14px;box-shadow:0 3px 0 var(--line);cursor:pointer}
.panel{position:absolute;inset:56px 0 0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px;text-align:center;background:#effcf8f2;backdrop-filter:blur(3px);border-radius:24px}
.panel[hidden]{display:none}
.panel h1{margin:0;font-size:44px;line-height:1.1;color:var(--main);-webkit-text-stroke:1.2px var(--line);text-shadow:0 3px 0 var(--line)}
.panel h2{margin:0;font-size:30px}
.lead{margin:0;color:var(--muted);font-size:16px;max-width:330px}
.logo{display:flex;gap:10px;align-items:center;height:96px}
.logo i{display:grid;place-items:center;width:62px;height:78px;border:3px solid var(--line);border-radius:14px;background:#ffe0e6;font-style:normal;font-size:36px;box-shadow:0 4px 0 var(--line);animation:bob 2s ease-in-out infinite}
.logo i.q{background:repeating-linear-gradient(45deg,#ff7a59 0 8px,#ff8f73 8px 16px);color:#fff;font-weight:800;animation-delay:.3s}
.logo i:last-child{animation-delay:.6s}
@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}
.lvls{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(330px,100%)}
.lvl{border:3px solid var(--line);border-radius:16px;background:#fff;font:inherit;color:var(--ink);padding:8px 6px;cursor:pointer;box-shadow:0 4px 0 var(--line);display:flex;flex-direction:column;align-items:center}
.lvl b{font-size:19px}.lvl small{font-size:12px;color:var(--muted)}
.lvl.on{background:linear-gradient(135deg,var(--main),#5ee0c3);color:#fff}.lvl.on small{color:#fff}
.lvl:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn{width:min(280px,100%);border:3px solid var(--line);border-radius:16px;padding:11px;font:inherit;font-size:19px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 var(--line);color:var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.btn-main{background:linear-gradient(135deg,var(--main),#5ee0c3);color:#fff}
.btn-ghost{background:#fff;font-size:16px}
.btn[hidden]{display:none}
.howto{margin:4px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted);line-height:1.7}
.win-emo{font-size:56px;line-height:1}
.stars{display:flex;gap:6px;font-size:40px}.stars i{font-style:normal;filter:grayscale(1);opacity:.35;animation:star .5s var(--d) both}.stars i.on{filter:none;opacity:1}
@keyframes star{from{transform:scale(0) rotate(-90deg)}}
.toast{position:absolute;left:50%;top:40%;translate:-50% 0;padding:6px 16px;border:2.5px solid var(--line);border-radius:999px;background:#fff;font-weight:800;z-index:30}
.toast[hidden]{display:none}
@media (max-height:680px){.howto{display:none}}