/* 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
   Two states, not one.
   .visible is the flourish: a tile arriving at the fold waits out its stagger
   and fades up over .65s. .lit is the plain truth: the reader has already
   reached this, so it is simply there, stagger and transition both switched
   off. Everything that rescues a stray reveal now uses .lit, because a rescue
   that then waits out a delay and a fade is not a rescue, it is the same blank
   screen arriving late.

   revealFloor is the floor under all of it. The stylesheet hides every reveal
   and hands the job of un-hiding it to noor-fx.js. If that file never runs
   (blocked, 404, thrown on an older phone) nothing sets data-fx, no observer
   is ever built, and every tile on the page stays at opacity 0 forever. Three
   seconds later the animation lights them anyway. Text a reader cannot read is
   not a slower animation, it is a broken page. */
.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);animation:revealFloor 1ms linear 3s forwards}
html[data-fx] .reveal{animation:none}
@keyframes revealFloor{to{opacity:1;transform:none}}
.reveal.visible{opacity:1;transform:none}
.reveal.lit{opacity:1;transform:none;transition:none;transition-delay:0s;animation: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. A cell holds the tile and, beside it in the tree, the anchor to
   the entity's own room (/companion, /character, /place), so the tap that
   opens the modal and the link that leaves the page are two controls, not
   one inside the other. */
.tile-cell{position:relative;display:grid}
.tile-room{position:absolute;top:14px;right:14px;z-index:6;display:inline-flex;align-items:center;min-height:30px;padding:0 .7rem;border-radius:999px;
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#FFFEF7;
  background:rgba(20,16,10,.62);border:1px solid rgba(233,200,106,.45)}
.tile-room:hover,.tile-room:focus-visible{background:rgba(201,162,39,.92);color:#1A160F;border-color:#E9C86A;outline:none}
/* The anchor is a reveal of its own, with the tile's delay, so it arrives by
   whichever path the tile takes (the flourish, .lit, or the floor) and sets
   no transition of its own that would override the reveal's. It used to be
   hidden by :has() until the tile was .lit, and a tile that arrived by the
   flourish is .visible and never .lit, so its anchor never showed. */
[dir="rtl"] .tile-room{right:auto;left:14px}
.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;animation: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}
}