/* NOOR hub pages (Characters · Places · Words) shared styles */
:root{--parchment:#FFFEF7;--ink:#2C2416;--gold:#C9A227;--gold-hi:#E9C86A;--sage:#8BA888;--deep:#14100A}
html{scroll-behavior:smooth}
body{background:var(--parchment);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
.font-amiri{font-family:Amiri,serif}
::selection{background:rgba(201,162,39,.28)}
#progress{position:fixed;top:0;left:0;height:2.5px;width:0%;z-index:70;background:linear-gradient(90deg,#C9A227,#E9C86A 60%,#8BA888);box-shadow:0 0 10px rgba(201,162,39,.55)}
#site-header.scrolled{box-shadow:0 6px 24px rgba(26,22,15,.08)}

/* hero */
#chero{position:relative;overflow:hidden;background:linear-gradient(180deg,#04060F 0%,#080D22 40%,#101530 66%,#232038 84%,#4A3D26 100%);isolation:isolate}
#chero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hub-crescent{position:absolute;top:12%;inset-inline-end:7%;width:110px;height:110px;z-index:1;pointer-events:none;opacity:.9;filter:drop-shadow(0 0 20px rgba(244,227,161,.35));animation:hubMoon 12s ease-in-out infinite alternate}
@keyframes hubMoon{from{transform:translate3d(0,0,0) rotate(-14deg)}to{transform:translate3d(-7px,10px,0) rotate(-11deg)}}
.hero-fade{position:absolute;inset:auto 0 0 0;height:36%;z-index:2;background:linear-gradient(180deg,transparent,var(--parchment));pointer-events:none}
.shimmer-gold{background:linear-gradient(100deg,#8a7020 8%,#C9A227 26%,#F4E3A1 42%,#C9A227 58%,#8a7020 92%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5.5s linear infinite}
@keyframes shimmer{to{background-position:-220% center}}

/* reveals */
.reveal{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
.reveal.visible{opacity:1;transform:none}

/* section gates */
.sgate{position:relative;overflow:hidden;border-radius:18px;color:#FFFEF7;padding:20px 22px;isolation:isolate}
.sgate::after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,254,247,.15);border-radius:12px;pointer-events:none}
.sg-sahaba{background:radial-gradient(120% 140% at 22% 0%,rgba(96,132,214,.34),transparent 55%),linear-gradient(140deg,#141B2E,#22304F)}
.sg-angel{background:radial-gradient(120% 140% at 50% -10%,rgba(233,200,106,.35),transparent 55%),linear-gradient(140deg,#2C2416,#4A3A1E)}
.sg-jinn{background:radial-gradient(120% 140% at 78% 0%,rgba(124,58,237,.32),transparent 55%),linear-gradient(140deg,#160F22,#2A1B45)}
.sg-animal{background:radial-gradient(120% 140% at 30% 0%,rgba(139,168,136,.4),transparent 55%),linear-gradient(140deg,#1F241C,#31402C)}
.sg-beast{background:radial-gradient(1.4px 1.4px at 15% 32%,rgba(255,253,242,.8),transparent 55%),radial-gradient(1.3px 1.3px at 72% 20%,rgba(255,253,242,.7),transparent 55%),radial-gradient(120% 150% at 50% -15%,rgba(239,68,68,.22),transparent 58%),linear-gradient(150deg,#120909,#2A1212)}
.sg-sanctuary{background:radial-gradient(120% 140% at 50% -10%,rgba(233,200,106,.4),transparent 55%),linear-gradient(140deg,#2C2416,#4A3A1E)}
.sg-mountain{background:radial-gradient(120% 140% at 26% 0%,rgba(139,168,136,.36),transparent 55%),linear-gradient(140deg,#20261E,#33402E)}
.sg-city{background:radial-gradient(120% 140% at 74% 0%,rgba(96,132,214,.34),transparent 55%),linear-gradient(140deg,#141B2E,#243252)}
.sg-water{background:radial-gradient(120% 140% at 40% -10%,rgba(94,160,180,.36),transparent 55%),linear-gradient(140deg,#0F1E24,#1C3540)}
.sg-end{background:radial-gradient(1.4px 1.4px at 18% 30%,rgba(255,253,242,.8),transparent 55%),radial-gradient(1.3px 1.3px at 70% 22%,rgba(255,253,242,.7),transparent 55%),radial-gradient(120% 150% at 50% -15%,rgba(124,58,237,.26),transparent 58%),linear-gradient(150deg,#0B0912,#1A1030)}
.sg-word{background:radial-gradient(120% 140% at 50% -10%,rgba(233,200,106,.36),transparent 55%),radial-gradient(1.3px 1.3px at 22% 34%,rgba(255,253,242,.7),transparent 55%),radial-gradient(1.2px 1.2px at 76% 20%,rgba(255,253,242,.65),transparent 55%),linear-gradient(150deg,#171208,#33290F)}

/* tiles */
.tile{position:relative;border-radius:18px;min-height:235px;cursor:pointer;-webkit-tap-highlight-color:transparent;outline-offset:3px}
.tile-inner{position:relative;overflow:hidden;border-radius:18px;min-height:235px;height:100%;isolation:isolate;transform:translateZ(0);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;box-shadow:0 4px 12px rgba(26,22,15,.1)}
.tile:hover .tile-inner{box-shadow:0 20px 40px rgba(26,22,15,.22)}
.tile-bg{position:absolute;inset:0;z-index:0}
.tile-seal{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:0 18px;text-align:center}
.tile-seal span{font-family:Amiri,serif;font-size:4.6rem;line-height:1.15;color:rgba(233,200,106,.14);text-shadow:0 0 34px rgba(233,200,106,.18);transition:color .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.tile-seal.seal-sm span{font-size:2.1rem;line-height:1.6}
.tile:hover .tile-seal span{color:rgba(233,200,106,.27);transform:scale(1.05)}
.tile-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(170deg,rgba(20,16,10,.32) 0%,rgba(20,16,10,.12) 45%,rgba(20,16,10,.86) 100%)}
.tile-frame{position:absolute;inset:8px;z-index:3;border:1px solid rgba(233,200,106,.2);border-radius:12px;pointer-events:none;transition:border-color .35s}
.tile:hover .tile-frame{border-color:rgba(233,200,106,.5)}
.tile-shine{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,250,225,.14) 46%,rgba(255,250,225,.02) 54%,transparent 66%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.tile:hover .tile-shine{transform:translateX(130%)}
.tile-content{position:relative;z-index:4;height:100%;min-height:235px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;color:#FFFEF7;text-shadow:0 2px 7px rgba(0,0,0,.45)}
.chip{display:inline-flex;align-items:center;padding:.16rem .55rem;border-radius:9999px;font-size:.6rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.chip-sahaba{background:rgba(96,132,214,.2);color:#B7C8F2;border:1px solid rgba(96,132,214,.36)}
.chip-angel{background:rgba(233,200,106,.16);color:#F0D878;border:1px solid rgba(233,200,106,.32)}
.chip-jinn{background:rgba(124,58,237,.2);color:#CDB6F7;border:1px solid rgba(124,58,237,.4)}
.chip-animal{background:rgba(139,168,136,.2);color:#B9D3B6;border:1px solid rgba(139,168,136,.36)}
.chip-beast{background:rgba(239,68,68,.16);color:#F5A9A9;border:1px solid rgba(239,68,68,.34)}
.chip-sanctuary{background:rgba(233,200,106,.16);color:#F0D878;border:1px solid rgba(233,200,106,.32)}
.chip-mountain{background:rgba(139,168,136,.2);color:#B9D3B6;border:1px solid rgba(139,168,136,.36)}
.chip-city{background:rgba(96,132,214,.2);color:#B7C8F2;border:1px solid rgba(96,132,214,.36)}
.chip-water{background:rgba(94,160,180,.22);color:#A9D6E4;border:1px solid rgba(94,160,180,.4)}
.chip-end{background:rgba(124,58,237,.2);color:#CDB6F7;border:1px solid rgba(124,58,237,.4)}
.chip-word{background:rgba(233,200,106,.18);color:#F0D878;border:1px solid rgba(233,200,106,.36)}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* seal/tile patterns */
.pattern-sahaba{background:radial-gradient(circle at 50% 38%,#3b82f62e 0%,transparent 52%),linear-gradient(135deg,#141B2E,#232C40)}
.pattern-angel{background:radial-gradient(circle at 42% 30%,#C9A22744 0%,transparent 52%),linear-gradient(145deg,#1A160F,#33290F)}
.pattern-jinn{background:radial-gradient(ellipse at 60% 68%,#7c3aed33 0%,transparent 55%),linear-gradient(160deg,#160F22,#241638)}
.pattern-animal{background:radial-gradient(circle at 32% 60%,#8BA88842 0%,transparent 52%),linear-gradient(180deg,#1F241C,#2C3A28)}
.pattern-beast{background:radial-gradient(circle at 50% 22%,#C9A22722 0%,transparent 46%),linear-gradient(200deg,#120909,#241010)}
.pattern-prophet{background:radial-gradient(circle at 50% 0%,#C9A22733 0%,transparent 45%),linear-gradient(180deg,#1A160F,#2C2416)}
.pl-sanctuary{background:radial-gradient(circle at 50% 30%,#C9A22744 0%,transparent 52%),linear-gradient(150deg,#1F1808,#3A2E12)}
.pl-mountain{background:radial-gradient(circle at 34% 62%,#8BA88840 0%,transparent 52%),linear-gradient(170deg,#1C221A,#2E3A2A)}
.pl-city{background:radial-gradient(circle at 66% 34%,#3b82f630 0%,transparent 52%),linear-gradient(140deg,#131A2C,#20294A)}
.pl-water{background:radial-gradient(ellipse at 50% 70%,#5EA0B43D 0%,transparent 56%),linear-gradient(180deg,#0E1C22,#1A313C)}
.pl-end{background:radial-gradient(circle at 50% 20%,#7c3aed2e 0%,transparent 48%),linear-gradient(200deg,#0B0912,#191028)}
.pl-word{background:radial-gradient(circle at 50% 34%,#C9A22740 0%,transparent 54%),linear-gradient(160deg,#171208,#2E2410)}

/* section nav */
.section-nav a{transition:color .2s,border-color .2s,background .2s}
.section-nav a.active{color:#2C2416;border-color:#C9A227;background:rgba(201,162,39,.12)}

/* modal */
.modal-backdrop{position:fixed;inset:0;z-index:60;background:radial-gradient(120% 100% at 50% 0%,rgba(30,24,12,.55),rgba(12,10,6,.82));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:flex-start;justify-content:center;padding:1rem;padding-top:2rem;opacity:0;pointer-events:none;transition:opacity .32s;overflow-y:auto;overscroll-behavior:contain}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal{background:var(--parchment);border-radius:22px;max-width:42rem;width:100%;margin-bottom:2.6rem;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,39,.25);transform:translateY(26px) scale(.975);transition:transform .42s cubic-bezier(.22,1,.36,1);position:relative}
.modal-backdrop.open .modal{transform:translateY(0) scale(1)}
@media(max-width:640px){.modal-backdrop{padding:0;padding-top:max(3.2rem,env(safe-area-inset-top))}.modal{border-radius:22px 22px 0 0;margin-bottom:0;min-height:calc(100vh - 3.2rem)}}
.modal-girih{position:absolute;top:0;left:0;right:0;height:10px;z-index:2;background:repeating-linear-gradient(90deg,rgba(201,162,39,.85) 0 14px,rgba(30,58,138,.85) 14px 18px,rgba(201,162,39,.85) 18px 32px,rgba(139,168,136,.85) 32px 36px);opacity:.9}
.modal-hero{height:170px;position:relative;overflow:hidden}
.modal-hero.tall{height:210px}
.modal-seal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 22px;text-align:center}
.modal-seal span{font-family:Amiri,serif;font-size:5rem;line-height:1.15;color:rgba(233,200,106,.16);text-shadow:0 0 40px rgba(233,200,106,.25)}
.modal-seal.seal-sm span{font-size:2.4rem;line-height:1.55}
.modal-body{padding:1.6rem 1.6rem 2.2rem}
@media(min-width:640px){.modal-body{padding:1.9rem 2.1rem 2.4rem}}
.mset{opacity:0;transform:translateY(14px);animation:msetIn .55s cubic-bezier(.22,1,.36,1) forwards}
.mset:nth-of-type(1){animation-delay:.05s}.mset:nth-of-type(2){animation-delay:.12s}.mset:nth-of-type(3){animation-delay:.19s}.mset:nth-of-type(4){animation-delay:.26s}.mset:nth-of-type(5){animation-delay:.33s}.mset:nth-of-type(6){animation-delay:.4s}.mset:nth-of-type(n+7){animation-delay:.47s}
@keyframes msetIn{to{opacity:1;transform:none}}
.sect-h{display:flex;align-items:center;gap:.6rem;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(44,36,22,.45);margin-bottom:.8rem}
.sect-h::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(201,162,39,.4),transparent)}
.sect-h .g{color:var(--gold)}
.modal-prose{font-size:15px;line-height:1.78;color:rgba(44,36,22,.9);white-space:pre-line}
.drop-cap::first-letter{float:left;font-family:Amiri,serif;font-size:2.9rem;line-height:.82;padding-inline-end:.38rem;color:var(--gold);font-weight:700}
.entity-link{color:#8a7020;font-weight:600;cursor:pointer;border:none;background:linear-gradient(180deg,transparent 72%,rgba(201,162,39,.3) 72%);padding:0;font-size:inherit;font-family:inherit;transition:color .18s,background .18s}
.entity-link:hover{color:#C9A227;background:linear-gradient(180deg,transparent 68%,rgba(201,162,39,.55) 68%)}
.word-ar{font-family:Amiri,serif;font-size:1.55rem;line-height:2;color:var(--ink);text-align:center;padding:1rem 1.2rem;background:linear-gradient(135deg,rgba(201,162,39,.08),rgba(30,58,138,.05));border:1px solid rgba(201,162,39,.35);border-radius:14px}
.word-translit{text-align:center;font-size:.8rem;color:#8a7020;font-weight:600;letter-spacing:.02em;margin-top:.55rem}
.word-meaning{text-align:center;font-size:.86rem;color:rgba(44,36,22,.75);margin-top:.3rem;font-style:italic}
.whennow li{display:flex;gap:.6rem;font-size:.85rem;line-height:1.6;color:rgba(44,36,22,.85)}
.whennow li+li{margin-top:.5rem}
.whennow .s{color:#5a7a58;flex:none;margin-top:.1rem}
.quran-card{border:1px solid rgba(201,162,39,.38);border-inline-start:3px solid rgba(201,162,39,.75);border-radius:14px;padding:1rem 1.1rem;background:linear-gradient(135deg,#FFFEF7,#FBF6E8)}
.quran-card+.quran-card{margin-top:.7rem}
.audio-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:9999px;background:var(--ink);color:var(--parchment);font-size:.66rem;font-weight:600;transition:background .2s,color .2s,box-shadow .2s;cursor:pointer;border:none}
.audio-btn:hover{background:#4A3D26}
.audio-btn.playing{background:linear-gradient(135deg,#C9A227,#E9C86A);color:#1A160F;box-shadow:0 0 0 4px rgba(201,162,39,.18)}
.hadith-item{border-inline-start:2.5px solid rgba(201,162,39,.5);padding:.55rem .9rem;background:rgba(201,162,39,.045);border-radius:0 10px 10px 0;font-size:.85rem;line-height:1.65;color:rgba(44,36,22,.85)}
.hadith-item+.hadith-item{margin-top:.55rem}
.hadith-src{display:inline-block;margin-top:.3rem;font-size:.66rem;font-weight:700;letter-spacing:.05em;color:#8a7020;background:rgba(201,162,39,.12);padding:.1rem .5rem;border-radius:999px}
.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:520px){.facts-grid{grid-template-columns:repeat(3,1fr)}}
.fact-item{background:linear-gradient(145deg,rgba(201,162,39,.07),rgba(30,58,138,.04));border:1px solid rgba(201,162,39,.2);border-radius:12px;padding:10px 12px;transition:transform .22s,border-color .22s}
.fact-item:hover{transform:translateY(-2px);border-color:rgba(201,162,39,.5)}
.noor-toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.noor-toast{background:rgba(26,22,15,.94);color:#FFFEF7;font-size:.8rem;padding:.55rem 1rem;border-radius:999px;border:1px solid rgba(201,162,39,.4);opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;max-width:88vw;text-align:center}
.noor-toast.show{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .mset{opacity:1;transform:none;animation:none}
}

/* v10: mobile section-nav rethink (Places submenu obstruction fix) */
@media(max-width:767px){
.section-nav{position:static !important;top:auto !important}
.section-nav>div{flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-top:.45rem;padding-bottom:.45rem;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.section-nav>div::-webkit-scrollbar{display:none}
.section-nav>div a{flex:none;font-size:.68rem;padding:.28rem .7rem}
}