/* Noor Quran V4.5 — presentation-only layer.
   No audio, surah, verse, synchronization, storage or playback data is changed. */
:root{
  --n45-ivory:#fff4dc;
  --n45-gold:#edcf91;
  --n45-gold-deep:#b78b46;
  --n45-night:#061915;
  --n45-glass:rgba(11,45,34,.77);
  --n45-motion:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
body{background:
 radial-gradient(ellipse 90% 55% at 53% -20%,#27513b 0%,transparent 70%),
 radial-gradient(circle at 2% 93%,#0d302a 0%,transparent 45%),
 #061612;
}
.aurora{opacity:.28;filter:blur(80px);animation:n45Aurora 18s ease-in-out infinite alternate}
.a2{animation-delay:-8s}
.main,.sidebar{box-shadow:0 18px 60px rgba(0,0,0,.16),inset 0 1px rgba(237,207,145,.045)}
.sidebar{border-color:rgba(204,179,118,.21);background:linear-gradient(160deg,rgba(15,46,34,.96),rgba(5,23,19,.96))}
.main{border-color:rgba(206,175,109,.2)}
.brand-icon{box-shadow:inset 0 0 0 3px #123c2b,0 0 24px #d6b5771a;border-color:#c8a768}
.topbar{background:linear-gradient(105deg,rgba(17,46,35,.83),rgba(7,25,21,.7));border-bottom-color:#bca1652a}
.topbar h1{letter-spacing:.02em}
.hero{
 background:
 radial-gradient(circle at 50% -60%,rgba(216,181,109,.25),transparent 53%),
 radial-gradient(ellipse at 10% 140%,rgba(16,91,67,.76),transparent 63%),
 linear-gradient(130deg,#123b2e,#0a2721 58%,#12382b);
 border:1px solid #a58c575e;
 border-radius:23px;
 box-shadow:inset 0 1px 0 #f1d3a21c,0 15px 36px #0003;
}
.hero:before,.hero:after{border-color:#cfb3712e;border-width:1px}
.hero-deco{opacity:.08}
.hero-content{z-index:1}
.hero-pill{background:rgba(221,191,123,.1);border-color:rgba(237,207,145,.24);color:#f5e8c7;letter-spacing:.025em}
.hero h2{color:var(--n45-ivory);text-shadow:0 2px 16px #0009,0 0 26px #dab26431}
.hero-metrics strong{color:#f3d69a}
.toolbar{border-bottom:1px solid rgba(214,177,106,.07);margin-bottom:8px}
.sm-btn,.btn,.icon-btn,.mode-pick{transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .28s ease,transform .28s var(--n45-motion),filter .28s ease}
.sm-btn:hover,.icon-btn:hover{border-color:#d2b47890;background:#254635}
.btn:hover{transform:translateY(-1px)}
.surah-item{transition:transform .22s var(--n45-motion),background .22s ease,border-color .22s ease,box-shadow .24s ease}
.surah-item:hover{transform:translateX(-3px)}
.surah-item.active{background:linear-gradient(110deg,#264b38,#18352a);border-color:#c4a36877;box-shadow:inset -3px 0 0 #d0ad69,0 7px 22px #0002}
.surah-item.active .surah-num{background:linear-gradient(130deg,#b99356,#ecd29a);color:#14291e;border-color:#f3d89d}
.surah-num{border-radius:12px}
.notice{border-radius:12px}
.reading{
 position:relative;
 isolation:isolate;
 padding:34px clamp(22px,4vw,52px) 44px;
 color:var(--n45-ivory);
 border:1px solid #b9a06988;
 border-radius:25px;
 background:
   radial-gradient(ellipse 100% 85% at 50% 0%,rgba(53,103,73,.26),transparent 90%),
   repeating-linear-gradient(115deg,transparent 0 30px,rgba(235,196,112,.012) 31px 32px),
   linear-gradient(165deg,rgba(21,57,41,.98),rgba(8,31,25,.98) 68%,rgba(7,24,21,.98));
 box-shadow:
   0 18px 48px #0006,
   inset 0 0 0 5px rgba(11,33,26,.88),
   inset 0 0 0 6px rgba(211,177,105,.27),
   inset 0 12px 50px rgba(214,176,94,.065);
 transition:border-color .3s ease,box-shadow .4s ease;
}
.reading:before,.reading:after{
 content:"";
 position:absolute;
 width:37px;height:37px;
 pointer-events:none;
 opacity:.79;
 z-index:2;
 filter:drop-shadow(0 0 3px #edc88533)
}
.reading:before{top:13px;right:13px;border-top:2px solid #dfbc77;border-right:2px solid #dfbc77;border-top-right-radius:13px}
.reading:after{bottom:13px;left:13px;border-bottom:2px solid #dfbc77;border-left:2px solid #dfbc77;border-bottom-left-radius:13px}
.reading-title{
 color:#e9c783;
 font-size:clamp(22px,2.6vw,31px);
 margin-bottom:14px;
 text-shadow:0 3px 10px #0008;
 position:relative
}
.reading-title:after{content:"◆   ❈   ◆";display:block;color:#c8a86c;font:400 10px/1.6 'Amiri',serif;letter-spacing:7px;opacity:.8;margin-top:2px}
.basmalah{font-size:clamp(27px,3vw,38px);color:#ffeaca;text-shadow:0 2px 12px #0008;margin-bottom:22px}
.verses{
 color:#f6edd6;
 font-size:var(--font-size);
 line-height:2.58;
 word-spacing:3px;
 text-shadow:0 1px 2px #0007;
 text-wrap:pretty;
}
.ayah{
 padding:4px 3px;
 border-radius:9px;
 background:transparent;
 transition:color .25s ease,background-color .34s ease,box-shadow .4s ease,text-shadow .3s ease,outline-color .28s ease;
 box-decoration-break:clone;-webkit-box-decoration-break:clone
}
.ayah.current{
 color:#fff8e9;
 border-radius:10px;
 outline:1px solid rgba(223,190,126,.22);
 outline-offset:2px;
 background:linear-gradient(140deg,rgba(205,171,100,.14),rgba(35,103,73,.3));
 text-shadow:0 0 11px rgba(246,215,156,.24),0 1px 3px #0009;
 box-shadow:0 0 calc(14px * var(--glow-strength,1)) #d6bb7d33,0 0 calc(31px * var(--glow-strength,1)) #54bb8455,inset 0 -2px #d7b47e30;
 animation:n45VerseBloom .55s var(--n45-motion) both;
}
.word{
 border-radius:9px;
 padding:3px 3px;
 color:inherit;
 box-decoration-break:clone;-webkit-box-decoration-break:clone;
 transition:color .26s ease,background-color .27s ease,box-shadow .3s ease,text-shadow .3s ease;
}
.word:hover{background:rgba(239,209,150,.08)}
.word.active-word,
body.broadcast .word.active-word,
body.broadcast.mode-vertical .word.active-word{
 background:linear-gradient(115deg,#fae6b5 0%,#eac67f 47%,#ffedc4 100%);
 color:#123222!important;
 border-radius:10px;
 text-shadow:0 1px #fff8d77a;
 box-shadow:0 0 calc(14px * var(--glow-strength,1)) #f5d69f79,0 0 calc(30px * var(--glow-strength,1)) #d9ab6766,inset 0 -2px #b88a4b80;
 animation:n45WordLight .35s var(--n45-motion);
}
.ayah-num-mark{font-size:.59em;letter-spacing:0;color:#e4c587;text-shadow:0 0 6px #b9995655}
.verse-arrive{animation:n45VerseBloom .58s var(--n45-motion) both}
.player{background:linear-gradient(115deg,#153a2e,#081e19 72%);border-top-color:#ad8e5945;box-shadow:0 -10px 30px rgba(0,0,0,.2)}
.play-btn{background:linear-gradient(145deg,#f7dc9d,#c9a066);box-shadow:0 5px 22px #c9a06632}
.play-btn:hover{filter:brightness(1.08);transform:scale(1.06)}
.player-info .disc{border-color:#c8a66b;box-shadow:0 0 0 4px #d5b66b0c,0 0 30px #e0bd7830}
.mode-pick{border-color:#947a4c8a;background:linear-gradient(145deg,#153b2c,#0b2520)}
.mode-pick:hover{transform:translateY(-4px);box-shadow:0 15px 34px #0005,0 0 0 1px #e6bf7966}
.preview-land,.preview-vert{box-shadow:inset 0 0 0 4px #153c2a,inset 0 0 0 5px #d8b67b67,0 12px 29px #0005}
/* Only an optical guide; it follows the same .active-word class produced by the original sync engine. */
.noor-follow-halo{
 position:fixed;left:0;top:0;
 width:0;height:0;opacity:0;
 pointer-events:none;z-index:4;
 border-radius:13px;
 transform:translate3d(-100vw,-100vh,0);
 background:linear-gradient(110deg,rgba(255,228,158,.09),rgba(215,174,98,.05));
 border:1px solid rgba(255,226,162,.43);
 box-shadow:0 0 0 2px rgba(244,194,109,.05),0 0 21px rgba(250,207,117,.25),0 0 42px rgba(235,183,90,.12);
 transition:transform .28s var(--n45-motion),width .27s var(--n45-motion),height .27s var(--n45-motion),opacity .18s ease;
 will-change:transform;
}
.noor-follow-halo.is-visible{opacity:1}
body.broadcast .noor-follow-halo{border-color:rgba(255,228,157,.65);box-shadow:0 0 0 2px rgba(255,218,144,.075),0 0 29px rgba(246,199,112,.27),0 0 64px rgba(202,156,86,.18)}
/* All broadcast modes use only the existing classes/data; no timing changes. */
body.broadcast{background:radial-gradient(circle at 50% 15%,#184f39,#051711 68%,#030c09)}
body.broadcast .hero{
 background:transparent;
 box-shadow:none;border-color:transparent
}
body.broadcast .hero h2{color:#f9e1a6;text-shadow:0 2px 12px #000a,0 0 26px #d7a85c55}
body.broadcast .reading{
 background:
 radial-gradient(ellipse at 50% 10%,rgba(60,105,73,.23),transparent 75%),
 repeating-linear-gradient(35deg,transparent 0 46px,rgba(234,202,134,.018) 47px 48px),
 linear-gradient(160deg,#133a2c,#071d17 80%)!important;
 border:2px solid #ccb07789!important;
 border-radius:24px!important;
 box-shadow:inset 0 0 0 6px #102f2599,inset 0 0 0 7px #d9b77a4f,0 24px 70px #0009,0 0 44px #d0a96514!important;
}
body.broadcast .reading:before{top:16px;right:16px}
body.broadcast .reading:after{bottom:16px;left:16px}
body.broadcast .verses{color:#fff3d9;text-shadow:0 2px 9px #0008}
body.broadcast .ayah.current{
 color:#fff3da;
 background:linear-gradient(135deg,rgba(235,194,111,.14),rgba(17,77,49,.10));
 outline:0;
 box-shadow:0 0 25px #dbbd7c1f,0 0 60px #b0a15e0f;
 text-shadow:0 0 14px #dcbf875c,0 2px 8px #000a;
}
body.broadcast.mode-mini .main-scroll{
 padding:clamp(16px,3vh,42px) clamp(18px,4vw,78px);
 background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(29,79,56,.32),transparent 77%);
}
body.broadcast.mode-mini .reading{
 width:min(92vw,1040px);max-width:none;
 height:min(74vh,820px);max-height:none;min-height:260px;
 padding:clamp(20px,3vw,46px) clamp(22px,4vw,62px);
 border-radius:25px!important;
 background:
 radial-gradient(ellipse at 50% -30%,#396a483d,transparent 75%),
 repeating-linear-gradient(0deg,transparent 0 30px,#e4c28208 31px 32px),
 linear-gradient(135deg,#204a35,#103225 72%,#091d18)!important;
}
body.broadcast.mode-mini .reading-title{color:#f0cc84;font-size:clamp(21px,2.4vw,31px);text-shadow:0 0 14px #e7bb6855}
body.broadcast.mode-mini .basmalah{font-size:clamp(21px,2.3vw,32px);color:#ffebc5}
body.broadcast.mode-mini .reading .verses{
 font-size:clamp(23px,2.7vw,39px)!important;
 line-height:2.42!important;
 padding:13px 9px;
 text-align:justify!important;
 scrollbar-width:thin;scrollbar-color:#a98c5766 transparent
}
body.broadcast.mode-mini .reading .ayah:not(.current){opacity:.87}
body.broadcast.mode-mini .reading .ayah-num-mark{color:#e7c88c}
body.broadcast.mode-mini .ayah.current{
 color:#fff9e7;
 background:linear-gradient(110deg,#dab7732b,#337b5733);
 outline:1px solid rgba(225,192,128,.38);
 box-shadow:0 0 21px #d1ab6550,inset 0 -2px #e0be8558
}
body.broadcast.mode-vertical .app{
 background:
 radial-gradient(ellipse 75% 45% at 50% 24%,rgba(39,99,63,.68),transparent 82%),
 linear-gradient(175deg,#082a20,#041710 80%);
 border-left:2px solid #bda36a4d;border-right:2px solid #bda36a4d;
}
body.broadcast.mode-vertical .main-scroll{
 background:transparent;
 padding:8vh 5.5% 11vh;
 gap:clamp(24px,5vh,65px);
}
body.broadcast.mode-vertical .main-scroll:before{color:#f2d69c88;text-shadow:0 0 33px #e3b96e55}
body.broadcast.mode-vertical .main-scroll:after{color:#dab77d91}
body.broadcast.mode-vertical .hero{margin:0;min-height:0;flex-shrink:0}
body.broadcast.mode-vertical .hero h2{
 color:#f8dc9e;
 font-size:clamp(28px,5.2vh,52px)!important;
 margin:4px 0 7px;line-height:1.5
}
body.broadcast.mode-vertical .hero p{color:#dac9a6;letter-spacing:.02em}
body.broadcast.mode-vertical .reading{
 width:100%;
 min-height:35vh;max-height:55vh;
 padding:clamp(24px,4.5vh,52px) 8%;
 border-radius:26px!important;
 background:
 radial-gradient(circle at 50% 0%,#3c6b4652,transparent 68%),
 linear-gradient(160deg,#123d2d,#061b16 85%)!important;
 flex-shrink:1;
 overflow:auto;
}
body.broadcast.mode-vertical .reading .verses{
 width:100%;
 line-height:2.26!important;
 font-size:clamp(25px,4.4vh,54px)!important;
 text-align:center;
}
body.broadcast.mode-vertical .ayah-num-mark{display:none!important}
body.broadcast.mode-vertical .broadcast-empty{
 color:#ffebc8;
 line-height:2.25;
 text-shadow:0 0 15px #e6c58550,0 3px 12px #0009;
}
body.broadcast.mode-vertical .broadcast-contact{border-color:#c2a46f;background:#0d2d22d9;box-shadow:0 10px 28px #0005}
@keyframes n45Aurora{from{opacity:.22;transform:scale(1) translateY(0)}to{opacity:.34;transform:scale(1.08) translateY(12px)}}
@keyframes n45VerseBloom{from{background-color:rgba(235,187,98,.05);text-shadow:0 0 2px #e9be7666}to{text-shadow:0 0 14px #dcbf8750}}
@keyframes n45WordLight{from{box-shadow:0 0 0 #e9c78500}to{box-shadow:0 0 24px #f1d49b82,0 0 38px #dcac5f55}}
@media(max-width:730px){
 body:not(.broadcast) .reading{padding:23px 18px 29px;border-radius:17px}
 .reading:before,.reading:after{width:23px;height:23px}
 body:not(.broadcast) .verses{line-height:2.54}
 body.broadcast.mode-mini .reading{width:94vw;padding:22px 24px}
}
@media(prefers-reduced-motion:reduce){
 .aurora,.verse-arrive,.ayah.current,.word.active-word{animation:none!important}
 .noor-follow-halo{transition:none!important}
 html{scroll-behavior:auto}
}