@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@500;700;800&family=Noto+Naskh+Arabic:wght@500;700&display=swap');
*{box-sizing:border-box} body{margin:0;background:#07152f;color:#fff;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;min-height:100vh;overflow-x:hidden}
.night-bg{position:fixed;inset:0;z-index:-2;background:
radial-gradient(circle at 17% 18%,#203c70 0 2%,transparent 15%),
linear-gradient(180deg,#07152f,#10284a 55%,#071526)}
.night-bg:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1.2px,transparent 1.5px);background-size:55px 55px;opacity:.42}
.moon{position:absolute;left:8%;top:6%;font-size:130px;color:#fff4c8;filter:drop-shadow(0 0 24px #fff2a8)}
.scene{position:absolute;bottom:5%;font-size:78px;opacity:.38}.scene span{font-size:48px}.scene-pray{right:4%}.scene-theft{left:5%}
header{height:72px;padding:12px 4%;display:flex;justify-content:space-between;align-items:center;background:#07152fd9;border-bottom:1px solid #ffffff24;position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.brand{font-weight:800;font-size:20px}.score{background:#ffffff12;border:1px solid #ffffff2a;padding:8px 16px;border-radius:18px}
main{width:min(1080px,94%);margin:28px auto 50px}.panel{background:#f9fbff;color:#17243d;border-radius:28px;padding:28px;box-shadow:0 20px 70px #0007;border:1px solid #fff}
h1,h2{margin-top:0}.hero h1{font-size:38px;color:#172c5c}.lead{font-family:"Noto Naskh Arabic";font-size:23px;line-height:1.95}
.gold{color:#ad7400;font-weight:800}.note{background:#fff7d7;border:2px solid #f0cf65;border-radius:18px;padding:16px;margin:16px 0}
.map{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}.map-card{background:linear-gradient(135deg,#eef4ff,#fff);border:2px solid #cddcf7;border-radius:20px;padding:16px;font-family:"Noto Naskh Arabic";font-size:20px;line-height:1.65}
.map-card b{color:#183b78}.instruction{background:#eaf2ff;border-right:6px solid #345fb4;padding:14px 16px;border-radius:14px;margin:12px 0 20px;line-height:1.7}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.card,.choice,.verse,.drag{background:#fff;border:2px solid #d7e1f1;color:#17243d;border-radius:17px;padding:15px;cursor:pointer;box-shadow:0 7px 18px #13264b12;transition:.2s}
.card:hover,.choice:hover,.drag:hover{transform:translateY(-2px)}.correct{background:#dff7e5!important;border-color:#41a75e!important;color:#17612b!important}.wrong{background:#ffe2e2!important;border-color:#db4242!important}
.btn{border:0;border-radius:16px;padding:12px 24px;font:700 16px "Noto Kufi Arabic";cursor:pointer;background:#315caa;color:white}.btn.secondary{background:#6d7890}
.nav{display:flex;direction:ltr;justify-content:space-between;margin-top:26px}.nav .btn{direction:rtl}
.drop{min-height:62px;border:3px dashed #9aaaca;border-radius:17px;padding:12px;background:#f7faff;margin:9px 0}.drop.good{border-color:#36a85b;background:#e7faec}
.two-paths{display:grid;grid-template-columns:1fr 1fr;gap:18px}.path{border-radius:24px;padding:18px;background:#f4f7ff;border:2px solid #cfdaf0}.path.goodp{border-color:#72c48a}.path.badp{border-color:#e68a8a}
.token-row{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}.token{background:#fff6d7;border:2px solid #e0b94e;border-radius:14px;padding:10px 13px;cursor:grab}
.example{border:2px solid #bccbe7;border-radius:22px;padding:18px;background:#fff}.example-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.example-cell{border:2px solid #d8dfeb;border-radius:14px;padding:13px;text-align:center;cursor:pointer}
.question{border-bottom:1px solid #dfe5ee;padding:15px 0}.options{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}.opt{padding:9px 13px;border-radius:12px;border:2px solid #ccd7e9;background:#fff;cursor:pointer}
.contrast-board{display:grid;grid-template-columns:1fr 90px 1fr;gap:12px;align-items:center}.side{min-height:360px;padding:18px;border-radius:25px}.side.day{background:linear-gradient(#fff5be,#fff)}.side.night{background:linear-gradient(#18264d,#09152d);color:white}.vs{text-align:center;font-size:42px;font-weight:900;color:#d4a21b}
.contrast{padding:12px;border-radius:14px;margin:9px 0;background:#ffffffd9;color:#17243d;border:2px solid transparent;cursor:pointer}.contrast.matched{border-color:#3ea45b;background:#dff7e5}
#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);background:#111d36;color:white;padding:12px 22px;border-radius:16px;opacity:0;pointer-events:none;transition:.25s;z-index:30}#toast.show{opacity:1}
@media(max-width:720px){.grid,.map,.two-paths{grid-template-columns:1fr}.contrast-board{grid-template-columns:1fr}.vs{font-size:24px}.panel{padding:18px}.lead{font-size:20px}}
/* الخريطة الذهنية بنمط الدوائر المضيئة */
.mind-stage{position:relative;max-width:920px;margin:12px auto 18px;background:#fff;border-radius:24px;padding:10px;box-shadow:0 10px 28px #14264b1c}
.mind-img{display:block;width:100%;height:auto;border-radius:18px}
.mind-dots{position:absolute;inset:0;pointer-events:none}
.mind-dot{pointer-events:auto;position:absolute;width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:#263a63;color:#fff;font-weight:900;font-size:18px;cursor:pointer;opacity:.46;box-shadow:0 0 0 4px #263a6333;transition:.3s}
.mind-dot:nth-child(1){right:12%;top:9%}.mind-dot:nth-child(2){right:18%;top:42%}.mind-dot:nth-child(3){right:24%;bottom:13%}.mind-dot:nth-child(4){left:25%;bottom:15%}.mind-dot:nth-child(5){left:16%;top:40%}.mind-dot:nth-child(6){left:12%;top:10%}
.mind-dot.active{opacity:1;transform:scale(1.25);background:#ffcc35;color:#17243d;box-shadow:0 0 0 7px #ffd84c55,0 0 28px #ffd84c,0 0 52px #fff1a8;animation:mindPulse 1.25s ease-in-out infinite}
.mind-dot.done{opacity:.28;transform:scale(.88);box-shadow:none}
.mind-text{font-family:"Noto Naskh Arabic";font-size:22px;line-height:1.85;background:#eef5ff;border:2px solid #c9d9f2;border-radius:18px;padding:17px;min-height:112px;box-shadow:0 8px 20px #17366b12}
.mind-text b{color:#173f84}.mind-text.reveal{animation:mindReveal .5s ease}
@keyframes mindPulse{50%{transform:scale(1.38);filter:brightness(1.12)}}
@keyframes mindReveal{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:720px){.mind-dot{width:38px;height:38px;font-size:15px}.mind-text{font-size:19px}}

/* مراجعة الهاتف — سورة الليل */
.token.selected{outline:4px solid #e4b631;transform:scale(1.04)}
@media(max-width:700px){
  .path-bank{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin:8px 0 10px!important}
  .path-bank .token{font-size:clamp(11px,3.1vw,14px)!important;padding:8px 5px!important;min-width:0!important}
  .two-paths{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .two-paths .path{padding:8px 5px!important;min-width:0!important}
  .two-paths h3{font-size:clamp(12px,3.2vw,15px)!important;line-height:1.45!important}
  .two-paths .drop{min-height:135px!important;padding:5px!important}
  .two-paths .drop .token{font-size:clamp(10px,2.8vw,13px)!important;padding:6px 4px!important;margin:4px 0!important}
  .contrast-board{display:grid!important;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;gap:5px!important;align-items:start!important}
  .contrast-board .side{padding:8px 5px!important;min-width:0!important}
  .contrast-board .side h3{font-size:clamp(13px,3.5vw,16px)!important}
  .contrast{font-size:clamp(12px,3.3vw,15px)!important;padding:8px 5px!important;margin:5px 0!important}
  .vs{font-size:20px!important;padding-top:42px!important}
  #bank.token-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  #bank .token{font-size:clamp(11px,3vw,14px)!important;padding:7px 4px!important;min-width:0!important}
  .lead{font-size:clamp(15px,4vw,18px)!important;line-height:2!important}
  .lead .drop{min-width:78px!important;min-height:38px!important;padding:2px 4px!important;font-size:clamp(12px,3.3vw,15px)!important}
}