*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;color:#17212b;background:#eaf1f4;min-height:100vh}.cosmos{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 75% 15%,rgba(255,210,112,.8),transparent 18%),radial-gradient(circle at 18% 28%,rgba(92,120,150,.38),transparent 26%),linear-gradient(145deg,#e9edf0 0%,#c9d7df 42%,#f3d7b0 72%,#d98d69 100%)}.cosmos:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 46%,rgba(255,255,255,.9) 49%,rgba(96,111,126,.35) 50%,transparent 53%);opacity:.55}header{display:flex;justify-content:space-between;align-items:center;padding:15px 5%;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid #bbc9d1;position:sticky;top:0;z-index:5}.hud{display:flex;gap:14px}.hud span{background:#fff;padding:8px 13px;border-radius:20px;border:1px solid #d1b36a}.progress{height:6px;background:#dce3e7}.progress i{display:block;height:100%;width:9%;background:linear-gradient(90deg,#d4a934,#f0cc68);transition:.35s}main{width:min(1120px,94%);margin:25px auto 100px}.page{display:none;background:rgba(255,255,255,.94);border:1px solid rgba(130,150,160,.35);border-radius:24px;padding:28px;box-shadow:0 15px 45px rgba(42,54,65,.14)}.page.active{display:block;animation:in .35s ease}@keyframes in{from{opacity:.2;transform:translateY(8px)}}h1{font-size:44px;margin:12px 0}h2{font-size:30px;margin:5px 0 14px}.hero{text-align:center;max-width:800px;margin:auto;font-size:21px;line-height:1.9}.tag{display:inline-block;background:#263746;color:#fff2c5;border-radius:20px;padding:7px 14px;font-weight:bold}.warning{background:#fff7df;border-right:5px solid #d3a633;padding:13px;border-radius:12px;margin:20px 0}.instruction{font-size:20px;line-height:1.7}.primary,nav button,.choice{border:0;border-radius:14px;padding:12px 20px;font-size:18px;font-weight:bold;cursor:pointer}.primary{background:#263746;color:white}.mapwrap{position:relative;max-width:900px;margin:auto}.mapwrap img{width:100%;display:block;border-radius:15px}.node{position:absolute;width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:#d3a633;color:#fff;font-size:20px;font-weight:bold;box-shadow:0 0 0 5px rgba(211,166,51,.25),0 0 24px #e5b83f}.activeNode{animation:pulse 1.2s infinite}@keyframes pulse{50%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(211,166,51,.12),0 0 35px #e5b83f}}.n1{right:14%;top:28%}.n2{left:21%;top:28%}.n3{left:30%;bottom:19%}.n4{right:31%;bottom:17%}.explain{margin:18px auto 0;max-width:900px;background:#f8f3e6;border:1px solid #dbc77e;padding:16px;border-radius:14px;font-size:20px;line-height:1.8}.lessons{display:grid;gap:12px}.lessons div{background:linear-gradient(90deg,#fff9e8,#fff);border-right:5px solid #d3a633;padding:14px 18px;border-radius:12px;font-size:20px;animation:lesson 3s ease-in-out infinite alternate}.lessons div:nth-child(even){animation-delay:.8s}@keyframes lesson{to{transform:translateX(-5px)}}.scenePool,.sceneTrack{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:15px;border-radius:16px}.scenePool{background:#edf2f4}.sceneTrack{min-height:120px;background:#fff8e6;border:2px dashed #c6a248;margin-top:14px}.scene{width:120px;background:#fff;border:2px solid #c7d1d7;border-radius:14px;padding:7px;cursor:pointer}.scene img{width:100%;height:90px;object-fit:contain}.scene.done{border-color:#d0a52e;background:#fff5cf;cursor:default}.msg{min-height:28px;text-align:center;font-weight:bold;margin:10px}.qbox{background:#f7fafb;border:1px solid #cdd8de;border-radius:16px;padding:16px;margin:12px 0}.qbox h3{font-size:20px;line-height:1.6}.choices,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.choice,.card{background:#fff;color:#22313d;border:2px solid #c7d2d9;padding:12px;border-radius:13px;cursor:pointer;font-size:18px;line-height:1.5}.choice:hover,.card:hover{border-color:#c79b28}.good{background:#e8f6e8!important;border-color:#4d9a59!important}.bad{animation:shake .25s}@keyframes shake{50%{transform:translateX(8px)}}.selected{background:#fff1bd!important;border-color:#c89618!important}.fillrow{background:#f7fafb;border-radius:14px;padding:14px;margin:10px 0;font-size:20px;line-height:2}.blank{display:inline-block;min-width:120px;border-bottom:3px dashed #b08a27;text-align:center;color:#9a751a}.special{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,235,215,.96))}.gate{border:2px solid #9eacb5;border-radius:18px;padding:16px;margin:13px 0}.gate.open{border-color:#c89a22;background:#fff8df}.core{text-align:center;margin:22px auto;padding:20px;border-radius:50px;max-width:520px;background:#263746;color:#fff2bd;font-size:27px;font-weight:bold;opacity:.25;transition:.5s}.core.on{opacity:1;box-shadow:0 0 35px rgba(213,170,48,.55)}nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 5%;background:rgba(255,255,255,.94);border-top:1px solid #bdc9d0;z-index:6}nav button{background:#263746;color:#fff;min-width:120px}nav button:disabled{opacity:.35}#toast{position:fixed;bottom:78px;left:50%;transform:translateX(-50%);background:#263746;color:white;padding:10px 18px;border-radius:20px;opacity:0;pointer-events:none;transition:.25s;z-index:9}#toast.show{opacity:1}.finalScore{font-size:28px;margin:20px}@media(max-width:650px){.page{padding:17px}h1{font-size:34px}h2{font-size:25px}.instruction,.explain{font-size:18px}.scene{width:92px}.scene img{height:70px}.node{width:38px;height:38px}.n1{right:10%}.n2{left:16%}}.bg{position:fixed;inset:0;z-index:-3;background:linear-gradient(145deg,#f6efe0,#dbe9d1 48%,#f2d7a0)}.bg:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 20%,rgba(82,145,73,.22),transparent 22%),radial-gradient(circle at 88% 78%,rgba(226,170,66,.25),transparent 24%)}.focus{background:#f4f0ff;border:2px solid #9c7bd3;border-radius:16px;padding:16px;margin:18px 0;line-height:1.8}.track{min-height:90px;background:#fff8df;border:2px dashed #c99b2e;border-radius:15px;padding:12px;margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.drop{min-height:170px;border:2px dashed #b69339;border-radius:18px;padding:14px;background:#fffaf0}.trait{cursor:grab}.scale{text-align:center;font-size:65px;margin:12px}.scale #lights{font-size:30px;color:#d19d1f;letter-spacing:8px}.courtcase{border:1px solid #d8c28a;background:#fffdf7;border-radius:18px;padding:16px;margin:14px 0}.core{opacity:.25}.core.on{opacity:1}.mapwrap img{background:#fff}.n1{right:19%;top:18%}.n2{right:18%;bottom:18%}.n3{left:22%;bottom:17%}.n4{left:20%;top:20%}@media(max-width:650px){.compare{grid-template-columns:1fr}.n1{right:14%;top:15%}.n2{right:12%;bottom:15%}.n3{left:15%;bottom:14%}.n4{left:14%;top:18%}}

/* مواضع الدوائر الذهبية في خريطة سورة عبس */
.mapwrap .n1{right:19%!important;top:18%!important;left:auto!important;bottom:auto!important}
.mapwrap .n2{right:18%!important;top:43%!important;left:auto!important;bottom:auto!important}
.mapwrap .n3{left:22%!important;top:19%!important;right:auto!important;bottom:auto!important}
.mapwrap .n4{left:22%!important;bottom:17%!important;right:auto!important;top:auto!important}
@media(max-width:650px){
  .mapwrap .n1{right:14%!important;top:15%!important}
  .mapwrap .n2{right:12%!important;top:42%!important}
  .mapwrap .n3{left:15%!important;top:17%!important}
  .mapwrap .n4{left:15%!important;bottom:14%!important;top:auto!important}
}

/* مجلس ميزان القلوب - ميزان متحرك */
.scaleMachine{
  position:relative;
  width:min(620px,92%);
  height:270px;
  margin:18px auto 28px;
}
.scaleStand{
  position:absolute;
  left:50%; bottom:42px;
  width:14px; height:150px;
  transform:translateX(-50%);
  background:linear-gradient(#866421,#c99d35);
  border-radius:8px;
}
.scaleStand::after{
  content:"";
  position:absolute;
  left:50%; bottom:-14px;
  width:130px; height:18px;
  transform:translateX(-50%);
  background:#9a7428;
  border-radius:50%;
}
.scaleBeam{
  position:absolute;
  left:50%; top:74px;
  width:78%; height:10px;
  transform:translateX(-50%) rotate(0deg);
  transform-origin:center;
  background:linear-gradient(90deg,#8b6924,#d0a43a,#8b6924);
  border-radius:8px;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.scaleBeam::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:24px; height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#d6aa3a;
  border:4px solid #fff4c8;
  box-shadow:0 0 0 2px #8a6827;
}
.pan{
  position:absolute;
  top:18px;
  width:150px; height:78px;
  border:3px solid #9a7428;
  border-top:0;
  border-radius:0 0 80px 80px;
  background:rgba(255,249,225,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#4b3918;
  font-size:15px;
  font-weight:900;
  text-align:center;
  padding:8px;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.pan::before,.pan::after{
  content:"";
  position:absolute;
  top:-45px;
  width:2px; height:48px;
  background:#9a7428;
}
.pan::before{left:22px;transform:rotate(22deg);transform-origin:bottom}
.pan::after{right:22px;transform:rotate(-22deg);transform-origin:bottom}
.panSeeker{left:-25px}
.panStatus{right:-25px}
.scaleBeam[data-level="1"] .panSeeker{transform:translateY(5px)}
.scaleBeam[data-level="1"] .panStatus{transform:translateY(-5px)}
.scaleBeam[data-level="2"] .panSeeker{transform:translateY(10px)}
.scaleBeam[data-level="2"] .panStatus{transform:translateY(-10px)}
.scaleBeam[data-level="3"] .panSeeker{transform:translateY(15px)}
.scaleBeam[data-level="3"] .panStatus{transform:translateY(-15px)}
.scaleBeam[data-level="4"] .panSeeker{transform:translateY(20px)}
.scaleBeam[data-level="4"] .panStatus{transform:translateY(-20px)}
.scaleLights{
  position:absolute;
  left:0; right:0; bottom:0;
  text-align:center;
  font-size:30px;
  color:#d19d1f;
  letter-spacing:8px;
}
@media(max-width:650px){
  .scaleMachine{height:245px}
  .scaleBeam{width:72%}
  .pan{width:112px;font-size:12px}
}

.scaleBeam{transform:translateX(-50%) rotate(0deg)!important;transition:transform .72s cubic-bezier(.22,.85,.25,1)!important;will-change:transform}
.scaleBeam.settle{animation:scaleSettle .72s ease-out}
@keyframes scaleSettle{0%{filter:brightness(1)}45%{filter:brightness(1.18)}100%{filter:brightness(1)}}

/* مراجعة الهاتف — عبس */
body{overflow-y:auto!important;-webkit-overflow-scrolling:touch}
.page.active{overflow:visible!important;touch-action:pan-y}
main{padding-bottom:95px}

.fixStep{margin-top:10px}
.fixTitle{font-weight:800;color:#805f17;margin:8px 0}
.trait.selected{outline:3px solid #d1a230!important;background:#fff4cc!important}

@media(max-width:650px){
  .page{padding:17px 12px!important}
  .compare{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .drop{
    min-height:145px!important;
    padding:8px!important;
  }
  .drop h3{
    font-size:clamp(14px,3.8vw,17px)!important;
    margin:3px 0 8px!important;
  }
  #traits{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin-top:8px!important;
  }
  #traits .trait{
    font-size:clamp(11px,3.2vw,14px)!important;
    line-height:1.35!important;
    padding:8px 5px!important;
  }

  .behaviorBox h3{
    font-size:clamp(14px,3.8vw,17px)!important;
    line-height:1.5!important;
  }
  .behaviorBox .choice{
    font-size:clamp(11px,3.1vw,14px)!important;
    padding:8px 6px!important;
  }

  .special .instruction{
    font-size:clamp(14px,3.8vw,17px)!important;
    line-height:1.55!important;
    margin-bottom:8px!important;
  }
  .scaleMachine{
    width:min(520px,88%)!important;
    height:185px!important;
    margin:6px auto 8px!important;
  }
  .scaleStand{
    height:105px!important;
    bottom:30px!important;
  }
  .scaleBeam{
    top:50px!important;
    width:74%!important;
  }
  .pan{
    width:112px!important;
    height:60px!important;
    top:14px!important;
    font-size:clamp(10px,3vw,13px)!important;
  }
  .scaleLights{
    bottom:0!important;
    font-size:18px!important;
    letter-spacing:4px!important;
  }
  .courtcase{
    padding:10px!important;
    margin:8px 0!important;
  }
  .courtcase h3{
    font-size:clamp(14px,3.8vw,17px)!important;
    line-height:1.5!important;
    margin:5px 0!important;
  }
  .courtcase .choice{
    font-size:clamp(11px,3.1vw,14px)!important;
    padding:8px 6px!important;
  }
}