*{box-sizing:border-box}html{font-family:Tahoma,Arial,sans-serif}body{margin:0;background:#eef3f7;color:#18212d;min-height:100vh;overflow-x:hidden}.cosmos{position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,#dceaf4,#f5eee4 58%,#e8ddd0)}.cosmos:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 18%,#fff 0 2px,transparent 3px),radial-gradient(circle at 76% 13%,#fff 0 2px,transparent 3px);background-size:170px 170px,220px 220px;opacity:.8}.cosmos i{position:absolute;left:48%;top:-10%;width:5px;height:115%;background:#fff;box-shadow:0 0 14px #fff,0 0 35px #78a9d4;transform:rotate(9deg)}.cosmos i:after,.cosmos i:before{content:"";position:absolute;width:4px;height:180px;background:#fff;box-shadow:0 0 18px #88b8df;transform-origin:top}.cosmos i:after{top:28%;left:0;transform:rotate(42deg)}.cosmos i:before{top:55%;left:0;transform:rotate(-38deg)}.cosmos b{position:absolute;width:170px;height:170px;border-radius:50%;right:5%;top:13%;background:radial-gradient(circle at 35% 30%,#fff,#7aa7ca 20%,#31536e 65%,#182735);opacity:.18}.cosmos em{position:absolute;left:4%;bottom:5%;width:280px;height:85px;border-radius:50%;border:7px solid rgba(68,118,150,.12);transform:rotate(-8deg)}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:rgba(255,255,255,.9);border-bottom:1px solid #c8d5df;position:sticky;top:0;z-index:20}.brand{font-weight:900;font-size:20px}.hud{background:#fff3d3;border:1px solid #d6b65c;padding:8px 14px;border-radius:20px}.progress{height:5px;background:#d6e0e7;position:sticky;top:64px;z-index:20}.progress span{display:block;height:100%;width:0;background:#c79727;transition:.4s}main{width:min(1120px,94%);margin:24px auto 100px}.screen{display:none}.screen.active{display:block;animation:fade .4s}.panel{background:rgba(255,255,255,.95);border:1px solid #cbd7df;border-radius:25px;padding:26px;box-shadow:0 16px 45px rgba(30,55,75,.12)}.hero{text-align:center;padding:48px 8%}.tag{display:inline-block;background:#fff0c5;color:#755516;padding:7px 14px;border-radius:20px;font-weight:800}h1{font-size:42px;margin:15px}h2{font-size:30px;margin:14px 0}.lead,.instruction,.explain,.note{font-size:20px;line-height:1.9}.mission,.explain{padding:16px;border-radius:16px;background:#edf6fb;border:1px solid #b9d4e4}.mapwrap{position:relative;margin:18px auto;width:min(100%,980px)}.mapwrap img{width:100%;display:block;border-radius:16px}.node{position:absolute;width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:#d3a52d;color:#fff;font-size:22px;font-weight:900;box-shadow:0 0 0 5px rgba(211,165,45,.28),0 0 25px #f6cf5c;cursor:pointer}.node.locked{opacity:.38;box-shadow:none;pointer-events:none}.activeNode{animation:pulse 1.2s infinite}.lessons{display:grid;gap:11px}.lessons div{padding:14px 18px;background:#fffaf0;border-right:5px solid #d0a132;border-radius:12px;font-size:20px;animation:float 3s ease-in-out infinite}.reactor{display:grid;grid-template-columns:220px 1fr;gap:25px;align-items:center}.orb{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;margin:auto;font-size:80px;background:radial-gradient(circle,#fff,#d8edf7 35%,#6f9ab6);box-shadow:0 0 35px #8ab7d4;transition:.4s}.caseq{font-size:24px;font-weight:900;margin:15px 0}.opts{display:flex;flex-wrap:wrap;gap:10px}.choice,.card,.chip,.check{border:1px solid #b8c8d2;background:#fff;color:#18212d;border-radius:13px;padding:12px 16px;font-size:19px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(20,50,70,.08)}.choice:hover,.card:hover,.chip:hover{transform:translateY(-2px);border-color:#c79727}.counter{font-weight:900;color:#76591e}.compactPool{display:flex;flex-wrap:wrap;gap:8px}.compactPool .card{font-size:17px;padding:9px 11px}.orderLine{margin-top:16px;padding:15px;background:#f4f8fa;border:1px dashed #9fb5c2;border-radius:14px;line-height:2.2;font-size:18px}.qbox{margin:13px 0;padding:16px;background:#f8fafb;border:1px solid #d1dce3;border-radius:16px}.qtitle{font-size:20px;font-weight:900;line-height:1.8}.classify{display:grid;grid-template-columns:1fr 1fr;gap:15px}.bucket{min-height:180px;padding:14px;border:2px dashed #b8c6cf;border-radius:18px;background:#f9fbfc}.bucket h3{text-align:center}.bank{display:flex;flex-wrap:wrap;gap:9px;padding:14px;background:#f7f1e4;border-radius:15px;margin-bottom:15px}.chip.selected{outline:3px solid #d0a12c;background:#fff1bf}.verseflow{font-size:21px;line-height:2.6;background:#fff;border:1px solid #d2dce2;padding:18px;border-radius:16px}.blank{display:inline-block;min-width:110px;padding:1px 8px;margin:0 4px;background:#fff2cc;border-bottom:3px dashed #bd8724;color:#80560e;font-weight:900}.blank.ok{background:#e8f6e9;color:#24653b;border-bottom-color:#4d9964}#toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:#203341;color:#fff;padding:12px 18px;border-radius:15px;opacity:0;pointer-events:none;z-index:50;transition:.25s}#toast.show{opacity:1}nav{position:fixed;bottom:0;left:0;right:0;height:66px;background:rgba(255,255,255,.96);border-top:1px solid #cbd7df;display:flex;align-items:center;justify-content:space-between;padding:0 4%;z-index:30}nav button,.check{background:#345d77;color:#fff;border:0;border-radius:13px;padding:12px 20px;font-weight:900;font-size:17px;cursor:pointer}.finale{text-align:center;padding:50px}.finalorb{font-size:55px}.result{font-size:24px;margin:20px}.good{background:#e7f6eb!important;border-color:#5c9c6d!important}.bad{animation:shake .25s}@keyframes pulse{50%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(211,165,45,.15),0 0 35px #ffd76c}}@keyframes fade{from{opacity:0;transform:translateY(10px)}}@keyframes float{50%{transform:translateX(-3px)}}@keyframes shake{25%{transform:translateX(5px)}75%{transform:translateX(-5px)}}@media(max-width:700px){.reactor{grid-template-columns:1fr}.orb{width:120px;height:120px}.classify{grid-template-columns:1fr}.panel{padding:16px}h1{font-size:32px}h2{font-size:25px}.lead,.instruction,.explain{font-size:18px}.node{width:40px;height:40px}}
.dragPool{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:15px}.dragcard{background:#fffdf8;color:#1f2933;border:2px solid #b8c8d2;border-radius:14px;padding:13px 15px;font-size:18px;font-weight:800;line-height:1.65;cursor:grab;box-shadow:0 5px 13px rgba(29,55,75,.09);user-select:none;transition:.2s}.dragcard:hover{transform:translateY(-2px);border-color:#c79727}.dragcard.dragging{opacity:.45;transform:scale(.98)}.dragcard.selected{outline:3px solid #d1a230;background:#fff4cc}.dragcard.good{cursor:default;margin:8px 0}.bucket{min-height:230px!important;background:#fbfdfe!important;border:2px dashed #9fb6c4!important;transition:.2s}.bucket.over{border-color:#c79727!important;background:#fff9e9!important;box-shadow:0 0 0 4px rgba(199,151,39,.08)}.bucket h3{font-size:24px;margin-top:0}.dropHint{font-size:15px;color:#7c8b95;text-align:center;margin:4px 0 12px}

/* مراجعة الهاتف — الانفطار */
body{overflow-y:auto!important;-webkit-overflow-scrolling:touch}
.screen.active{overflow:visible!important;touch-action:pan-y}
main{padding-bottom:92px}
.primary{margin-top:14px}

#classify{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  align-items:start!important;
}
#classify .dragPool{
  grid-column:1/-1!important;
  grid-row:1!important;
  order:-1!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  margin:0 0 10px!important;
}
#classify .bucket{
  grid-row:2!important;
  min-height:155px!important;
  padding:9px!important;
}
#classify .dragcard{
  font-size:clamp(11px,3vw,14px)!important;
  line-height:1.4!important;
  padding:8px 6px!important;
  min-width:0!important;
}
#classify .bucket h3{font-size:clamp(16px,4vw,20px)!important}
#classify .dropHint{font-size:12px!important}
@media(max-width:650px){
  .panel{padding:18px 14px!important}
  .hero{padding:24px 2%!important}
  .lead,.instruction,.explain,.note{font-size:clamp(15px,4.2vw,18px)!important}
  .mapwrap{margin-bottom:12px!important}
  #classify .dragPool{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #classify .bucket{min-height:145px!important}
}