/* ساحة الرياضيات — طبقة الحركة والجرافيكس الحديث
   قاعدة الموشن: عنصر واحد يقود الحركة والباقي يهدأ. وكل شي يتوقف مع prefers-reduced-motion. */

/* ---------- الأيقونات المرسومة (بدل الإيموجي) ---------- */
.ico{display:block;width:1em;height:1em;overflow:visible}
.door .ico{width:min(11vh,88px);height:min(11vh,88px);filter:drop-shadow(0 10px 14px rgba(27,19,64,.22))}
.tile .ico{width:min(9vh,74px);height:min(9vh,74px);flex:none;filter:drop-shadow(0 8px 10px rgba(27,19,64,.2))}
@media(min-width:1100px){.tiles.c4 .tile .ico,.tiles.c3 .tile .ico{width:min(11vh,88px);height:min(11vh,88px)}}
.b .ico,.lchip .ico{width:1.35em;height:1.35em;flex:none}
.gi .ico{width:100%;height:100%}

/* ---------- الهيرو: رموز رياضية تطفو ---------- */
.hero{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.home{gap:min(16px,1.7vh)!important}
.hero-art{position:absolute;inset:-6% -2%;pointer-events:none;z-index:0}
.hero-art .sym{position:absolute;left:var(--x);top:var(--y);font-family:'Changa','Alexandria',sans-serif;font-weight:900;
  font-size:calc(var(--s) * min(9vh,74px));line-height:1;color:var(--c);
  text-shadow:0 .09em 0 var(--d);opacity:.9;
  transform:translate(-50%,-50%) translate(var(--px,0),var(--py,0));
  animation:float 6s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s);will-change:transform}
.hero-art .sym.s1{animation-duration:7.5s}.hero-art .sym.s2{animation-duration:5.4s}.hero-art .sym.s3{animation-duration:8.2s}
@keyframes float{0%,100%{margin-top:0;rotate:-4deg}50%{margin-top:-14px;rotate:4deg}}
.home h1{position:relative;z-index:1}
.home .tag-line{position:relative;z-index:1;font-weight:800;font-size:clamp(14px,1.5vw,19px);color:var(--muted);letter-spacing:.06em;margin:0}

/* ---------- دخول العناصر بالتتابع ---------- */
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
#main.in .door,#main.in .tile,#main.in .badge,#main.in .card,#main.in .stage{animation:rise .5s cubic-bezier(.2,.9,.3,1.2) backwards}
#main.in .door:nth-child(1){animation-delay:.05s}#main.in .door:nth-child(2){animation-delay:.13s}#main.in .door:nth-child(3){animation-delay:.21s}
#main.in .tile:nth-child(1){animation-delay:.04s}#main.in .tile:nth-child(2){animation-delay:.09s}#main.in .tile:nth-child(3){animation-delay:.14s}#main.in .tile:nth-child(4){animation-delay:.19s}
#main.in .tile:nth-child(5){animation-delay:.24s}#main.in .tile:nth-child(6){animation-delay:.29s}#main.in .tile:nth-child(7){animation-delay:.34s}#main.in .tile:nth-child(8){animation-delay:.39s}
#main.in h1{animation:rise .45s cubic-bezier(.2,.9,.3,1.2) backwards}
#main.in .hud,#main.in .foot{animation:pop .45s ease backwards;animation-delay:.3s}

/* ---------- ميلان البطاقة مع المؤشر ---------- */
.door,.tile{transform-style:preserve-3d;will-change:transform}
.door:hover,.tile:hover{transform:translateY(-6px) rotateX(3deg) rotateY(-3deg)}
.door .ico,.tile .ico{transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.door:hover .ico{transform:translateY(-6px) scale(1.08) rotate(-4deg)}
.tile:hover .ico{transform:translateY(-4px) scale(1.1) rotate(4deg)}

/* ---------- خريطة المسار ---------- */
.mapwrap{width:100%;max-width:1250px;height:min(62vh,600px);margin:0 auto;padding:2px 0}
.pathmap{display:block;width:100%;height:100%}
@media(max-width:940px){.mapwrap{height:auto;max-width:640px;padding-bottom:10px}.pathmap{height:auto;width:100%}}
.pathmap .road-done{stroke-dasharray:var(--len,3000);stroke-dashoffset:calc(var(--len,3000) * (1 - var(--p,0)));
  animation:road 1.1s cubic-bezier(.4,0,.2,1) backwards;filter:drop-shadow(0 0 10px #FFB70366)}
@keyframes road{from{stroke-dashoffset:var(--len,3000)}}
.pathmap .node{cursor:pointer;animation:pop .45s cubic-bezier(.2,.9,.3,1.4) backwards;animation-delay:calc(var(--i) * .045s + .25s);transition:transform .15s}
.pathmap .node:hover{transform:translate(var(--tx),var(--ty))}
.pathmap .node.lock{cursor:default}
.pathmap .node .halo{animation:halo 2.6s ease-in-out infinite}
@keyframes halo{0%,100%{r:44;opacity:.16}50%{r:52;opacity:.26}}
.pathmap .node.cur .halo{animation-duration:1.4s}
.pathmap .node.cur>circle:last-of-type{stroke:#FFE066;stroke-width:6}

/* ---------- الإرشادات التعريفية ---------- */
.tour{position:fixed;inset:0;z-index:600;background:rgba(27,19,64,.55);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.tourcard{background:#fff;border-radius:40px;box-shadow:0 20px 0 var(--cardsh),0 40px 70px rgba(27,19,64,.3);width:min(720px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;animation:tourin .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes tourin{from{opacity:0;transform:translateY(40px) scale(.94)}}
.tourcard .scene{position:relative;height:min(230px,30vh);flex:none;display:grid;place-items:center;background:linear-gradient(160deg,var(--sc1,#FFF1CC),var(--sc2,#E6F7F5));overflow:hidden}
.tourcard .scene .gi{width:min(150px,26vh);height:min(150px,26vh);animation:bobIn .7s cubic-bezier(.2,.9,.3,1.4),bob 3s ease-in-out .7s infinite;filter:drop-shadow(0 14px 18px rgba(27,19,64,.2))}
@keyframes bobIn{from{opacity:0;transform:translateY(30px) scale(.7)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.tourcard .scene .puff{position:absolute;border-radius:50%;background:#fff;opacity:.5;animation:puff 9s linear infinite}
@keyframes puff{from{transform:translateY(20px) scale(.9)}to{transform:translateY(-240px) scale(1.25);opacity:0}}
.tourcard .body{padding:26px 34px 22px;text-align:center;overflow:auto}
.tourcard h2{font-size:clamp(25px,3.2vw,36px);line-height:1.4;margin-bottom:10px}
.tourcard h2 em{font-style:normal;color:var(--coral);background:var(--yellow);padding:0 .22em;border-radius:.24em;box-shadow:0 .09em 0 var(--yellow-d);display:inline-block}
.tourcard p b{color:var(--ink)}
.tourcard p{color:var(--muted);font-weight:800;font-size:clamp(16px,1.9vw,21px);line-height:1.75;max-width:46ch;margin:0 auto}
.tourcard .steps{display:flex;gap:8px;justify-content:center;margin:18px 0 4px}
.tourcard .steps i{width:12px;height:12px;border-radius:50%;background:var(--cardsh);transition:all .3s}
.tourcard .steps i.on{width:34px;border-radius:7px;background:var(--grape)}
.tourcard .nav{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:0 26px 26px;flex-wrap:wrap}
@media(max-width:600px){.tourcard{border-radius:30px}.tourcard .body{padding:20px 20px 16px}.tourcard .nav{padding:0 18px 20px}.tourcard .nav .b{flex:1 1 40%}}

/* ---------- لمسات حديثة على الأسطح ---------- */
body{background:radial-gradient(120% 90% at 80% -10%,#FFF6DF 0%,transparent 55%),radial-gradient(110% 80% at -10% 110%,#EAF7FF 0%,transparent 55%),var(--bg)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:radial-gradient(#8E6BFF22 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(90% 70% at 50% 40%,#000 30%,transparent 100%)}
main{position:relative;z-index:1}
.door{background:linear-gradient(165deg,color-mix(in srgb,var(--c) 88%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 88%,#000) 100%)}
.tile{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 90%,#fff) 0%,var(--c) 60%)}
.qcard{background:linear-gradient(180deg,#fff 70%,#FDFBFF 100%)}

/* ---------- احترام تفضيل تقليل الحركة ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero-art .sym{animation:none}
  .door:hover,.tile:hover{transform:translateY(-4px)}
}

/* ---------- بطاقة شرح الإجابة ---------- */
.explain{display:flex;flex-direction:column;gap:0;background:#fff;border-radius:22px;padding:min(10px,1.1vh) 24px;
  box-shadow:0 8px 0 var(--cardsh);border-right:10px solid var(--coral);text-align:right;
  animation:rise .35s cubic-bezier(.2,.9,.3,1.2) backwards;max-width:1500px;margin:0 auto;width:100%}
.explain.ok{border-right-color:var(--lime)}
.explain b{font-size:clamp(16px,1.8vw,22px);font-weight:900;line-height:1.45;color:var(--ink)}
.explain.ok b{color:#3E7C24}.explain.no b{color:var(--coral-d)}
.explain span{font-size:clamp(14px,1.55vw,19px);font-weight:800;color:var(--muted);line-height:1.55}
/* لما يظهر الشرح نصغّر الخيارات ليبقى كل شي في شاشة وحدة */
.explain+.qopts .opt{min-height:7vh;font-size:min(3.6vw,5.2vh);padding:4px 22px}
.explain+.qopts .opt.txt{font-size:min(2.2vw,3.6vh)}
.qs.tight .explain+.qopts .opt{min-height:6vh}
.qs.explaining .qcard .q .fig{max-height:24vh}.qs.explaining .qcard .q .fig.sq{max-height:25vh}
.qs.explaining .qcard{padding:min(12px,1.4vh) 26px}
@media(max-width:600px){.explain{padding:10px 16px;border-radius:20px;border-right-width:7px}}

/* ---------- مراجعة الأخطاء في شاشة النتيجة ---------- */
.revbox{width:min(760px,94vw);margin:22px auto 0;background:#fff;border-radius:32px;box-shadow:0 12px 0 var(--cardsh);padding:22px 26px;text-align:right}
.revbox h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:14px;text-align:center}
.revbox.all-ok{text-align:center;padding:18px;font-size:clamp(18px,2.2vw,24px);color:#3E7C24}
.rev{background:var(--bg);border-radius:22px;padding:14px 18px;margin-bottom:12px;line-height:1.7}
.rev .rq{font-weight:900;font-size:clamp(16px,1.9vw,21px);margin-bottom:6px}
.rev .ra{display:flex;gap:14px;flex-wrap:wrap;font-weight:800;font-size:clamp(14px,1.6vw,18px);margin-bottom:4px}
.rev .ra .good{color:#3E7C24}.rev .ra .bad{color:var(--coral-d);text-decoration:line-through}
.rev .rw{color:var(--muted);font-weight:800;font-size:clamp(14px,1.6vw,18px)}
.rev .rl{margin-top:6px;font-size:13px;font-weight:800;color:var(--grape)}

/* ---------- شاشة القوة والضعف ---------- */
.mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:min(16px,1.6vh);margin-top:6px}
.ms{background:var(--c);color:#fff;border-radius:24px;box-shadow:0 8px 0 var(--d);padding:min(11px,1.3vh) 10px;text-align:center}
.ms b{display:block;font:900 clamp(26px,3.4vw,40px)/1.1 var(--num)}
.ms span{font-weight:900;font-size:clamp(13px,1.4vw,17px)}
.ms:nth-child(4){color:var(--muted)}
.mgrade{margin-top:14px}
.mgrade h3{font-size:clamp(17px,1.9vw,22px);color:var(--muted);margin-bottom:10px}
.mlist{display:flex;flex-wrap:wrap;gap:9px}
.mpill{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:16px;background:#fff;box-shadow:0 5px 0 var(--cardsh);font-weight:800;line-height:1.5;font-size:clamp(14px,1.5vw,17px);color:var(--ink)}
.mpill span{font-family:var(--num);font-weight:900;font-size:.9em;opacity:.85}
.mpill.strong{background:var(--lime);box-shadow:0 5px 0 var(--lime-d)}
.mpill.ok{background:var(--sun);box-shadow:0 5px 0 var(--sun-d)}
.mpill.weak{background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-d)}
.mpill:active{transform:translateY(4px);box-shadow:0 1px 0 var(--cardsh)}
@media(max-width:600px){.mstats{grid-template-columns:repeat(2,1fr)}}

/* فوتر الرئيسية: صف واحد مهما كثرت الأزرار */
.home .foot .b.sm{padding:8px 15px;font-size:16px}
.home .foot .b.sm.ic{width:42px;height:42px;padding:0;font-size:20px}
@media(max-width:900px){.home .foot .b.sm{padding:7px 12px;font-size:14px}}