:root{--primary: #4f46e5;--primary-dark: #3730a3;--secondary: #818cf8;--accent: #ea580c;--accent-soft: #ffedd5;--bg: #eef2ff;--fg: #1e1b4b;--muted: #5b5680;--muted-bg: #e6ebfd;--border: #c7d2fe;--green: #16a34a;--red: #dc2626;--gold: #f59e0b;--card: #ffffff;--radius: 24px;--radius-sm: 16px;--shadow-clay: 0 10px 0 -2px rgba(79, 70, 229, .16), 0 18px 34px -14px rgba(30, 27, 75, .28);--shadow-soft: 0 6px 0 -3px rgba(79, 70, 229, .14), 0 10px 22px -12px rgba(30, 27, 75, .22);--font-display: "Baloo Bhaijaan 2", "Tajawal", system-ui, sans-serif;--font-body: "Tajawal", "Baloo Bhaijaan 2", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background:radial-gradient(1100px 520px at 88% -8%,#e0e7ff 0%,transparent 62%),radial-gradient(900px 480px at 8% 4%,#ffe4d3 0%,transparent 55%),var(--bg);color:var(--fg);min-height:100vh;line-height:1.7;font-weight:500;overflow-x:hidden}h1,h2,h3,h4,button,.display{font-family:var(--font-display);font-weight:700;line-height:1.35}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--primary);outline-offset:3px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.app{max-width:1180px;margin:0 auto;padding:22px 18px 72px}.stack{display:flex;flex-direction:column;gap:20px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spacer{flex:1}.center{text-align:center}.topbar{position:sticky;top:0;z-index:40;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#eef2ffd1;border-bottom:2px solid rgba(199,210,254,.9)}.topbar-inner{max-width:1180px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:14px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(150deg,var(--primary),#7c3aed);color:#fff;box-shadow:0 6px 0 -2px #3730a380,0 10px 20px -10px #4f46e5cc;border:3px solid #fff}.brand-name{font-family:var(--font-display);font-size:1.32rem;font-weight:800;letter-spacing:-.4px}.brand-tag{font-size:.72rem;color:var(--muted);font-weight:500;margin-top:-6px}.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#fff;border:3px solid var(--border);font-family:var(--font-display);font-weight:700;font-size:.95rem;box-shadow:var(--shadow-soft);white-space:nowrap}.pill.gold{color:#a16207;border-color:#fde68a;background:#fffbeb}.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff;border:3px solid var(--border);box-shadow:var(--shadow-soft);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.icon-btn:hover{transform:translateY(-3px);background:#f5f7ff}.icon-btn:active{transform:translateY(1px);box-shadow:0 2px 0 -1px #4f46e533}.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#fff,#f6f4ff 55%,#fff3e9);border:4px solid #fff;border-radius:32px;padding:34px 30px;box-shadow:var(--shadow-clay);display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center}.hero h1{font-size:clamp(1.9rem,4.2vw,3.1rem);letter-spacing:-1px}.hero p{color:var(--muted);font-size:clamp(.98rem,1.6vw,1.12rem);max-width:46ch;margin-top:8px}.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.badge-sm{font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:#9a3412;border:2px solid #fed7aa}.badge-sm.blue{background:#e0e7ff;color:#3730a3;border-color:#c7d2fe}.badge-sm.green{background:#dcfce7;color:#166534;border-color:#bbf7d0}.hero-art{position:relative;aspect-ratio:1 / 1;max-width:320px;margin-inline:auto;width:100%;display:grid;place-items:center}.blob{position:absolute;top:8%;right:8%;bottom:8%;left:8%;background:radial-gradient(circle at 30% 25%,#c7d2fe,#a5b4fc 60%,#818cf8);border-radius:46% 54% 58% 42%/50% 44% 56% 50%;animation:wobble 12s ease-in-out infinite;box-shadow:inset 0 -14px 40px #3730a340}.hero-tile{position:absolute;width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:#fff;border:3px solid var(--border);color:var(--primary);box-shadow:var(--shadow-soft);animation:floaty 5s ease-in-out infinite}.hero-tile.t1{top:4%;right:2%;color:var(--accent);animation-delay:.2s}.hero-tile.t2{bottom:6%;left:0%;color:var(--green);animation-delay:1.1s}.hero-tile.t3{bottom:26%;right:-2%;color:#7c3aed;animation-delay:.7s}@keyframes wobble{0%,to{border-radius:46% 54% 58% 42%/50% 44% 56% 50%}50%{border-radius:58% 42% 44% 56%/44% 56%}}@keyframes floaty{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(4deg)}}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:10px;flex-wrap:wrap}.section-head h2{font-size:clamp(1.3rem,2.6vw,1.8rem)}.section-head p{color:var(--muted);font-size:.92rem}.grid-games{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:18px}.game-card{position:relative;text-align:right;background:#fff;border:4px solid #fff;border-radius:28px;padding:20px;box-shadow:var(--shadow-clay);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease;display:flex;flex-direction:column;gap:10px;overflow:hidden}.game-card:before{content:"";position:absolute;inset-inline-start:-40px;top:-50px;width:150px;height:150px;border-radius:50%;background:var(--tint, #e0e7ff);opacity:.75}.game-card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 16px 0 -4px #4f46e52e,0 26px 44px -18px #1e1b4b59}.game-card:active{transform:translateY(0)}.game-icon{position:relative;width:64px;height:64px;border-radius:22px;display:grid;place-items:center;color:#fff;background:var(--c1, var(--primary));border:3px solid #fff;box-shadow:0 7px 0 -2px var(--c2, var(--primary-dark)),0 12px 22px -12px #0006}.game-card h3{position:relative;font-size:1.2rem}.game-card p{position:relative;color:var(--muted);font-size:.9rem;flex:1}.card-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}.play-cta{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:.9rem;padding:9px 16px;border-radius:999px;background:var(--fg);color:#fff;transition:gap .2s ease,background .2s ease}.game-card:hover .play-cta{gap:12px;background:var(--primary)}.stars-small{display:inline-flex;gap:2px}.game-shell{display:flex;flex-direction:column;gap:18px}.game-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:4px solid #fff;border-radius:26px;padding:14px 18px;box-shadow:var(--shadow-clay)}.game-head h2{font-size:clamp(1.15rem,2.4vw,1.5rem)}.game-head .stat{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:.92rem;background:var(--muted-bg);padding:7px 13px;border-radius:999px}.back-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:.9rem;padding:9px 15px;border-radius:999px;background:#fff;border:3px solid var(--border);box-shadow:var(--shadow-soft);transition:transform .18s ease,background .18s ease}.back-btn:hover{transform:translate(4px);background:#f5f7ff}.progress-track{height:16px;background:#fff;border-radius:999px;border:3px solid #fff;box-shadow:inset 0 2px 6px #1e1b4b1f;overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--secondary),var(--primary));transition:width .4s cubic-bezier(.34,1.4,.64,1)}.panel{background:#fff;border:4px solid #fff;border-radius:30px;padding:clamp(20px,3vw,34px);box-shadow:var(--shadow-clay)}.q-prompt{font-family:var(--font-display);font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);text-align:center}.q-big{font-family:var(--font-display);font-weight:800;text-align:center;font-size:clamp(2.4rem,7vw,4rem);letter-spacing:1px;line-height:1.2}.q-big .op{color:var(--accent);padding-inline:6px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}.choice{font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,3vw,1.7rem);padding:18px 12px;border-radius:22px;background:#f6f7ff;border:4px solid var(--border);box-shadow:0 7px 0 -2px #dbe2fb;transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;min-height:74px;display:grid;place-items:center}.choice:hover:not(:disabled){transform:translateY(-4px);border-color:var(--secondary);background:#fff}.choice:active:not(:disabled){transform:translateY(2px);box-shadow:0 3px 0 -2px #dbe2fb}.choice.correct{background:#dcfce7;border-color:#4ade80;color:#166534;box-shadow:0 7px 0 -2px #86efac}.choice.wrong{background:#fee2e2;border-color:#f87171;color:#991b1b;box-shadow:0 7px 0 -2px #fca5a5}.choice:disabled{cursor:default;opacity:.92}.feedback{text-align:center;margin-top:16px;font-family:var(--font-display);font-weight:800;font-size:1.1rem;min-height:30px}.feedback.ok{color:var(--green)}.feedback.no{color:var(--red)}.mem-grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}.mem-card{perspective:900px;aspect-ratio:3 / 4;background:none;border:none;padding:0}.mem-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.34,1.3,.64,1);border-radius:20px}.mem-card.flipped .mem-inner,.mem-card.matched .mem-inner{transform:rotateY(180deg)}.mem-face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border-radius:20px;backface-visibility:hidden;border:4px solid #fff;box-shadow:0 7px 0 -2px #4f46e533,0 12px 20px -14px #1e1b4b80}.mem-front{background:linear-gradient(150deg,var(--primary),#7c3aed);color:#fff;background-image:radial-gradient(circle at 25% 20%,rgba(255,255,255,.28),transparent 45%),linear-gradient(150deg,var(--primary),#7c3aed)}.mem-back{background:#f8f9ff;transform:rotateY(180deg);color:var(--primary)}.mem-card.matched .mem-back{background:#dcfce7;border-color:#86efac;color:#15803d}.mem-card.matched{animation:pop .4s ease}@keyframes pop{50%{transform:scale(1.06)}}.seq{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0 4px}.seq-item{width:clamp(52px,12vw,76px);height:clamp(52px,12vw,76px);border-radius:20px;display:grid;place-items:center;background:#f6f7ff;border:4px solid var(--border);color:var(--primary);box-shadow:var(--shadow-soft)}.seq-item.slot{border-style:dashed;border-color:var(--secondary);background:#eef0ff;color:var(--muted);font-family:var(--font-display);font-size:1.6rem;font-weight:800}.seq-item.enter{animation:slideIn .45s cubic-bezier(.34,1.4,.64,1)}@keyframes slideIn{0%{transform:translateY(-12px) scale(.7);opacity:0}}.result-panel{text-align:center;position:relative;overflow:hidden}.result-emoji{font-size:0}.result-title{font-size:clamp(1.5rem,4vw,2.2rem);margin-top:6px}.result-sub{color:var(--muted);margin-top:4px}.big-stars{display:flex;justify-content:center;gap:10px;margin:14px 0 6px}.big-stars svg{animation:starPop .5s cubic-bezier(.34,1.6,.64,1) both}@keyframes starPop{0%{transform:scale(0) rotate(-40deg)}}.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}.btn{font-family:var(--font-display);font-weight:800;font-size:1rem;padding:14px 26px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 0 -2px var(--primary-dark),0 14px 24px -14px #4f46e5e6}.btn-primary:hover{transform:translateY(-3px);background:#4338ca}.btn-primary:active{transform:translateY(2px);box-shadow:0 4px 0 -2px var(--primary-dark)}.btn-ghost{background:#fff;border:4px solid var(--border);box-shadow:var(--shadow-soft)}.btn-ghost:hover{transform:translateY(-3px);background:#f5f7ff}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:90;overflow:hidden}.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}@keyframes fall{to{transform:translate3d(var(--dx, 0),105vh,0) rotate(var(--rot, 540deg));opacity:.9}}.foot{margin-top:34px;text-align:center;color:var(--muted);font-size:.85rem}.foot strong{color:var(--primary)}@media (max-width: 860px){.hero{grid-template-columns:1fr;text-align:center;padding:26px 20px}.hero p{margin-inline:auto}.hero-badges{justify-content:center}.hero-art{max-width:210px;order:-1}.hero-tile{width:50px;height:50px;border-radius:16px}.brand-tag{display:none}}@media (max-width: 560px){.app{padding:14px 12px 56px}.choices{gap:10px}.choice{min-height:64px;border-radius:18px}.mem-grid{gap:8px}.panel{border-radius:24px}.topbar-inner{padding:10px 12px;gap:8px}.pill{padding:6px 10px;font-size:.82rem}.icon-btn{width:40px;height:40px}.game-head{padding:12px;gap:10px}}