*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;background:#100b16;color:#fbf7ff}
body{padding-bottom:88px;overflow-x:hidden}
.qiyamah-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:
radial-gradient(circle at 50% 6%,rgba(255,255,255,.18),transparent 18%),
radial-gradient(circle at 17% 24%,rgba(70,118,190,.24),transparent 30%),
radial-gradient(circle at 84% 26%,rgba(109,80,160,.24),transparent 30%),
linear-gradient(180deg,#0b1528 0%,#162a48 42%,#302d54 72%,#17121f 100%)}
.qiyamah-bg:before{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 10% 15%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 31% 11%,#dcecff 0 1px,transparent 2px),
radial-gradient(circle at 72% 18%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 86% 34%,#f6e8ff 0 1px,transparent 2px),
radial-gradient(circle at 56% 42%,#fff 0 1px,transparent 2px);
background-size:150px 150px,210px 210px,180px 180px,240px 240px,170px 170px;opacity:.72}
.glow{position:absolute;left:44%;top:-10%;width:20%;height:120%;
background:linear-gradient(112deg,transparent 0 43%,rgba(210,230,255,.16) 45%,rgba(255,255,255,.95) 48%,rgba(255,223,178,.68) 50%,rgba(150,118,200,.16) 53%,transparent 56%);
filter:blur(2px);transform:rotate(-5deg);opacity:.92}
.rift{position:absolute;width:4px;background:linear-gradient(#ffffff,#d9ecff,#ffd7a8);
box-shadow:0 0 14px #ffffff,0 0 30px #a8c9ff,0 0 54px #f1b58c;transform-origin:top;border-radius:80%}
.r1{height:55%;left:52%;top:-2%;transform:rotate(12deg)}.r1:after{content:"";position:absolute;width:4px;height:120px;top:100px;left:-45px;background:inherit;transform:rotate(55deg)}
.r2{height:33%;left:49%;top:37%;transform:rotate(-20deg);opacity:.75}.r2:after{content:"";position:absolute;width:4px;height:90px;left:38px;top:50px;background:inherit;transform:rotate(-55deg)}
.r3{height:22%;left:58%;top:10%;transform:rotate(36deg);opacity:.62}
.dust{position:absolute;left:-5%;right:-5%;bottom:-8%;height:36%;background:radial-gradient(ellipse at center,#7b352f99,transparent 60%);filter:blur(20px)}
header{height:68px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:#150e1ce8;border-bottom:1px solid #ffffff1f;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.brand{font-weight:900;font-size:clamp(18px,2.3vw,28px);color:#ffd57a}.hud{display:flex;gap:12px}.hud span{background:#ffffff0d;border:1px solid #ffffff22;padding:8px 12px;border-radius:14px}
.progress{height:5px;background:#ffffff12;position:sticky;top:68px;z-index:20}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd76f,#ff805e,#b55ad8);transition:.35s}
main{width:min(1180px,94vw);margin:28px auto}.screen{display:none;animation:enter .45s ease}.screen.active{display:block}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel{background:linear-gradient(145deg,#1a1325ed,#251421e6);border:1px solid #ffffff22;border-radius:28px;padding:clamp(20px,4vw,44px);box-shadow:0 24px 75px #0009;backdrop-filter:blur(12px);min-height:68vh}
.hero,.finale{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.eyebrow{color:#ffd57a;font-weight:900;margin-bottom:8px}.hero h1,.finale h1{font-size:clamp(44px,7vw,78px);margin:8px;text-shadow:0 0 28px #ffaf7870}
.lead{font-size:clamp(20px,2.25vw,28px);line-height:1.9;max-width:940px}.mission,.note,.explain{padding:16px 20px;border-radius:18px;background:#ffffff0b;border:1px solid #ffffff1c;line-height:1.9;max-width:950px}.mission,.explain{font-size:20px}.note{font-size:16px;color:#d6cbe0;margin-top:16px}
h2{font-size:clamp(29px,4vw,43px);margin:6px 0 12px}.instruction{font-size:21px;line-height:1.8;color:#eee4f5}
.mapwrap{position:relative;width:min(100%,930px);margin:20px auto}.mapimg{display:block;width:100%;border-radius:20px;border:1px solid #ffffff22;background:white}
.node{position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:3px solid #ffe18a;background:#3a2734;color:#fff4c8;font-size:23px;font-weight:900;cursor:pointer;box-shadow:0 0 0 8px #ffd75c20,0 0 30px #ffc95c}
.node.activeNode{animation:pulse 1.15s infinite}.node.locked{opacity:.28;box-shadow:none;cursor:not-allowed}.node.done{opacity:.5;box-shadow:none}@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.23);box-shadow:0 0 0 15px #ffd75c12,0 0 45px #ffc65d}}
.explain{margin:16px auto;font-size:22px;font-weight:800}.lessons-lines{display:flex;flex-direction:column;gap:10px}.lessons-lines div{padding:15px 19px;border-radius:16px;background:linear-gradient(90deg,#ffffff09,#ffb7650c);border:1px solid #ffffff18;line-height:1.85;font-size:19px;animation:lesson 3.8s ease-in-out infinite}.lessons-lines div:nth-child(2n){animation-delay:.7s}@keyframes lesson{50%{transform:translateX(-4px);box-shadow:0 0 24px #ffb45b12}}
.observatory{display:grid;grid-template-columns:280px 1fr;gap:25px;align-items:center}.portal-side{text-align:center}.portal{width:150px;height:150px;margin:auto;border-radius:50%;display:grid;place-items:center;border:3px solid #ffd574;box-shadow:0 0 25px #ffd57455,inset 0 0 25px #9d4e5d66;background:radial-gradient(circle,#4e2c51,#17101f 66%);transition:.35s}.portal span{font-size:62px;color:#ffd574}.portal.open{transform:scale(1.07);box-shadow:0 0 60px #ffd574aa,inset 0 0 36px #e16b7566}.cracks{font-size:27px;margin:18px 0}.counter{font-weight:900;color:#ffd574}.caseq{font-size:25px;line-height:1.75;font-weight:900}.hint{color:#d5c6df;margin-top:10px}
.choice,.match-btn{display:block;width:100%;text-align:right;border:1px solid #ffffff22;background:#2b1d32;color:#fff;border-radius:15px;padding:14px 16px;margin:10px 0;font:inherit;font-size:19px;line-height:1.6;cursor:pointer;transition:.2s}.choice:hover,.match-btn:hover{transform:translateY(-2px);border-color:#ffd574}.good{background:#174336!important;border-color:#69d6a5!important}.bad{background:#56202c!important;border-color:#ff7c86!important;animation:shake .28s}@keyframes shake{25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}
.matching{display:grid;grid-template-columns:1fr 1fr;gap:18px}.matchcol{display:grid;gap:10px}.match-btn.selected{outline:3px solid #ffd574;background:#443047}.match-btn.done{opacity:.55;pointer-events:none}
.imagequiz{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.imgcard{position:relative;background:#ffffff09;border:2px solid transparent;border-radius:18px;padding:10px;cursor:pointer;transition:.25s}.imgcard img{width:100%;height:150px;object-fit:contain;background:white;border-radius:12px}.imgcard span{display:block;text-align:center;padding-top:8px;font-weight:800}.imgcard.selected{border-color:#ffd574;transform:translateY(-5px);box-shadow:0 0 30px #ffd57435}.imgcard.correct{border-color:#66d8a4;background:#12382d}.imgcard.wrong{border-color:#ff7580;background:#4b1a25}
.qbox,.deed{background:#ffffff09;border:1px solid #ffffff18;border-radius:18px;padding:18px;margin:14px 0}.qtitle{font-size:21px;font-weight:900;line-height:1.7}.deeds{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.deed{cursor:pointer;transition:.2s;font-size:19px;line-height:1.7}.deed.selected{outline:3px solid #ffd574;transform:translateY(-3px)}
.bank{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.chip{padding:10px 14px;border-radius:13px;background:#4a2b42;border:1px solid #ffffff28;cursor:pointer;font-size:19px}.chip.selected{outline:3px solid #ffd574}.verseflow{font-size:21px;line-height:2.4;background:#ffffff08;border:1px solid #ffffff17;padding:17px;border-radius:18px}.versefrag{display:inline}.blank{display:inline-block;min-width:105px;text-align:center;color:#ffd574;border-bottom:2px dashed #ffd574;padding:0 7px;margin:0 3px;cursor:pointer}.blank.ok{border-bottom-style:solid;color:#78e2b4}
.check{border:0;border-radius:15px;background:linear-gradient(135deg,#ffd574,#f49a63);color:#2b1720;font-weight:900;font-size:19px;padding:13px 22px;margin-top:18px;cursor:pointer}.result{font-size:24px;background:#ffffff0d;padding:18px 24px;border-radius:18px}.finalportal{margin-bottom:16px}
.nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:14px;padding:13px 4vw;background:#140d1ced;border-top:1px solid #ffffff20;backdrop-filter:blur(12px)}.nav button{border:1px solid #ffffff25;background:#392538;color:#fff;border-radius:14px;padding:11px 18px;font-size:18px;font-weight:800;cursor:pointer}.nav .prev{margin-left:auto}.nav .next{margin-right:auto}.nav button:disabled{opacity:.3;cursor:not-allowed}#pageNo{color:#cfc0da;font-weight:700}
#toast{position:fixed;z-index:100;top:88px;left:50%;transform:translateX(-50%) translateY(-15px);opacity:0;pointer-events:none;background:#3c263a;border:1px solid #ffffff22;border-radius:14px;padding:12px 20px;font-weight:900;transition:.25s}#toast.show{opacity:1;transform:translateX(-50%)}
@media(max-width:800px){.observatory{grid-template-columns:1fr}.matching,.deeds{grid-template-columns:1fr}.imagequiz{grid-template-columns:repeat(2,1fr)}.panel{padding:18px}.node{width:44px;height:44px}.nav button{font-size:15px;padding:10px 12px}}

/* 2026-09 final correction: keep Quranic phrases and meanings facing each other */
.matching{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;align-items:start}
.matchcol{min-width:0}.match-btn{font-size:clamp(14px,3.7vw,18px);padding:11px 9px;line-height:1.55;overflow-wrap:anywhere}
@media(max-width:800px){.matching{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.match-btn{font-size:14px;padding:10px 7px}}