/* نور v27 — تحسينات: تثبيت البوصلة، شاشة الأذان الاحترافية، المتجر، قصص الأنبياء */

/* ===================== 1) البوصلة: صفحة ثابتة لا تتحرك ===================== */
html:has(body.qibla-lock),body.qibla-lock{overflow:hidden!important;overscroll-behavior:none;height:100%}
body.qibla-lock{position:fixed;inset:0;width:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.qibla-lock .app{height:100%;min-height:0;padding-bottom:0;overflow:hidden}
body.qibla-lock .screen{animation:none!important;height:calc(100% - 78px - 74px - env(safe-area-inset-bottom,0px));overflow:hidden;padding-top:6px;display:flex;flex-direction:column;justify-content:flex-start;gap:0}
body.qibla-lock .page-head{margin-bottom:8px}
body.qibla-lock .page-head h1{font-size:24px}
body.qibla-lock .qcard{padding:10px 14px;flex:none}
body.qibla-lock .qring-wrap{width:min(78vw,40dvh,320px);margin:16px auto 2px;flex:none;contain:layout paint}
body.qibla-lock .qdial{transition:none!important;will-change:transform;backface-visibility:hidden;transform-origin:50% 50%}
body.qibla-lock .qsvg{filter:none}
body.qibla-lock .qring-wrap::after{content:"";position:absolute;inset:4%;border-radius:50%;box-shadow:0 8px 24px rgba(154,109,22,.35);pointer-events:none;z-index:-1}
body.qibla-lock .qacc-wrap{min-height:34px;margin-top:10px;flex:none;display:flex;align-items:center;justify-content:center}
body.qibla-lock #qCalBox{min-height:46px;flex:none}
body.qibla-lock .qibla-cal{margin-top:6px}
body.qibla-lock .qflat-hint{margin-top:8px;flex:none}
body.qibla-lock .btn.full{flex:none}
@media (max-height:640px){body.qibla-lock .qflat-hint{display:none}body.qibla-lock .page-head .muted{display:none}}

/* ===================== 2) شاشة الأذان v2 ===================== */
.adx{--s1:#0b1026;--s2:#1b1b4b;--s3:#3b3a7a;--glow:#ffd978;--ink:#fff;--mosque:#05070f;--star:1;position:fixed;inset:0;z-index:9999;overflow:hidden;color:var(--ink);animation:adxIn .7s ease both}
@keyframes adxIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.adx-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 52%,var(--s3) 100%);background-size:100% 150%;animation:adxSky 26s ease-in-out infinite alternate}
@keyframes adxSky{from{background-position:50% 0}to{background-position:50% 100%}}
.adx-fajr{--s1:#080c2a;--s2:#3a3484;--s3:#e8838c;--glow:#ffc9a8;--star:.9}
.adx-sunrise{--s1:#262b66;--s2:#d9779b;--s3:#ffc27a;--glow:#ffe3a3;--star:.25}
.adx-dhuhr{--s1:#0a6fc4;--s2:#3fb3f2;--s3:#c9efff;--glow:#fff6c9;--star:0;--mosque:#0a1f33}
.adx-asr{--s1:#2a78bd;--s2:#e8b062;--s3:#f8d9a0;--glow:#ffe2a0;--star:0;--mosque:#1b1410}
.adx-maghrib{--s1:#1f1348;--s2:#b83a3a;--s3:#ffab3d;--glow:#ffc15e;--star:.5;--mosque:#07040a}
.adx-isha{--s1:#01030c;--s2:#0b1235;--s3:#1c1f5a;--glow:#ffe9a8;--star:1}

/* نجوم */
.adx-stars{position:absolute;inset:0 0 38% 0;pointer-events:none;opacity:var(--star);transition:opacity 1s}
.adx-stars i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 7px 1px #fffa;animation:adxTw 3.2s ease-in-out infinite}
.adx-stars i.b{background:#ffe9a8;box-shadow:0 0 10px 2px #ffe9a8aa}
@keyframes adxTw{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
.adx-shoot{position:absolute;top:8%;inset-inline-start:70%;width:110px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,#fff0);opacity:0;transform:rotate(28deg);animation:adxShoot 9s linear infinite;pointer-events:none}
.adx-shoot.s2{top:18%;inset-inline-start:95%;animation-delay:4.5s;animation-duration:12s;width:80px}
.adx-shoot.s3{top:4%;inset-inline-start:40%;animation-delay:7s;animation-duration:15s}
@keyframes adxShoot{0%{opacity:0;transform:translate(0,0) rotate(28deg)}2%{opacity:1}12%{opacity:0;transform:translate(-260px,150px) rotate(28deg)}100%{opacity:0}}
.adx-dhuhr .adx-shoot,.adx-asr .adx-shoot,.adx-sunrise .adx-shoot{display:none}

/* القمر والشمس */
.adx-orb{position:absolute;border-radius:50%;pointer-events:none}
.adx-moon{top:42%;inset-inline-start:11%;width:84px;height:84px;opacity:0;animation:adxFloat 8s ease-in-out infinite}
.adx-moon svg{width:100%;height:100%;fill:#fff3c4;filter:drop-shadow(0 0 14px #ffe9a8) drop-shadow(0 0 40px #ffe9a899)}
.adx-fajr .adx-moon,.adx-isha .adx-moon{opacity:1}
.adx-maghrib .adx-moon{opacity:.8;top:12%;width:56px;height:56px}
@keyframes adxFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(4deg)}}
.adx-sun{top:8%;inset-inline-end:14%;width:92px;height:92px;opacity:0;background:radial-gradient(circle,#fffbe0 0%,#ffe27a 45%,#ffb300 100%);box-shadow:0 0 50px 22px #ffd45caa,0 0 140px 70px #ffb30055;animation:adxSun 6s ease-in-out infinite}
@keyframes adxSun{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.adx-dhuhr .adx-sun{opacity:1;top:36%;inset-inline-end:12%}
.adx-asr .adx-sun{opacity:1;top:40%;inset-inline-end:12%;background:radial-gradient(circle,#fff1c4 0%,#ffbd4a 55%,#ff8f00 100%)}
.adx-sunrise .adx-sun{opacity:1;top:46%;inset-inline-end:12%}
.adx-maghrib .adx-sun{opacity:1;top:auto;bottom:17%;inset-inline-end:auto;inset-inline-start:calc(50% - 65px);width:130px;height:130px;background:radial-gradient(circle,#fff0b0 0%,#ff9a3c 50%,#e0301e 100%);box-shadow:0 0 70px 30px #ff7a2f99,0 0 180px 90px #ff4d2e55}
.adx-rays{position:absolute;top:-35%;inset-inline-start:-30%;width:160%;height:160%;opacity:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 8%,#fff 10%,transparent 12% 20%,#fff 22%,transparent 24% 33%,#fff 35%,transparent 37% 50%,#fff 52%,transparent 54% 66%,#fff 68%,transparent 70% 82%,#fff 84%,transparent 86%);-webkit-mask-image:radial-gradient(circle at 70% 18%,#000 0,transparent 52%);mask-image:radial-gradient(circle at 70% 18%,#000 0,transparent 52%);animation:adxSpin 120s linear infinite}
.adx-dhuhr .adx-rays,.adx-asr .adx-rays{opacity:.2}
.adx-sunrise .adx-rays{opacity:.14}
@keyframes adxSpin{to{transform:rotate(360deg)}}

/* غيوم وطيور وفوانيس */
.adx-cloud{position:absolute;height:34px;border-radius:40px;background:#ffffff30;filter:blur(8px);animation:adxDrift linear infinite;pointer-events:none}
.adx-cloud.c1{top:24%;width:150px;animation-duration:46s;inset-inline-start:-170px}
.adx-cloud.c2{top:36%;width:210px;height:44px;animation-duration:70s;animation-delay:-22s;inset-inline-start:-230px}
.adx-cloud.c3{top:15%;width:120px;animation-duration:58s;animation-delay:-38s;inset-inline-start:-130px}
.adx-dhuhr .adx-cloud{background:#ffffffaa}
.adx-isha .adx-cloud,.adx-fajr .adx-cloud{background:#ffffff14}
@keyframes adxDrift{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 380px))}}
[dir=ltr] .adx-cloud{animation-name:adxDriftL}
@keyframes adxDriftL{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 380px))}}
.adx-bird{position:absolute;top:30%;inset-inline-start:-40px;width:22px;height:8px;opacity:0;pointer-events:none}
.adx-bird::before,.adx-bird::after{content:"";position:absolute;top:0;width:11px;height:8px;border-top:2px solid #0b1f33;border-radius:50% 50% 0 0;animation:adxFlap .5s ease-in-out infinite alternate}
.adx-bird::before{left:0;transform-origin:100% 100%}.adx-bird::after{right:0;transform-origin:0 100%;animation-delay:.12s}
@keyframes adxFlap{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.adx-dhuhr .adx-bird,.adx-asr .adx-bird,.adx-fajr .adx-bird{opacity:.75;animation:adxFly 22s linear infinite}
.adx-bird.b2{top:22%;animation-delay:-8s!important;transform:scale(.8)}
.adx-bird.b3{top:36%;animation-delay:-15s!important;transform:scale(.65)}
@keyframes adxFly{from{margin-inline-start:0}to{margin-inline-start:calc(100vw + 80px)}}
[dir=rtl] .adx-bird{inset-inline-start:auto;inset-inline-end:-40px}
[dir=rtl] .adx-bird{animation-name:adxFlyR!important}
@keyframes adxFlyR{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 80px))}}

/* المسجد — واضح في أسفل الشاشة وخلف المحتوى */
.adx-glow{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 100%,color-mix(in srgb,var(--glow) 50%,transparent),transparent 70%)}
.adx-floor{position:absolute;left:0;right:0;bottom:0;height:5%;background:var(--mosque);z-index:1;pointer-events:none}
.adx-mosque{position:absolute;left:50%;bottom:0;width:100%;max-width:700px;height:auto;aspect-ratio:400/220;transform:translateX(-50%);pointer-events:none;z-index:1}
.adx-mosque .body{fill:var(--mosque)}
.adx-mosque .trim{fill:none;stroke:var(--glow);stroke-width:.8;opacity:.55}
.adx-mosque .win{fill:var(--glow);animation:adxWin 3.6s ease-in-out infinite}
.adx-mosque .win.w2{animation-delay:-1.2s}.adx-mosque .win.w3{animation-delay:-2.4s}
@keyframes adxWin{0%,100%{opacity:.55}50%{opacity:1}}
.adx-mosque .cres{fill:var(--glow);filter:drop-shadow(0 0 4px var(--glow))}
.adx-mosque .water{fill:url(#adxWater)}
.adx-lantern{position:absolute;top:0;width:2px;height:70px;background:#ffffff40;transform-origin:50% 0;animation:adxSwing 5s ease-in-out infinite;display:none;z-index:2}
.adx-lantern::after{content:"";position:absolute;left:-9px;bottom:-22px;width:20px;height:26px;border-radius:6px 6px 10px 10px;background:linear-gradient(180deg,#ffd978,#ff9d2e);box-shadow:0 0 24px 8px #ffb84d88}
.adx-lantern{height:44px}.adx-lantern.l1{inset-inline-start:3%;height:52px}.adx-lantern.l2{inset-inline-end:16%;height:34px;animation-delay:-1.6s}.adx-lantern.l3{inset-inline-end:3%;height:66px;animation-delay:-3s}.adx-lantern.l4{display:none!important}
.adx-maghrib .adx-lantern,.adx-isha .adx-lantern{display:block}
@keyframes adxSwing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* المحتوى */
.adx-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-start:12px;z-index:6;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff33;background:#00000045;color:#fff;font-size:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.adx-snd{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-end:12px;z-index:6;height:42px;padding:0 14px;border-radius:21px;border:1px solid #ffffff33;background:#00000045;color:#fff;font-size:13px;font-weight:800;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none}
.adx-snd.show{display:inline-flex;align-items:center;gap:6px}
.adx-scroll{position:absolute;inset:0;z-index:4;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(70px + env(safe-area-inset-top,0px)) 18px 0;text-align:center;display:flex;flex-direction:column;align-items:center;background:none!important}
.adx-hero{width:100%;max-width:440px;min-height:calc(100dvh - 70px - env(safe-area-inset-top,0px));padding-bottom:calc(26dvh + 10px);display:flex;flex-direction:column;align-items:center;gap:6px}
.adx-chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;padding:6px 16px;border-radius:99px;background:#ffffff1f;border:1px solid #ffffff2e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 2px 8px #0006}
.adx-title{margin:4px 0 0;font-size:52px;font-weight:900;line-height:1.15;letter-spacing:.5px;text-shadow:0 4px 22px #0009;animation:adxTitle 3.4s ease-in-out infinite}
@keyframes adxTitle{0%,100%{text-shadow:0 4px 22px #0009,0 0 0 #fff0}50%{text-shadow:0 4px 22px #0009,0 0 34px color-mix(in srgb,var(--glow) 70%,transparent)}}
.adx-time{font-size:34px;font-weight:800;text-shadow:0 2px 14px #0008;direction:ltr;display:inline-flex;align-items:baseline;gap:8px}
.adx-time small{font-size:15px;font-weight:700;opacity:.9}
.adx-sub{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:13px;opacity:.92;text-shadow:0 2px 8px #0009}
.adx-takbir{font-family:'Amiri','Noto Naskh Arabic',serif;font-size:22px;font-weight:700;margin:4px 0 2px;text-shadow:0 2px 12px #000a;animation:adxFade 4s ease-in-out infinite}
@keyframes adxFade{0%,100%{opacity:.7}50%{opacity:1}}
.adx-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;padding:6px 14px;border-radius:99px;background:#00000040;border:1px solid #ffffff26}
.adx-eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.adx-eq i{width:3px;background:var(--glow);border-radius:2px;animation:adxEq 1s ease-in-out infinite}
.adx-eq i:nth-child(2){animation-delay:-.3s}.adx-eq i:nth-child(3){animation-delay:-.6s}.adx-eq i:nth-child(4){animation-delay:-.15s}
@keyframes adxEq{0%,100%{height:4px}50%{height:16px}}
.adx-hero .adh-main{margin-top:8px}
.adx-pv{font-size:12.5px;font-weight:700;padding:10px 14px;border-radius:14px;background:#00000050;border:1px dashed #ffffff55;margin-top:8px}
.adx-hint{margin-top:auto;padding:14px 0 6px;font-size:12px;opacity:.85;animation:adxHint 2.2s ease-in-out infinite;text-shadow:0 2px 8px #000a}
@keyframes adxHint{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-6px);opacity:1}}
.adx-cards{width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;padding:10px 0 calc(30px + env(safe-area-inset-bottom,0px))}
.adx .adh-card{background:#070b1ccc;border-color:#ffffff30}
.adx .adh-card p{font-size:19px}
.adx .adh-close{align-self:center}
@media (min-width:700px){.adx-scroll{padding-inline:calc(50% - 230px)}}
@media (prefers-reduced-motion:reduce){.adx *{animation:none!important}}

/* ===================== 3) المتجر — بطاقات الخلفيات الجديدة ===================== */
.bg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.bg-card{position:relative;border-radius:20px;overflow:hidden;border:2px solid transparent;background:var(--card);box-shadow:var(--shadow);cursor:pointer}
.bg-card.active{border-color:var(--primary)}
.bg-prev{height:110px;position:relative;overflow:hidden}
.bg-prev .st{position:absolute;inset:0;background-repeat:repeat}
.bg-meta{padding:9px 10px 11px}
.bg-meta b{display:block;font-size:13px}
.bg-meta small{font-size:11px;color:var(--muted)}
.bg-badge{position:absolute;top:8px;inset-inline-start:8px;font-size:10px;font-weight:900;padding:3px 9px;border-radius:99px;background:#000a;color:#fff}
.bg-badge.gold{background:linear-gradient(135deg,#f3d675,#b98512);color:#3a2600}
.bg-badge.free{background:#16a34a}
body.has-bg{background:var(--app-bg)!important;background-attachment:fixed!important;background-size:auto,cover!important}
body.has-bg .app{background:transparent}
body.has-bg .screen .card,body.has-bg .screen .lrow{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ===================== 4) قصص الأنبياء v2 ===================== */
.st-head{position:relative;border-radius:24px;overflow:hidden;min-height:150px;margin-bottom:12px;box-shadow:var(--shadow);color:#fff}
.st-head-art{position:absolute;inset:0}.st-head-art svg{width:100%;height:100%;display:block}
.st-head-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 0,#000a 100%)}
.st-head-in{position:relative;padding:22px 18px 16px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;min-height:150px}
.st-head-in h1{margin:0;font-size:28px;color:#fff;text-shadow:0 3px 14px #000a}
.st-head-in .eyebrow{color:#ffe9a8}
.st-prog{height:7px;border-radius:99px;background:#ffffff40;overflow:hidden}.st-prog i{display:block;height:100%;background:linear-gradient(90deg,#f3d675,#fff);border-radius:99px;transition:width .4s}
.st-head-in small{font-size:12px;opacity:.9}
.st-resume{width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:18px;padding:12px 14px;margin:10px 0;text-align:right;box-shadow:var(--shadow)}
.st-resume span{font-size:26px}.st-resume div{flex:1}.st-resume b{display:block;font-size:14px}.st-resume small{color:var(--muted);font-size:11px}
.st-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
.st-card{border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.st-card:active{transform:scale(.97)}
.st-art{position:relative;height:104px;overflow:hidden}.st-art svg{width:100%;height:100%;display:block}
.st-emoji{position:absolute;bottom:6px;inset-inline-start:10px;font-size:26px;filter:drop-shadow(0 2px 6px #0008)}
.st-emoji.big{position:static;font-size:40px}
.st-n{position:absolute;top:8px;inset-inline-end:10px;font-size:12px;font-weight:900;color:#fff;background:#0007;border-radius:99px;padding:2px 9px}
.st-done{position:absolute;top:8px;inset-inline-start:10px;width:22px;height:22px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.st-body{padding:10px 12px 12px}.st-body h3{margin:0 0 3px;font-size:15px}.st-body small{display:block;color:var(--muted);font-size:10.5px;line-height:1.6;min-height:34px}
.st-meta{display:flex;gap:8px;margin-top:6px;font-size:11px;color:var(--primary);font-weight:800}
.st-read{display:block}
.st-banner{position:relative;border-radius:24px;overflow:hidden;height:210px;box-shadow:var(--shadow);margin:6px 0 10px}
.st-banner svg{width:100%;height:100%;display:block}
.st-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#000b 100%)}
.st-banner-in{position:absolute;inset:auto 0 0 0;z-index:2;padding:16px 18px;color:#fff;display:flex;flex-direction:column;gap:2px}
.st-banner-in h1{margin:0;font-size:30px;color:#fff;text-shadow:0 3px 14px #000a}.st-banner-in small{font-size:12.5px;opacity:.92}
.st-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.st-chips span{font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:99px;background:var(--soft);color:var(--text)}
.st-ctrl{display:flex;gap:8px;position:sticky;top:78px;z-index:5;padding:8px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.st-ctrl .btn:first-child{flex:1}
.st-chaps{display:flex;flex-direction:column;gap:14px;margin:8px 0}
.st-chap{border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:box-shadow .3s,border-color .3s}
.st-chap.playing{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent),var(--shadow)}
.st-chap-art{position:relative;height:130px}.st-chap-art svg{width:100%;height:100%;display:block}
.st-chap-n{position:absolute;top:10px;inset-inline-start:12px;width:30px;height:30px;border-radius:50%;background:#000a;color:#fff;display:grid;place-items:center;font-size:14px}
.st-chap-body{padding:14px 16px 16px}.st-chap-body h2{margin:0 0 8px;font-size:18px;color:var(--primary)}
.st-chap-body p{margin:0 0 12px;font-size:16px;line-height:2.1}
@media(max-width:390px){.st-grid{grid-template-columns:1fr}}

.adx-rays{display:none!important}
.adx-dhuhr .adx-hero,.adx-asr .adx-hero,.adx-sunrise .adx-hero{text-shadow:0 2px 12px #06304f99}
.adx-dhuhr .adx-chip,.adx-asr .adx-chip{background:#00000030}