/* NOXILIS DZ v7.19 — قفل الواجهة، إصلاح الرأس، تعريف التقنيات، منصة الآيات */
html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-x:none}
html,body,body *{touch-action:pan-x pan-y}
main,section,.wrap,.proj,footer{min-width:0;max-width:100%}
img,svg,video{max-width:100%}
header .wrap{flex-wrap:wrap}
.ctrl{max-width:100%}
@media(max-width:560px){
  header .wrap{padding-inline:.7rem;gap:.35rem .5rem}
  .brand{flex:0 1 auto;min-width:0;max-width:44%}
  .brand img{max-width:100%;height:auto}
  .ctrl{flex:0 1 auto;min-width:0;gap:.22rem;flex-wrap:nowrap}
  .ctrl button,.langs button{min-width:2.2rem!important;padding-inline:.25rem!important}
  .langs{gap:.22rem;flex-wrap:nowrap}
  .langs .lang-label{font-size:.66rem}
  .services-row{flex-wrap:wrap;max-width:100%}
  .services-strip{min-width:0;max-width:100%;flex-wrap:wrap;row-gap:.1rem}
}
@media(max-width:360px){.brand{max-width:38%}.ctrl .theme{min-width:2rem!important}}

/* ---------- تعريف التقنيات ---------- */
#tech dl dd .tech-chip{font:inherit;font-size:.86rem;font-weight:700;line-height:1.8;color:var(--ink);cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:.2rem .8rem;background:var(--card2,var(--chip));display:inline-flex;align-items:center;gap:.35rem;transition:transform .18s,border-color .18s,box-shadow .18s}
#tech dl dd .tech-chip::after{content:"i";font:italic 700 .68rem/1 Georgia,serif;display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--accent);color:var(--on,#fff)}
#tech dl dd .tech-chip:hover,#tech dl dd .tech-chip:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,119,184,.18);transform:translateY(-1px)}
.tech-hint{margin:.2rem 0 0;font-size:.82rem;color:var(--muted)}
.tech-dlg{border:0;padding:0;background:transparent;max-width:min(94vw,30rem);width:100%;color:var(--ink);overflow:visible}
.tech-dlg::backdrop{background:rgba(5,12,20,.62);backdrop-filter:blur(3px)}
.tech-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:1.4rem;padding:1.4rem 1.25rem 1.2rem;box-shadow:0 24px 70px rgba(0,0,0,.4);max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;animation:tpop .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tpop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.tech-x{position:absolute;inset-block-start:.6rem;inset-inline-end:.7rem;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:1.3rem;cursor:pointer;line-height:1}
.tech-badge{display:inline-grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:1rem;background:linear-gradient(135deg,var(--accent),var(--pop));color:#fff;font-weight:800;font-size:1.05rem;margin-bottom:.4rem}
.tech-card h2{margin:.1rem 0 .1rem;font-size:1.5rem;line-height:1.5}
.tech-tag{margin:0 0 .8rem;color:var(--muted);font-size:.95rem}
.tech-card h3{margin:.8rem 0 .15rem;font-size:1rem;color:var(--accent)}
.tech-card p{margin:0 0 .3rem;line-height:1.9}
.tech-by{margin-top:1rem!important;padding-top:.7rem;border-top:1px dashed var(--line);font-size:.9rem;color:var(--muted)}
.tech-by a{display:inline-block;font-weight:800;letter-spacing:.06em;color:var(--pop);text-decoration:none;border-bottom:2px solid currentColor;direction:ltr;unicode-bidi:isolate;padding-inline:.15rem}
.tech-by a:hover{background:rgba(225,29,72,.08)}

/* ---------- نافذة التحديث ---------- */
.site-update-notice{border:0;padding:0;background:transparent;max-width:min(92vw,28rem);width:100%;color:var(--ink)}
.site-update-notice::backdrop{background:rgba(5,12,20,.62);backdrop-filter:blur(3px)}
.site-update-panel{background:var(--surface);border:1px solid var(--line);border-radius:1.4rem;padding:1.3rem 1.2rem;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.site-update-icon{font-size:1.6rem;color:var(--pop)}
.site-update-kicker{margin:.1rem 0;color:var(--muted);font-size:.8rem;letter-spacing:.12em;direction:ltr}
.site-update-panel h2{margin:.2rem 0 .4rem;font-size:1.45rem}
.site-update-copy{margin:.3rem 0}
.site-update-notes{margin:.2rem 0 .8rem;padding-inline-start:1.2rem;line-height:1.85}
.site-update-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.site-update-actions button{font:inherit;font-weight:700;min-height:2.75rem;padding:.3rem 1rem;border-radius:.8rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.site-update-actions .site-update-dismiss{background:var(--accent);border-color:var(--accent);color:var(--on,#fff)}

/* ---------- منصة الآيات ---------- */
.dhk{display:none!important}
.vs{--ruby:#3c0019;--band1:#5d0027;--band2:#830037;--gold:#f1d27a;--gold2:#c8963a;max-width:44rem;margin:.6rem auto 1.4rem;padding-inline:.6rem}
.vs-card{border-radius:1.4rem;overflow:hidden;background:var(--ruby);box-shadow:0 18px 44px rgba(60,0,25,.45),0 0 0 1px rgba(241,210,122,.45)}
.vs-stage{position:relative}
.vs-art{position:relative;aspect-ratio:736/414;background:var(--ruby) url(../img/quran-banner.webp) center/cover no-repeat}
.vs-wheel{position:absolute;left:67%;top:50%;width:41%;aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.vs-wheel::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(255,196,90,.42) 0%,rgba(255,150,60,.16) 42%,transparent 68%);animation:vsglow 4.6s ease-in-out infinite}
.vs-wheel svg.ly{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vs-wheel .rg{animation:vsspin 70s linear infinite}
.vs-wheel .rg.b{animation-duration:46s;animation-direction:reverse}
.vs-wheel .rg.c{animation-duration:30s}
.vs-wheel .rg.d{animation-duration:19s;animation-direction:reverse}
.vs-wheel .gem{animation:vstwk 2.4s ease-in-out infinite}
.vs-wheel .gem:nth-child(3n){animation-delay:.7s}.vs-wheel .gem:nth-child(3n+1){animation-delay:1.5s}
.vs-pulse{position:absolute;left:67%;top:50%;width:41%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid rgba(241,210,122,.7);opacity:0;pointer-events:none}
.vs[data-state="playing"] .vs-wheel .rg{animation-duration:16s}
.vs[data-state="playing"] .vs-wheel .rg.b{animation-duration:10s}
.vs[data-state="playing"] .vs-wheel .rg.c{animation-duration:6.5s}
.vs[data-state="playing"] .vs-wheel .rg.d{animation-duration:4s}
.vs[data-state="playing"] .vs-wheel::before{animation-duration:1.9s}
.vs[data-state="playing"] .vs-pulse{animation:vsring 2.6s ease-out infinite}
.vs[data-state="playing"] .vs-pulse.two{animation-delay:1.3s}
@keyframes vsspin{to{transform:rotate(360deg)}}
@keyframes vsglow{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.07)}}
@keyframes vstwk{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes vsring{0%{opacity:.8;transform:scale(.55)}100%{opacity:0;transform:scale(1.35)}}
.vs-play{position:absolute;left:67%;top:50%;translate:-50% -50%;width:clamp(3.4rem,11vw,4.6rem);aspect-ratio:1;border-radius:50%;border:2px solid #ffe9a8;background:radial-gradient(circle at 35% 30%,#ffe7a0,#d9a441 55%,#8a5a12);color:#4a0020;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 5px rgba(60,0,25,.55),0 8px 26px rgba(0,0,0,.55),0 0 30px rgba(255,196,90,.6);transition:left .6s cubic-bezier(.4,.1,.2,1),top .6s cubic-bezier(.4,.1,.2,1),width .6s,box-shadow .3s;z-index:3}
.vs-play svg{width:46%;height:46%;fill:currentColor}
.vs-play .i-pause{display:none}
.vs[data-state="idle"] .vs-play{animation:vsbeat 2.2s ease-in-out infinite}
@keyframes vsbeat{0%,100%{box-shadow:0 0 0 5px rgba(60,0,25,.55),0 8px 26px rgba(0,0,0,.55),0 0 22px rgba(255,196,90,.5)}50%{box-shadow:0 0 0 9px rgba(60,0,25,.35),0 8px 26px rgba(0,0,0,.55),0 0 46px rgba(255,214,120,.95)}}
.vs[data-state="playing"] .vs-play{left:92%;top:11%;width:2.5rem}
.vs[data-state="playing"] .vs-play .i-play{display:none}
.vs[data-state="playing"] .vs-play .i-pause{display:block}
.vs-play:focus-visible,.vs-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vs-band{position:absolute;z-index:2;left:41%;right:4%;top:31.5%;height:37%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.2rem .4rem;overflow:hidden}
.vs-hint{margin:0;color:rgba(255,233,168,.9);font-size:clamp(.82rem,2.4vw,1rem);line-height:1.8;transition:opacity .4s}
.vs[data-state="playing"] .vs-hint,.vs[data-state="paused"] .vs-hint{display:none}
.vs-ayah{margin:0;font-family:"Amiri Quran","Scheherazade New","Noto Naskh Arabic","Traditional Arabic",serif;font-size:1.5rem;line-height:2;font-weight:400;background:linear-gradient(180deg,#fff4c9 0%,#f1d27a 48%,#d79c3b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75));text-wrap:balance;overflow-wrap:anywhere;max-width:100%;transition:opacity .6s}
.vs-ayah.typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-inline-start:.25rem;vertical-align:-.15em;background:#ffe9a8;box-shadow:0 0 10px #ffd36b;animation:vscaret .7s steps(1) infinite}
@keyframes vscaret{50%{opacity:0}}
.vs-ayah.out{opacity:0}
.vs-ref{margin:.05rem 0 0;color:#ffe3a1;font-size:.88rem;opacity:0;transition:opacity .8s;min-height:1.4em;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.vs-ref.show{opacity:.95}
.vs-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:.7rem .6rem;background:linear-gradient(180deg,#4d0021,#3c0019)}
.vs-btn{font:inherit;font-weight:700;font-size:.92rem;min-height:2.75rem;padding:.25rem 1.1rem;border-radius:999px;border:1px solid rgba(241,210,122,.55);background:rgba(241,210,122,.08);color:#ffe9a8;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:background .2s,transform .2s}
.vs-btn:hover{background:rgba(241,210,122,.2)}
.vs-btn-gold{background:linear-gradient(135deg,#f6dc8c,#c8963a);color:#3c0019;border-color:#ffe9a8}
.vs-btn-gold:hover{background:linear-gradient(135deg,#ffeaa8,#d7a64a)}
@media(max-width:599.98px){
  .vs-band{position:static;height:auto;min-height:8.2rem;padding:.9rem .9rem 1rem;background:linear-gradient(90deg,var(--band1),#6c002f 55%,var(--band2));border-block:1px solid rgba(241,210,122,.45)}
  .vs-ayah{font-size:1.45rem;line-height:2.05}
  .vs[data-state="playing"] .vs-play{left:90%;top:14%;width:2.4rem}
}
@media(prefers-reduced-motion:reduce){
  .vs-wheel .rg,.vs-wheel::before,.vs-pulse,.vs-play,.vs-wheel .gem{animation-duration:140s!important;animation-iteration-count:infinite}
  .vs-pulse{animation:none!important}
}

/* ---------- تذييل وروابط ---------- */
footer .legal{gap:.1rem 1rem}
.mushaf-cta{display:inline-flex}
.nd-line{margin:.1rem 0 .6rem}
.nd-link{display:inline-block;font-weight:800;letter-spacing:.14em;color:var(--pop);text-decoration:none;padding:.15rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--chip);direction:ltr}
.nd-link:hover{border-color:var(--pop)}
@media(min-width:600px){
  .vs-band::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at center,rgba(42,0,18,.88) 0%,rgba(42,0,18,.62) 58%,transparent 92%);opacity:0;transition:opacity .6s}
  .vs[data-state="playing"] .vs-band::before,.vs[data-state="paused"] .vs-band::before{opacity:1}
  .vs[data-state="playing"] .vs-wheel,.vs[data-state="paused"] .vs-wheel{opacity:.5;transition:opacity .6s}
  .vs-ayah{font-weight:700}
}
.service-status-pill a{color:inherit;text-decoration:none;font-weight:800}
