@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(../fonts/cairo-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(../fonts/cairo-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;font-weight:900;font-display:swap;src:url(../fonts/cairo-arabic-900-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(../fonts/cairo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(../fonts/cairo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-weight:900;font-display:swap;src:url(../fonts/cairo-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f3f6ff; --bg2:#e6edff; --card:#ffffff; --ink:#1b2440; --muted:#5d6788; --line:#dbe3f7;
  --pri:#3d6bff; --pri2:#2a4fd6; --sun:#ffc533; --ok:#1fb96b; --bad:#ff5a5f; --pink:#ff7ab6; --teal:#14b8a6; --violet:#8b5cf6; --orange:#ff8a3d;
  --shadow:0 6px 0 rgba(27,36,64,.10), 0 10px 28px rgba(27,36,64,.10);
  --r:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0f1426;--bg2:#161d36;--card:#1b2340;--ink:#eef2ff;--muted:#a6b0d4;--line:#2a345a;--shadow:0 6px 0 rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.35)}
}
:root[data-theme="dark"]{--bg:#0f1426;--bg2:#161d36;--card:#1b2340;--ink:#eef2ff;--muted:#a6b0d4;--line:#2a345a;--shadow:0 6px 0 rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.35)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:Cairo,system-ui,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
 radial-gradient(circle at 12% 8%,rgba(61,107,255,.13),transparent 32%),
 radial-gradient(circle at 92% 18%,rgba(255,197,51,.20),transparent 30%),
 radial-gradient(circle at 70% 95%,rgba(255,122,182,.13),transparent 35%)}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
.m{unicode-bidi:isolate;direction:ltr;display:inline-block;font-family:Cairo,system-ui,sans-serif;white-space:nowrap}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:20px}
.brand .logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--pri),var(--violet));display:grid;place-items:center;color:#fff;font-size:22px;box-shadow:0 3px 0 var(--pri2)}
.top .sp{flex:1}
body.playing .top,body.playing main{display:none}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:15px}
.iconbtn{width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:19px}

.wrap{max-width:1040px;margin:0 auto;padding:18px 16px 90px}
h1,h2,h3{line-height:1.3;margin:0 0 10px}
h1{font-size:clamp(26px,5vw,40px);font-weight:900}
h2{font-size:22px;font-weight:900}
.muted{color:var(--muted)}

.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:center;margin:8px 0 22px}
.hero .mascot{font-size:110px;text-align:center;filter:drop-shadow(0 10px 18px rgba(0,0,0,.15));animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(-3deg)}}
@media (max-width:640px){.hero{grid-template-columns:1fr}.hero .mascot{font-size:80px;order:-1}}

.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:860px){.g5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.g3,.g2{grid-template-columns:1fr}.g5{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line);padding:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r);color:#fff;box-shadow:var(--shadow);overflow:hidden;transition:transform .15s;min-height:140px}
.tile:active{transform:scale(.97)}
.tile:hover{transform:translateY(-3px)}
.tile .big{font-size:44px;line-height:1}
.tile .t{font-weight:900;font-size:21px}
.tile .s{opacity:.92;font-size:14px}
.tile::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.14);inset-inline-end:-50px;bottom:-60px}
.c-blue{background:linear-gradient(135deg,#4f7bff,#2a4fd6)}.c-pink{background:linear-gradient(135deg,#ff8ac0,#e2508f)}.c-teal{background:linear-gradient(135deg,#22c7b4,#0e8f80)}
.c-violet{background:linear-gradient(135deg,#a17bff,#6d3fe0)}.c-orange{background:linear-gradient(135deg,#ffa25c,#e7672a)}.c-green{background:linear-gradient(135deg,#3fd38a,#159a59)}
.c-sun{background:linear-gradient(135deg,#ffd45c,#f0a800);color:#3a2a00}.c-dark{background:linear-gradient(135deg,#334166,#1b2440)}

.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.3);overflow:hidden}
.bar>i{display:block;height:100%;background:#fff;border-radius:99px}
.card .bar{background:var(--bg2)}.card .bar>i{background:linear-gradient(90deg,var(--ok),var(--teal))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:16px;font-weight:900;background:var(--pri);color:#fff;box-shadow:0 5px 0 var(--pri2);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pri2)}
.btn.sun{background:var(--sun);color:#3a2a00;box-shadow:0 5px 0 #c98a00}
.btn.ok{background:var(--ok);box-shadow:0 5px 0 #138a4e}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--line);border:1px solid var(--line)}
.btn.big{padding:16px 28px;font-size:20px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.unit{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--card);margin-bottom:10px}
.unit .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--bg2);flex:none}
.unit .bd{flex:1;min-width:0}
.unit .bd b{display:block}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:700;font-size:14px}
.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}

/* question overlay */
.qov{position:fixed;inset:0;z-index:100;background:rgba(10,15,35,.62);display:grid;place-items:center;padding:14px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.qbox{width:min(640px,100%);max-height:94vh;overflow:auto;background:var(--card);border-radius:26px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pop .22s cubic-bezier(.2,1.4,.5,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.qhead{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--muted);font-weight:700;font-size:14px}
.qtext{font-size:21px;font-weight:900;margin:4px 0 14px}
.qbox[dir=ltr] .qtext{font-size:20px}
.opts{display:grid;gap:10px}
.opt{width:100%;text-align:start;padding:13px 16px;border-radius:16px;background:var(--bg2);border:2px solid var(--line);font-weight:700;font-size:18px;transition:transform .1s;display:flex;gap:10px;align-items:center}
.opt .k{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);font-size:15px}
.opt:hover{border-color:var(--pri)}
.opt.right{background:#dcfbe9;border-color:var(--ok);color:#0b5a32}
.opt.wrong{background:#ffe3e4;border-color:var(--bad);color:#8a1418;animation:shake .35s}
:root[data-theme="dark"] .opt.right,:root:not([data-theme="light"]) .opt.right{}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fb{margin-top:14px;padding:14px;border-radius:16px;font-weight:700}
.fb.good{background:#e7fff1;color:#0b5a32;border:1px solid #a6ecc6}
.fb.bad{background:#fff1f1;color:#7a1216;border:1px solid #ffc2c4}
.fb .src{display:inline-block;margin-top:6px;font-size:14px;padding:2px 10px;border-radius:99px;background:rgba(0,0,0,.06)}
.pic{font-size:54px;letter-spacing:6px;text-align:center;line-height:1.3;margin:4px 0 10px}

/* game shell */
.game{position:fixed;inset:0;z-index:50;background:#0d1330;touch-action:none;user-select:none;-webkit-user-select:none}
.game canvas{display:block;width:100%;height:100%}
.hud{position:absolute;top:0;inset-inline:0;display:flex;gap:8px;align-items:center;padding:10px 12px;pointer-events:none;color:#fff;font-weight:900}
.hud .pill{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.18);color:#fff;pointer-events:auto}
.hud .sp{flex:1}
.hud .pill{white-space:nowrap}
@media (max-width:480px){.hud{gap:6px;padding:8px}.hud .pill{font-size:13px;padding:4px 9px}.hud>.pill:nth-child(2){display:none}.gbtn{width:38px;height:38px;font-size:18px}}
.gbtn{pointer-events:auto;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;width:42px;height:42px;font-size:20px}
.boostbtn{position:absolute;bottom:26px;inset-inline-start:22px;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd76a,#ff7a1a);color:#3a1500;font-weight:900;font-size:18px;box-shadow:0 6px 0 #a64300;display:grid;place-items:center;pointer-events:auto}
.boostbtn.off{filter:grayscale(1) brightness(.7)}
.toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;padding:8px 18px;border-radius:18px;font-weight:900;pointer-events:none;white-space:normal;max-width:92vw;text-align:center;animation:fade .2s}
.center{position:absolute;inset:0;display:grid;place-items:center;padding:16px}
.panel{background:var(--card);color:var(--ink);border-radius:26px;padding:22px;width:min(560px,100%);max-height:92vh;overflow:auto;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.stars{font-size:40px;letter-spacing:4px}
.review{text-align:start;margin-top:12px;display:grid;gap:8px}
.review .it{padding:10px 12px;border-radius:14px;background:var(--bg2);font-size:15px}

.tabs{display:flex;gap:6px;background:var(--bg2);padding:5px;border-radius:16px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{flex:1;padding:8px 10px;border-radius:12px;font-weight:700;white-space:nowrap}
.tabs button.on{background:var(--card);box-shadow:0 2px 0 var(--line)}
.code{font-family:ui-monospace,Menlo,monospace;direction:ltr;word-break:break-all;background:var(--bg2);padding:10px;border-radius:12px;font-size:13px;max-height:120px;overflow:auto}
textarea,input{font-family:inherit;font-size:16px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.foot{margin-top:30px;text-align:center;color:var(--muted);font-size:14px}
.avatars{display:flex;gap:8px;flex-wrap:wrap}
.avatars button{font-size:30px;width:54px;height:54px;border-radius:16px;background:var(--bg2);border:2px solid transparent}
.avatars button.on{border-color:var(--pri);background:var(--card)}
.badge{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--bad);color:#fff;font-size:13px;font-weight:900}
.hide{display:none!important}

/* ---------- اشرحلي ---------- */
.lhead{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px}
.lprog{height:8px;border-radius:9px;background:var(--bg2);overflow:hidden}.lprog i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--orange));transition:width .3s}
.chat{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.chat>*{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}.chat>.in{opacity:1;transform:none}
.msg{display:flex;gap:10px;align-items:flex-end;max-width:min(680px,96%)}
.msg .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:28px;flex:none;background:var(--card);border:2px solid var(--line)}
.msg .bb{position:relative;padding:10px 14px;border-radius:20px;font-size:18px;line-height:1.75;box-shadow:var(--shadow)}
.msg .bb>b{display:block;font-size:13px;opacity:.75}
.msg.st{align-self:flex-start}.msg.st .bb{background:#ffe9f3;color:#4a1430;border-bottom-right-radius:6px}
.msg.te{align-self:flex-end;flex-direction:row-reverse}.msg.te .bb{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;padding-inline-end:44px}
.msg .say{position:absolute;inset-inline-end:8px;top:8px;width:30px;height:30px;border-radius:50%;background:var(--bg2);font-size:15px}
.box{border-radius:18px;padding:12px 16px;font-size:18px;line-height:1.8;max-width:680px;width:100%;align-self:center}
.box>b{display:block;font-size:14px;margin-bottom:2px}
.box.ex{background:#e8f0ff;color:#13235c;border:2px dashed #9db5ff}
.box.rule{background:#fff6d6;color:#4a3500;border:2px solid #ffd76a}
.box.fun{background:#e6fbf3;color:#0b4a33;border:2px solid #8ee4bf}
.box.pic2{text-align:center;font-size:44px;line-height:1.3;background:transparent}
.box.ck{background:var(--card);border:2px solid var(--violet);box-shadow:var(--shadow)}
.box.ck .ckopts{display:grid;gap:8px}.box.ck .opt{font-size:17px}
.lnext{position:sticky;bottom:12px;display:flex;justify-content:center;margin:14px 0;z-index:5}
.btn.off{filter:grayscale(.8);opacity:.6}
.lend .card{margin-top:16px}
.sum ol{margin:0;padding-inline-start:22px;font-size:18px;line-height:1.9}
.done{text-align:center}
.mm{display:flex;flex-direction:column;align-items:center;gap:14px}
.mmc{padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,var(--pri),var(--violet));color:#fff;font-weight:900;font-size:20px;box-shadow:0 4px 0 var(--pri2);text-align:center}
.mmb{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;width:100%;position:relative}
.mmn{border-radius:16px;padding:10px 12px;color:#fff;display:flex;flex-direction:column;gap:6px}
.mmn>b{font-size:17px}.mmn span{background:rgba(255,255,255,.22);border-radius:10px;padding:3px 8px;font-size:15px;font-weight:700}
.lessons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.lbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:12px;background:var(--bg2);font-weight:700;font-size:15px;border:1px solid var(--line)}
.lbtn.done{background:#e6fbf3;color:#0b4a33;border-color:#8ee4bf}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .msg.st .bb{background:#4a1d33;color:#ffe3f0}:root:not([data-theme="light"]) .box.ex{background:#1b2a5c;color:#dbe5ff}:root:not([data-theme="light"]) .box.rule{background:#4a3a0a;color:#fff1c2}:root:not([data-theme="light"]) .box.fun,:root:not([data-theme="light"]) .lbtn.done{background:#0f3f2e;color:#c9f5e2}}
:root[data-theme="dark"] .msg.st .bb{background:#4a1d33;color:#ffe3f0}:root[data-theme="dark"] .box.ex{background:#1b2a5c;color:#dbe5ff}:root[data-theme="dark"] .box.rule{background:#4a3a0a;color:#fff1c2}:root[data-theme="dark"] .box.fun,:root[data-theme="dark"] .lbtn.done{background:#0f3f2e;color:#c9f5e2}