/* ============================================================
   Read Quran — immersive Mushaf flip-book
   Full-screen reader: scanned 15-line Madani Mushaf + per-ayah
   audio with a line-band highlight. Center-tap toggles the chrome,
   edge-taps/swipes turn pages, a faint exit + page dot mean the
   reader is never a trap.
   ============================================================ */
.mushaf-page{ --mq-green:#14524A; --mq-gold:#E0972F; }

/* ---- full-screen container (only when this page is active) ---- */
.mushaf-page.active{
  position:fixed; inset:0; z-index:200; margin:0; padding:0;
  background:radial-gradient(120% 90% at 50% 0%, #14403a 0%, #0c2823 60%, #0a201c 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; animation:none;
}
/* hide the site header + bottom tab bar while reading */
body.mushaf-active header.main{ display:none !important; }
body.mushaf-active .tabbar{ display:none !important; }

/* ---- the book ---- */
.mq-stage{ position:relative; margin:0 auto; }
.mq-book{ margin:0 auto; box-shadow:0 18px 50px rgba(0,0,0,.45); border-radius:5px; background:#fbf7ef; touch-action:pan-y; }
.mq-book img{ width:100%; height:100%; display:block; }
.mq-hl{ position:absolute; pointer-events:none; left:0; top:0; width:0; height:0; opacity:0;
  background:rgba(224,151,47,.32); border-radius:5px; box-shadow:0 0 0 1px rgba(224,151,47,.55) inset;
  transition:opacity .18s ease, top .16s ease, height .16s ease; z-index:5; mix-blend-mode:multiply; }
.mq-hl.show{ opacity:1; }
.mq-loading{ position:absolute; color:#cfe3dd; font-size:.95rem; }

/* ---- top chrome overlay (back / title / bookmark + context) ---- */
.mq-chrome{ position:fixed; top:0; left:0; right:0; z-index:210; padding:8px 10px calc(10px);
  padding-top:calc(8px + env(safe-area-inset-top,0));
  background:linear-gradient(180deg, rgba(8,28,24,.92) 0%, rgba(8,28,24,.55) 70%, rgba(8,28,24,0) 100%);
  transition:opacity .2s ease, transform .2s ease; }
.mq-top{ display:flex; align-items:center; gap:10px; max-width:620px; margin:0 auto; }
.mq-top .mq-title{ font-weight:800; color:#fff; font-size:1.02rem; flex:1; text-align:center; letter-spacing:.01em; }
.mq-iconbtn{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10); color:#fff;
  width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.mq-iconbtn svg{ width:20px; height:20px; }
.mq-iconbtn.on{ background:var(--mq-gold); border-color:var(--mq-gold); color:#1b2b27; }
.mq-context{ display:flex; align-items:center; justify-content:center; gap:7px; margin:9px auto 0; max-width:620px; flex-wrap:wrap; }
.mq-chip{ background:rgba(255,255,255,.12); color:#fff; border-radius:999px; padding:6px 12px;
  font-weight:700; font-size:.82rem; cursor:pointer; border:1px solid rgba(255,255,255,.12); white-space:nowrap; }
.mq-chip b{ font-weight:800; color:var(--mq-gold); }
.mq-goto-btn{ background:var(--mq-gold); color:#1b2b27; border:none; border-radius:999px; padding:7px 14px;
  font-weight:800; font-size:.82rem; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.mq-goto-btn svg{ width:15px; height:15px; }
.mq-resume{ display:block; margin:9px auto 0; text-align:center; max-width:360px; }

/* ---- persistent (anti-trap) layer: exit dot + page indicator ---- */
.mq-exit{ position:fixed; top:calc(10px + env(safe-area-inset-top,0)); right:12px; z-index:230;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(8,28,24,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:.32; transition:opacity .2s ease; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.mq-exit svg{ width:20px; height:20px; }
.mq-exit:active{ opacity:1; }
.mq-pagedot{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(10px + env(safe-area-inset-bottom,0)); z-index:205;
  color:#fff; font-size:.74rem; font-weight:700; pointer-events:none; letter-spacing:.02em;
  background:rgba(8,28,24,.72); padding:3px 12px; border-radius:999px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-shadow:0 1px 2px rgba(0,0,0,.5);
  transition:opacity .2s ease; }

/* ---- immersive: chrome + player fade away, exit dot stays faint ---- */
body.mq-immersive .mq-chrome{ opacity:0; transform:translateY(-14px); pointer-events:none; }
body.mq-immersive #mqMini{ opacity:0; transform:translateY(16px); pointer-events:none; }
body.mq-immersive .mq-exit{ opacity:.16; }
#mqMini{ transition:opacity .2s ease, transform .2s ease; }

/* dock the player flush to the bottom while reading (overrides qr-mini float) */
body.mushaf-active #mqMini.qr-mini{ left:0; right:0; bottom:0; border-radius:0; border:none;
  z-index:215; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0)); }

/* ---- first-time hint coachmark ---- */
.mq-hint{ position:fixed; inset:0; z-index:240; display:none; align-items:center; justify-content:center;
  background:rgba(6,20,17,.78); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.mq-hint.show{ display:flex; }
.mq-hint .card{ background:#fff; color:#1b2b27; border-radius:18px; padding:22px 22px 18px; max-width:300px; margin:0 20px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.mq-hint h4{ margin:2px 0 12px; color:var(--mq-green); font-size:1.1rem; }
.mq-hint .rowh{ display:flex; align-items:center; gap:12px; text-align:left; margin:11px 0; font-size:.9rem; }
.mq-hint .rowh .ic{ width:34px; height:34px; border-radius:10px; background:rgba(20,82,74,.1); color:var(--mq-green);
  display:flex; align-items:center; justify-content:center; flex:none; font-size:1.1rem; }
.mq-hint .gotit{ margin-top:14px; width:100%; padding:12px; border:none; border-radius:12px; background:var(--mq-green); color:#fff; font-weight:800; font-size:.95rem; cursor:pointer; }

/* ---- go-to sheet ---- */
.mq-sheet-back{ position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.45); display:none; align-items:flex-end; }
.mq-sheet-back.open{ display:flex; }
.mq-sheet{ position:relative; background:#fff; width:100%; max-height:86vh; border-radius:20px 20px 0 0; padding:14px 16px 24px; display:flex; flex-direction:column; }
.mq-sheet h3{ margin:4px 0 12px; color:var(--mq-green); font-size:1.1rem; text-align:center; }
.mq-sheet-close{ position:absolute; right:14px; top:12px; border:none; background:transparent; font-size:1.7rem; color:#999; cursor:pointer; line-height:1; }
.mq-tabs{ display:flex; gap:6px; background:rgba(20,82,74,.07); border-radius:12px; padding:4px; margin-bottom:12px; }
.mq-tabs button{ flex:1; border:none; background:transparent; padding:9px 6px; border-radius:9px; font-weight:700; font-size:.85rem; color:var(--mq-green); cursor:pointer; }
.mq-tabs button.on{ background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.mq-panel{ display:none; }
.mq-panel.on{ display:block; }
.mq-search{ width:100%; padding:11px 14px; border:1px solid #e6e0d4; border-radius:12px; margin-bottom:10px; font-size:.95rem; }
.mq-list{ overflow-y:auto; max-height:54vh; -webkit-overflow-scrolling:touch; }
.mq-row{ display:flex; align-items:center; gap:10px; padding:11px 8px; border-bottom:1px solid #eee; cursor:pointer; }
.mq-row:active{ background:rgba(20,82,74,.06); }
.mq-row .n{ width:30px; height:30px; border-radius:50%; background:rgba(20,82,74,.1); color:var(--mq-green); font-weight:800; font-size:.78rem; display:flex; align-items:center; justify-content:center; flex:none; }
.mq-row .nm{ flex:1; font-weight:700; color:#222; }
.mq-row .nm small{ display:block; font-weight:500; color:#888; font-size:.78rem; }
.mq-row .ar{ font-family:'Noto Naskh Arabic','Amiri',serif; font-size:1.25rem; color:var(--mq-green); direction:rtl; }
.mq-field{ display:flex; gap:10px; align-items:center; margin:6px 0 14px; }
.mq-field label{ font-weight:700; color:var(--mq-green); min-width:64px; }
.mq-field input, .mq-field select{ flex:1; padding:11px 12px; border:1px solid #e6e0d4; border-radius:12px; font-size:.95rem; }
.mq-go{ width:100%; padding:13px; border:none; border-radius:12px; background:var(--mq-green); color:#fff; font-weight:800; font-size:1rem; cursor:pointer; }
.mq-hint-line{ color:#888; font-size:.8rem; margin:-6px 0 12px; }

@media (prefers-reduced-motion:reduce){
  .mq-chrome, #mqMini, .mq-exit, .mq-hl{ transition:none !important; }
}