*{box-sizing:border-box}body{margin:0;font-family:Tahoma,"Arial",sans-serif;background:#f5efe7;color:#20243b;overflow-x:hidden}.bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 50% 10%,#463650 0,#1b1729 42%,#0b0a11 100%)}.lava{position:fixed;bottom:-40px;left:0;right:0;height:180px;z-index:-1;opacity:.38;background:linear-gradient(170deg,transparent 0 32%,#ff6b00 33% 39%,#3a1b1b 40% 47%,#ff3b00 48% 53%,#1c1518 54%);filter:blur(2px);animation:quake 4s ease-in-out infinite}.volcano{position:fixed;bottom:25px;left:6%;font-size:100px;opacity:.28;filter:drop-shadow(0 0 18px #ff5b22);animation:pulse 2.8s infinite}.drum{position:fixed;top:90px;right:3%;font-size:88px;opacity:.25;animation:drum 2.4s infinite}.crack{position:fixed;inset:0;z-index:-1;opacity:.12;background:repeating-linear-gradient(67deg,transparent 0 90px,#fff 91px 92px,transparent 93px 180px);animation:quake 7s infinite}
@keyframes quake{0%,94%,100%{transform:translate(0)}95%{transform:translate(2px,-1px)}96%{transform:translate(-3px,1px)}97%{transform:translate(2px,2px)}}@keyframes drum{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-8deg) scale(1.05)}80%{transform:rotate(6deg)}}@keyframes pulse{50%{filter:drop-shadow(0 0 35px #ff6a00);transform:scale(1.03)}}
header{position:sticky;top:0;z-index:10;padding:14px 24px;background:#ffffffee;backdrop-filter:blur(10px);box-shadow:0 5px 20px #0002;display:flex;justify-content:space-between;align-items:center}.title{font-size:22px;font-weight:900}.score{background:#fff3c4;border:2px solid #e8b43a;border-radius:999px;padding:8px 15px;font-weight:900}.wrap{max-width:1050px;margin:28px auto;padding:0 18px}.screen{display:none;background:#fffc;border:1px solid #ffffff80;border-radius:28px;padding:28px;box-shadow:0 18px 55px #0004;min-height:620px}.screen.active{display:block;animation:show .45s ease}@keyframes show{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}h1,h2{text-align:center;color:#35264c}h1{font-size:36px}.lead{font-size:21px;line-height:2;text-align:center;max-width:850px;margin:auto}.pill{display:inline-block;background:#5c3a78;color:#fff;border-radius:999px;padding:8px 16px;font-weight:900}.mapbox{position:relative;max-width:920px;margin:20px auto}.mapbox img{width:100%;border-radius:20px;box-shadow:0 12px 30px #0002}.nodes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px}.node{width:54px;height:54px;border-radius:50%;border:0;background:#7d4da0;color:#fff;font-size:20px;font-weight:900;box-shadow:0 0 0 7px #7d4da025,0 0 20px #7d4da080;cursor:pointer;animation:breathe 1.8s infinite}.node.done{background:#aaa;box-shadow:none;animation:none;transform:scale(.82)}@keyframes breathe{50%{transform:scale(1.12);box-shadow:0 0 0 12px #7d4da015,0 0 28px #7d4da0}}.explain{min-height:100px;padding:18px;border-radius:18px;background:#f5effa;font-size:20px;line-height:1.9;font-weight:700;animation:show .4s}.lessons{display:grid;gap:15px}.lesson{background:linear-gradient(135deg,#fff,#f8f0ff);border-right:6px solid #8d5aad;border-radius:18px;padding:17px 20px;font-size:19px;line-height:1.7;animation:float 4s ease-in-out infinite;box-shadow:0 0 18px #fff,0 8px 18px #673c8a16}.lesson:nth-child(even){animation-delay:-2s}@keyframes float{50%{transform:translateY(-3px);box-shadow:0 0 25px #fff,0 12px 25px #673c8a22}}
.qcard{background:#fff;border:2px solid #e5d9ed;border-radius:20px;padding:20px;margin:16px 0}.q{font-size:20px;font-weight:900;margin-bottom:14px}.opts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.opt,.drag{border:2px solid #d8c6e5;background:#fff;border-radius:15px;padding:12px 18px;font-size:18px;font-weight:800;cursor:pointer}.opt.correct{background:#dff7e7;border-color:#32a75b}.opt.wrong{background:#ffe0e0;border-color:#dc4242}.center{display:flex;justify-content:center;gap:18px}.yn{min-width:130px}.nav{display:flex;justify-content:space-between;direction:rtl;margin-top:26px}.btn{border:0;border-radius:16px;padding:13px 25px;background:#5d3977;color:white;font-size:18px;font-weight:900;cursor:pointer}.btn.next{background:#d69221}.match{display:grid;grid-template-columns:1fr 1fr;gap:15px;direction:rtl}.match button{min-height:64px}.selected{outline:4px solid #f2c14d}.matched{background:#dff7e7!important;opacity:.65}.cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:15px}.drop{display:inline-block;min-width:130px;min-height:45px;border:3px dashed #a884bc;border-radius:12px;vertical-align:middle;padding:5px;margin:4px}.verse{font-size:22px;line-height:2.3;text-align:center}.scalezone{display:grid;grid-template-columns:1fr 1fr;gap:18px}.scale{min-height:230px;border-radius:24px;padding:18px;text-align:center;font-size:23px;font-weight:900;border:3px dashed #b08dc6}.scale.good{background:#effbf2}.scale.bad{background:#fff0f0}.deeds{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px}.deed{background:#fff;border:2px solid #ddd;border-radius:15px;padding:12px 16px;font-weight:900;cursor:grab}.event{padding:18px;border:2px solid #ddd;border-radius:18px;margin:12px;font-size:19px;font-weight:800;cursor:pointer}.event.bad{background:#ffe2e2}.event.safe{background:#f5f7fb}.matchcol{display:grid;gap:12px}.matchcol .opt{width:100%;text-align:center}.scale-stage{position:relative;max-width:820px;height:360px;margin:25px auto 5px}.scale-post{position:absolute;left:50%;top:75px;width:14px;height:220px;background:#72503a;border-radius:10px;transform:translateX(-50%)}.scale-beam{position:absolute;left:15%;right:15%;top:88px;height:12px;background:#9b744d;border-radius:12px;transform-origin:center;transition:transform .65s ease}.scale-pan{position:absolute;top:120px;width:34%;min-height:150px;border:3px solid #b08dc6;border-radius:24px;padding:16px;text-align:center;font-size:20px;font-weight:900;transition:transform .65s ease,box-shadow .65s ease}.scale-pan.good{left:7%;background:#effbf2}.scale-pan.bad{right:7%;background:#fff0f0}.scale-pan.good.heavy{box-shadow:0 15px 30px #2aa45b55}.scale-pan.bad.light{box-shadow:0 -8px 24px #d88b8b44}.scale-center{position:absolute;left:50%;top:60px;transform:translateX(-50%);font-size:48px;z-index:2}.surah-fill{font-size:25px;line-height:2.6;text-align:center;background:#fff;border:2px solid #eadff0;border-radius:22px;padding:22px}.inline-drop{display:inline-flex;align-items:center;justify-content:center;min-width:125px;min-height:48px;border:3px dashed #a884bc;border-radius:12px;padding:2px 10px;margin:3px;background:#faf7fc;vertical-align:middle}.inline-drop.ok{background:#dff7e7;border-style:solid;border-color:#32a75b}.celebrate{font-size:64px;text-align:center;animation:breathe 1.5s infinite}@media(max-width:700px){.match,.scalezone{grid-template-columns:1fr}.screen{padding:18px}h1{font-size:29px}.lead{font-size:18px}}

/* الصفحة الختامية — بنفس روح رحلة التدبر */
#s9{position:relative;overflow:hidden;background:linear-gradient(145deg,#fffdf8ee,#f7efffee);border:2px solid #ffffffaa}
#s9:before,#s9:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.22;pointer-events:none}
#s9:before{width:260px;height:260px;right:-90px;top:-85px;background:radial-gradient(circle,#ffd76a,transparent 68%)}
#s9:after{width:300px;height:300px;left:-110px;bottom:-120px;background:radial-gradient(circle,#9d6dc0,transparent 68%)}
.final-card{position:relative;z-index:1;max-width:760px;margin:18px auto;padding:28px 24px;border-radius:28px;background:#ffffffd9;border:2px solid #eadcf2;box-shadow:0 18px 45px #4d315029;text-align:center}
.final-badge{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:50px;background:linear-gradient(145deg,#fff6c8,#ffe184);border:4px solid #e6b83e;box-shadow:0 0 0 10px #fff3b833,0 10px 24px #a9782533;animation:breathe 1.8s infinite}
.final-title{font-size:38px;font-weight:900;color:#4a2d61;margin:8px 0}
.final-scorebox{display:inline-flex;align-items:center;gap:10px;margin:20px auto;padding:13px 22px;border-radius:999px;background:#fff4c9;border:2px solid #e4b53f;font-size:21px;font-weight:900;color:#5a3c17;box-shadow:0 8px 20px #c79a2a22}
.final-reminder{max-width:650px;margin:14px auto 0;padding:16px 18px;border-radius:18px;background:#f7f1fb;border-right:6px solid #8d5aad;font-size:19px;line-height:1.9;font-weight:700}
.final-stars{font-size:30px;letter-spacing:8px;margin:8px 0 2px;animation:float 3s ease-in-out infinite}
.horsebg{position:fixed;inset:auto 0 5% 0;z-index:-1;font-size:120px;letter-spacing:8vw;opacity:.16;white-space:nowrap;transform:scaleX(-1);filter:drop-shadow(0 0 20px #ffb24a)}.dust{position:fixed;left:5%;top:16%;z-index:-1;font-size:90px;opacity:.13}.bg{background:radial-gradient(circle at 50% 12%,#7b4b27 0,#342318 42%,#100d0b 100%)!important}.scalezone{grid-template-columns:repeat(3,1fr)!important}@media(max-width:700px){.scalezone{grid-template-columns:1fr!important}}

/* نمط أسئلة وتعليمات التمارين — مطابق لأسلوب السور الأولى */
#s5 h2,#s6 h2,#s7 h2,#s8 h2,#s5 .q,#s6 .q,#s7 .q,#s8 .q,
#s5 .lead,#s6 .lead,#s7 .lead,#s8 .lead,#s5 .ayah-text,#s7 .exercise-note{
 font-family:Tahoma,Arial,sans-serif!important;
 font-style:normal!important;
 letter-spacing:0!important;
}
#s5 h2,#s6 h2,#s7 h2,#s8 h2{font-weight:900;line-height:1.6}
#s5 .q,#s6 .q,#s7 .q,#s8 .q{font-size:20px;font-weight:900;line-height:1.8}
#s5 .ayah-text{font-family:"Traditional Arabic",Tahoma,Arial,sans-serif!important;font-size:22px;font-weight:800;line-height:1.8}
.exercise-note{max-width:760px;margin:0 auto 16px;font-size:18px}
.pic-card{display:flex;flex-direction:column;align-items:center;text-align:center}


.ruins{position:fixed;bottom:3%;left:0;right:0;z-index:-1;font-size:105px;opacity:.2;display:flex;justify-content:space-around;filter:drop-shadow(0 0 18px #c96)}.cracks{position:fixed;inset:0;z-index:-1;opacity:.12;background:repeating-linear-gradient(72deg,transparent 0 110px,#fff 111px 113px,transparent 114px 220px);animation:quake 6s infinite}.bg{background:radial-gradient(circle at 50% 10%,#765b52 0,#332c2b 45%,#111 100%)!important}.strike{text-decoration:line-through;text-decoration-thickness:4px;opacity:.55}.order-card{cursor:pointer}.order-card.active{outline:4px solid #e0a52c}.ayah-text{font-size:22px;font-weight:800;line-height:1.9;text-align:center}.proposal{font-size:20px;line-height:1.8}.proposal.correct-strike{background:#ffe2e2}.proposal.keep{background:#eefaf1}</head>
/* حماية إضافية: الصفحة الافتتاحية تبقى مرئية حتى لو تعطّل JavaScript. */
#s0{display:block}
body.js-ready .screen{display:none}
body.js-ready .screen.active{display:block}

/* تحدي ترتيب أحداث الزلزلة */
.order-board{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.order-bank,.order-slots{display:grid;gap:12px}
.order-card{background:#fff;border:2px solid #d9c8b7;border-radius:16px;padding:15px;font-weight:900;cursor:grab;box-shadow:0 7px 18px #0001;transition:.2s}
.order-card.selected{outline:4px solid #f0b44b}.order-card.dragging{opacity:.5}
.order-slot{min-height:66px;border:3px dashed #b79b7f;border-radius:16px;background:#fffaf4;padding:10px 12px;display:flex;align-items:center;gap:12px;transition:.2s}
.slot-index{width:38px;height:38px;border-radius:50%;background:#634a3c;color:#fff;display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.order-slot.filled{border-style:solid;border-color:#38a65a;background:#eaf8ee}.wrong-slot{background:#ffe0e0!important;border-color:#dc4242!important;animation:shakeZ .35s}
.feedback{text-align:center;min-height:34px;margin:12px;font-weight:900;color:#9a542d}

/* تمرين ملء الفراغات */
.fill-card .q{font-size:21px}.mini-bank,.number-bank-mini{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.fill-drop,.num-drop{border:3px dashed #a78e78;border-radius:14px;min-height:52px;padding:10px;display:flex;align-items:center;justify-content:center;background:#fffaf5;font-weight:900;margin:10px auto;transition:.2s}
.fill-drop{max-width:360px}.num-drop{width:68px;height:58px}.fill-drop.ok,.num-drop.ok{border-style:solid;border-color:#32a75b;background:#e4f8ea;color:#197b3a}
.verse-number-zone{display:flex;justify-content:center;align-items:center;gap:12px;font-weight:900}
.used-num{opacity:.4}

/* سلتان للأعمال */
.deed-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0}.deed-drag{cursor:grab}
.basket-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.deed-basket{min-height:230px;border:4px dashed #b6a184;border-radius:24px;padding:18px;text-align:center;font-size:20px;font-weight:900;background:#fff;transition:.25s;box-shadow:0 10px 25px #0001}
.good-basket{background:linear-gradient(180deg,#f3fff4,#e3f7e7);border-color:#4fa969}.bad-basket{background:linear-gradient(180deg,#fff7f3,#f2ede9);border-color:#876d61}
.basket-icon{font-size:58px;margin-bottom:8px}.deed-basket small{display:block;margin:8px;color:#6b6b6b}.basket-item{display:block;margin:8px auto;padding:8px 10px;border-radius:12px;background:#ffffffc9;font-size:16px}
@keyframes shakeZ{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@media(max-width:750px){.order-board,.basket-grid{grid-template-columns:1fr}}

/* إصلاح السحب في تمرين ملء الفراغات */
.fill-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:92px;min-height:46px;padding:9px 14px;margin:4px;
  border:2px solid #cdb89e;border-radius:14px;background:#fff;
  font-weight:900;cursor:grab;user-select:none;touch-action:none;
  box-shadow:0 5px 12px #0001;transition:.18s;
}
.fill-chip:active{cursor:grabbing}
.fill-chip.selected{outline:4px solid #f0b44b;transform:scale(1.04)}
.fill-chip.dragging{opacity:.45;transform:scale(.96)}
.fill-drop.drag-over,.num-drop.drag-over{
  background:#fff4c9!important;border-color:#e0a632!important;
  box-shadow:0 0 0 5px rgba(224,166,50,.15);
}

/* مراجعة نهائية للجوال — الزلزلة */
@media(max-width:750px){
  /* التحدي الخاص: أحداث مضغوطة بالأعلى وأماكن الترتيب تحتها */
  #s3 .order-board{grid-template-columns:1fr!important;gap:9px!important}
  #s3 .order-bank{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  #s3 .order-card{padding:8px 6px!important;font-size:clamp(11px,3vw,14px)!important;line-height:1.35!important;border-radius:11px!important}
  #s3 .order-slots{gap:5px!important}
  #s3 .order-slot{min-height:47px!important;padding:5px 7px!important;font-size:clamp(11px,3vw,14px)!important;gap:6px!important}
  #s3 .slot-index{width:28px!important;height:28px!important;font-size:13px!important}
  /* تمرين 3: بطاقات متقابلة */
  #s5 .match{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important}
  #s5 .matchcol{gap:7px!important}
  #s5 .opt{min-height:76px!important;padding:8px 5px!important;font-size:clamp(12px,3.4vw,16px)!important;line-height:1.4!important}
  /* تمرين 4: سلة الأعمال والميزان على صف واحد */
  #s6 .deed-bank{gap:5px!important;margin:8px 0!important}
  #s6 .deed-drag{padding:7px 7px!important;font-size:clamp(11px,3vw,14px)!important}
  #s6 .basket-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin-top:8px!important}
  #s6 .deed-basket{min-height:145px!important;padding:8px 5px!important;border-width:2px!important;
    border-radius:15px!important;font-size:clamp(12px,3.2vw,15px)!important;line-height:1.35!important}
  #s6 .basket-icon{font-size:35px!important;margin-bottom:3px!important}
  #s6 .deed-basket small{font-size:10px!important;margin:4px!important}
  #s6 .basket-item{font-size:11px!important;padding:4px!important;margin:4px auto!important}
  /* تمرين 7: بطاقات ونص السورة أكثر اقتصادًا في المساحة */
  #s9 .cards{gap:5px!important;margin:8px 0!important}
  #s9 .drag{padding:7px 8px!important;font-size:clamp(12px,3.2vw,15px)!important}
  #s9 .surah-fill{font-size:clamp(16px,4.1vw,19px)!important;line-height:2.05!important;padding:12px 8px!important}
  #s9 .inline-drop{min-width:86px!important;min-height:38px!important;padding:1px 5px!important}
}