/* ======================================================================
   NOOR QURAN V4.6 — AL-MUSHAF AL-WARAQI
   A purely PRESENTATIONAL stylesheet.
   The recitation, Quran text and all word timestamps remain unchanged.
   ====================================================================== */

:root{
  --paper-ink:#251f18;
  --paper-muted:#5f5546;
  --paper-gold:#937746;
  --paper-gold-light:#d7bb83;
  --paper:#fcf7ed;
  --paper-shadow:#f1e8d8;
  --paper-follow:rgba(196,160,100,.32);
}

/* A quiet cream page, in place of the previous glowing green cards. */
.reading,
body.broadcast .reading,
body.broadcast.mode-mini .reading,
body.broadcast.mode-vertical .reading{
  position:relative;
  isolation:isolate;
  color:var(--paper-ink)!important;
  border:2px solid #a98c58!important;
  border-radius:7px!important;
  background-image:
    url("mushaf-corner-tl.svg"),
    url("mushaf-corner-tr.svg"),
    url("mushaf-corner-bl.svg"),
    url("mushaf-corner-br.svg"),
    radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.81),transparent 89%),
    linear-gradient(125deg,#f8f1e4 0%,#fffaf0 49%,#f8f0e1 100%)!important;
  background-size:
    76px 76px,76px 76px,76px 76px,76px 76px,cover,cover!important;
  background-position:
    left 7px top 7px,right 7px top 7px,left 7px bottom 7px,right 7px bottom 7px,center,center!important;
  background-repeat:no-repeat!important;
  box-shadow:
    0 20px 55px rgba(0,0,0,.26),
    0 0 0 5px rgba(241,224,190,.66),
    0 0 0 7px rgba(158,128,73,.53),
    inset 0 0 0 6px #faf2e4,
    inset 0 0 0 7px rgba(155,117,62,.52),
    inset 0 0 0 15px #f9f1e5,
    inset 0 0 0 16px rgba(161,124,64,.28)!important;
  text-shadow:none!important;
  transition:border-color .25s ease,box-shadow .3s ease;
}

/* Remove V4.5 luminous corners / roaming halo. Ornaments live in background. */
.reading::before,.reading::after{content:none!important;display:none!important}
.noor-follow-halo{display:none!important}
.reading-title,
body.broadcast.mode-mini .reading-title{
  color:#6c502c!important;
  font-family:'Amiri','Traditional Arabic',serif!important;
  font-weight:700;
  font-size:clamp(22px,2.3vw,33px);
  margin:0 0 8px;
  text-shadow:none!important;
  line-height:1.8;
  text-align:center;
}
.reading-title::after{
  content:"❧  ۞  ❧";
  display:block;
  color:#b19869;
  font-size:15px;
  letter-spacing:5px;
  margin-top:-7px;
}
.basmalah,
.basmalah.current-preface,
body.broadcast.mode-mini .basmalah{
  color:#3f3121!important;
  text-shadow:none!important;
  font-family:'Amiri','Duri Quran',serif;
  font-weight:700;
  line-height:2.05;
  font-size:clamp(25px,2.55vw,39px);
  margin-bottom:16px;
  animation:none!important;
}
.basmalah.current-preface{
  background:linear-gradient(transparent 74%,rgba(174,133,65,.18) 74%);
  border-radius:0;
}

/* Printed Quran glyphs: dark, highly readable, all non-active verses visible. */
.reading .verses,
body.broadcast .reading .verses,
body.broadcast.mode-mini .reading .verses,
body.broadcast.mode-vertical .reading .verses{
  color:var(--paper-ink)!important;
  text-shadow:none!important;
  font-weight:400;
  direction:rtl;
  word-spacing:1.8px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body:not(.broadcast) .reading{
  padding:clamp(36px,5vw,67px) clamp(28px,6vw,80px);
  min-height:450px;
}
body:not(.broadcast) .reading .verses{
  font-size:var(--font-size);
  line-height:2.65;
  text-align:justify;
}

/* Do NOT alter the words or their timing; only visualize the existing classes.
   Fine under-verse shading does not enclose the whole line in a bright box. */
.reading .ayah,
.reading .ayah:not(.current),
body.broadcast .reading .ayah,
body.broadcast.mode-mini .reading .ayah,
body.broadcast.mode-vertical .reading .ayah{
  color:var(--paper-ink)!important;
  opacity:1!important;
  padding:1px 1px!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
  background:transparent!important;
  animation:none!important;
  transition:background .22s ease,color .22s ease!important;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.reading .ayah.current,
body.broadcast .reading .ayah.current,
body.broadcast.mode-mini .reading .ayah.current,
body.broadcast.mode-vertical .reading .ayah.current{
  color:#242019!important;
  background:linear-gradient(to bottom,transparent 73%,rgba(161,130,78,.15) 73%)!important;
  outline:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
  animation:none!important;
}
.reading .word,
body.broadcast .reading .word,
body.broadcast.mode-mini .reading .word,
body.broadcast.mode-vertical .reading .word{
  color:inherit!important;
  opacity:1!important;
  display:inline;
  border:0!important;
  border-radius:4px!important;
  padding:2px 1.5px!important;
  outline:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
  background:transparent!important;
  animation:none!important;
  transition:background-color .20s ease,color .20s ease,border-color .20s ease!important;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.reading .word:hover{background:rgba(152,121,72,.09)!important}
/* The word being recited, for example مَرَضًا — a matte sand wash and hairline
   under the word, with no glow, border box, or pulsing animation. */
.reading .word.active-word,
body.broadcast .reading .word.active-word,
body.broadcast.mode-mini .reading .word.active-word,
body.broadcast.mode-vertical .reading .word.active-word{
  color:#33200b!important;
  background:rgba(210,176,111,.32)!important;
  border-radius:3px!important;
  box-shadow:inset 0 -2px 0 rgba(134,98,48,.56)!important;
  outline:0!important;
  text-shadow:none!important;
  animation:none!important;
}
.reading .ayah-num-mark,
body.broadcast.mode-mini .reading .ayah-num-mark{
  display:inline-block;
  color:#8f6d35!important;
  opacity:1!important;
  font-family:'Amiri','Traditional Arabic',serif;
  font-weight:700;
  font-size:.63em;
  line-height:1;
  vertical-align:baseline;
  letter-spacing:.01em;
  text-shadow:none!important;
  margin:0 .14em;
  padding:0 .1em;
}
.verse-selected{outline:1px dashed rgba(152,109,42,.4)!important}
body.broadcast .verse-selected{outline:0!important}

/* Main site's dark chrome makes a calm frame around the cream page. */
body:not(.broadcast) .main-scroll{
  background:linear-gradient(140deg,rgba(7,29,23,.48),rgba(14,38,29,.28));
}
body:not(.broadcast) .reading-title{margin-top:2px}
body:not(.broadcast) .hero{
  border-color:rgba(210,181,112,.38);
}
body:not(.broadcast) .reading .verses{
  min-height:120px;
}

/* Broadcast window: a dark neutral mat, with the traditional paper as focal point. */
body.broadcast,
body.broadcast.mode-mini,
body.broadcast.mode-vertical{
  background:
    radial-gradient(ellipse at 50% 35%,#24473a 0%,#0b221c 68%,#081912 100%)!important;
}
body.broadcast::before{
  background:radial-gradient(ellipse at 50% 38%,rgba(189,172,132,.08),transparent 55%)!important;
}
body.broadcast .hero h2{
  color:#ebd6a4!important;
  text-shadow:0 2px 14px rgba(0,0,0,.56)!important;
}
body.broadcast .hero p{color:#c9c6b0!important}

/* Landscape mini-mushaf: several verses, paper-like, with scrolling line focus. */
body.broadcast.mode-mini .main-scroll{
  padding:clamp(24px,5vh,68px) clamp(23px,4vw,80px)!important;
  justify-content:center;
  gap:clamp(12px,2.5vh,30px);
  background:transparent!important;
}
body.broadcast.mode-mini .reading{
  width:min(94vw,1130px)!important;
  max-width:1130px!important;
  height:min(76vh,850px)!important;
  max-height:none!important;
  min-height:270px!important;
  padding:clamp(33px,4vh,65px) clamp(26px,5vw,79px)!important;
  overflow:hidden!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
}
body.broadcast.mode-mini .reading .reading-title{
  display:block!important;
  font-size:clamp(20px,2.3vw,32px)!important;
}
body.broadcast.mode-mini .reading .basmalah{
  display:block!important;
  font-size:clamp(22px,2.3vw,31px)!important;
}
body.broadcast.mode-mini .reading .verses{
  display:block!important;
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:14px 8px 20px!important;
  margin:0 1px;
  text-align:justify!important;
  line-height:2.45!important;
  font-size:clamp(23px,2.55vw,39px)!important;
  scrollbar-color:rgba(142,114,71,.36) transparent;
  scrollbar-width:thin;
}
body.broadcast.mode-mini .reading .ayah,
body.broadcast.mode-mini .reading .ayah:not(.current){display:inline!important}
body.broadcast.mode-mini .reading .ayah-num-mark{display:inline-block!important}
body.broadcast.mode-mini .broadcast-empty{
  color:#594a31!important;
  background:rgba(246,236,216,.93)!important;
  border:0!important;
  text-shadow:none!important;
  box-shadow:none!important;
  font-family:'Amiri',serif;
}

/* TikTok 9:16: vertically centered, large readable single verse on a printed page. */
body.broadcast.mode-vertical .app{
  background:linear-gradient(175deg,#133529,#071911 86%)!important;
  box-shadow:0 0 90px rgba(0,0,0,.55)!important;
}
body.broadcast.mode-vertical .main-scroll{
  background:transparent!important;
  gap:clamp(20px,3.3vh,42px)!important;
  padding:clamp(46px,8vh,100px) 5.2% clamp(53px,10vh,126px)!important;
  justify-content:center;
  min-height:100dvh;
}
body.broadcast.mode-vertical .main-scroll:before,
body.broadcast.mode-vertical .main-scroll:after{
  color:rgba(206,174,114,.64)!important;
  text-shadow:none!important;
}
body.broadcast.mode-vertical .hero{margin:0!important;min-height:0!important}
body.broadcast.mode-vertical .hero h2{
  color:#f0dcae!important;
  font-size:clamp(26px,5vh,47px)!important;
  margin:0;
}
body.broadcast.mode-vertical .reading{
  width:100%!important;
  min-height:32vh!important;
  max-height:56vh!important;
  height:auto!important;
  padding:clamp(45px,6vh,72px) 8%!important;
  overflow:auto!important;
  flex:0 1 auto;
  justify-content:center!important;
  align-items:center!important;
}
body.broadcast.mode-vertical .reading .verses{
  width:100%!important;
  font-size:clamp(26px,4.2vh,53px)!important;
  line-height:2.3!important;
  text-align:center!important;
  padding:0 1px!important;
}
body.broadcast.mode-vertical .reading .ayah:not(.current){display:none!important}
body.broadcast.mode-vertical .reading .ayah.current{display:inline!important}
body.broadcast.mode-vertical .reading .ayah-num-mark{display:none!important}
body.broadcast.mode-vertical .broadcast-empty{
  color:#3e3223!important;
  text-shadow:none!important;
  background:transparent!important;
  font-family:'Amiri','Traditional Arabic',serif;
}

/* Make the cover designs indicate the NEW paper presentation. */
.preview-land,.preview-vert{
  color:#2f2418!important;
  border:3px double #a68b5a!important;
  border-radius:5px!important;
  background:linear-gradient(135deg,#fff7e9,#efe2c9)!important;
  box-shadow:inset 0 0 0 5px #f6ecda,inset 0 0 0 6px #c6ad80,0 8px 24px rgba(0,0,0,.25)!important;
  text-shadow:none!important;
}
.preview-land b,.preview-vert b{color:#95703c!important}
.preview-land i,.preview-vert i{color:#312318!important;text-shadow:none!important}
@media(max-width:730px){
  body:not(.broadcast) .reading{
    padding:42px 26px!important;
  }
  .reading,body.broadcast .reading{
    background-size:53px 53px,53px 53px,53px 53px,53px 53px,cover,cover!important;
  }
  body.broadcast.mode-mini .reading{padding:33px 20px!important}
  body.broadcast.mode-mini .reading .verses{font-size:clamp(22px,4vw,30px)!important;line-height:2.4!important}
}
@media(prefers-reduced-motion:reduce){
  .reading .ayah,.reading .word{transition:none!important}
}