@font-face { font-family: "Tilawah Naskh"; src: url("noto-naskh-arabic.ttf") format("truetype"); font-display: swap; }
:root { color-scheme: dark; --page:#07172b; --card:#0b213a; --card-soft:#0d2744; --text:#f4ead5; --muted:#aebbd0; --gold:#d8b765; --line:rgba(216,183,101,.24); --shadow:rgba(0,0,0,.32); --horizon-day-weight:100%; --horizon-night-weight:0%; --arabic-base:1rem; }
:root[data-theme="desert"] { --page:#24170f; --card:#382419; --card-soft:#432b1e; --gold:#c79a61; --text:#f7ead6; --muted:#cdbba8; }
:root[data-theme="cream"] { color-scheme:light; --page:#f4ead7; --card:#fff8ea; --card-soft:#f9edd9; --gold:#9b693b; --text:#402d20; --muted:#786555; --line:rgba(113,73,40,.22); --shadow:rgba(83,52,30,.16); }
:root[data-theme="emerald"] { --page:#052a23; --card:#07352c; --card-soft:#094137; --gold:#c5a35d; --text:#f4ecd9; --muted:#abc6bc; }
:root[data-theme="teal"] { --page:#042832; --card:#06343f; --card-soft:#07414f; --gold:#bf9655; --text:#f2ead9; --muted:#a9c7cc; }
:root[data-theme="mihrab"] { --page:#1d0d2b; --card:#28133a; --card-soft:#32184a; --gold:#c6a261; --text:#f5ebdf; --muted:#c5b5ce; }
:root[data-theme="horizon"] { color-scheme:light; --page:color-mix(in srgb,#f4ead7 var(--horizon-day-weight),#160e09 var(--horizon-night-weight)); --card:color-mix(in srgb,#fff8ea var(--horizon-day-weight),#2f1e14 var(--horizon-night-weight)); --card-soft:color-mix(in srgb,#f0ddbd var(--horizon-day-weight),#3c281b var(--horizon-night-weight)); --gold:color-mix(in srgb,#9b693b var(--horizon-day-weight),#c79a61 var(--horizon-night-weight)); --text:color-mix(in srgb,#402d20 var(--horizon-day-weight),#f7ead6 var(--horizon-night-weight)); --muted:color-mix(in srgb,#786555 var(--horizon-day-weight),#cfbaa1 var(--horizon-night-weight)); --line:color-mix(in srgb,rgba(113,73,40,.22) var(--horizon-day-weight),rgba(199,154,97,.27) var(--horizon-night-weight)); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
*::before,*::after { -webkit-tap-highlight-color:transparent; }
html { min-height:100%; background:var(--page); }
body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 78% 0,color-mix(in srgb,var(--gold) 9%,transparent),transparent 30rem),var(--page); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.page { width:min(100% - 2rem,76rem); margin:0 auto; padding:1.25rem 0 4rem; }
.page-header { display:grid; grid-template-columns:3rem 1fr 3rem; align-items:center; gap:.75rem; margin-bottom:1.5rem; }
.back-link { display:grid; width:3rem; height:3rem; place-items:center; color:var(--gold); text-decoration:none; }
.back-link svg { display:block; width:1.45rem; height:1.45rem; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; transform:translateX(-1px); }
.back-link:hover { color:var(--text); }
.back-link:focus-visible { outline:1px solid var(--gold); outline-offset:.25rem; border-radius:.25rem; }
.heading-lockup { text-align:center; }
.heading-lockup h1,.player-title h1 { margin:0; font-family:Georgia,serif; font-size:clamp(2rem,5vw,3rem); font-weight:500; letter-spacing:.01em; }
.tools { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:1.1rem; }
.tools label { display:grid; gap:.38rem; color:var(--gold); font-size:.68rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.tools input,.tools select { width:100%; min-height:3.25rem; padding:.82rem .95rem; border:1px solid var(--line); border-radius:.85rem; outline:none; color:var(--text); background:var(--card); text-transform:none; }
.tools input:focus,.tools select:focus { border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 12%,transparent); }
.surah-count { margin:.2rem 0 .7rem; color:var(--muted); font-size:.78rem; }
.surah-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.surah-link { display:flex; min-height:6.5rem; padding:.75rem .85rem; flex-direction:column; justify-content:center; gap:.18rem; border:1px solid var(--line); border-radius:1rem; color:var(--text); background:linear-gradient(125deg,color-mix(in srgb,var(--gold) 7%,var(--card-soft)),color-mix(in srgb,var(--card-soft) 84%,var(--card)) 56%,var(--card)); box-shadow:0 .7rem 1.8rem color-mix(in srgb,var(--shadow) 38%,transparent); text-align:center; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.surah-link:hover,.surah-link:focus-visible { transform:translateY(-2px); border-color:var(--gold); background:linear-gradient(125deg,color-mix(in srgb,var(--gold) 14%,var(--card-soft)),color-mix(in srgb,var(--gold) 5%,var(--card)) 72%,var(--card)); outline:none; }
.surah-card-top { display:grid; grid-template-columns:2rem minmax(0,1fr) 1.25rem; align-items:center; gap:.5rem; width:100%; }
.surah-number { display:grid; width:2rem; height:2rem; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--gold); font-size:.72rem; font-weight:700; }
.surah-arrow { color:var(--gold); font-size:1.35rem; line-height:1; }
.surah-name { min-width:0; }
.surah-name strong { display:block; overflow:hidden; color:var(--gold); font-size:clamp(.86rem,1.35vw,1rem); text-overflow:ellipsis; white-space:nowrap; }
.surah-arabic { display:block; margin-top:.05rem; font-family:"Tilawah Naskh","Traditional Arabic",serif; font-size:clamp(1.25rem,2.1vw,1.6rem); line-height:1.35; }
.surah-meta { display:block; margin-top:.05rem; color:var(--muted); font-size:.61rem; letter-spacing:.015em; }
.saved-section[hidden] { display:none; }
.saved-section { margin:0 0 1.15rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:linear-gradient(130deg,color-mix(in srgb,var(--gold) 6%,var(--card-soft)),var(--card)); }
.section-heading-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.section-heading-row h2 { margin:0; color:var(--text); font-family:Georgia,serif; font-size:1rem; font-weight:600; }
.section-heading-row span { display:grid; width:1.55rem; height:1.55rem; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--gold); font-size:.65rem; }
.saved-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.saved-ayah { display:grid; grid-template-columns:1fr 2.3rem; align-items:stretch; overflow:hidden; border:1px solid var(--line); border-radius:.75rem; background:color-mix(in srgb,var(--card-soft) 85%,transparent); }
.saved-ayah a { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:.5rem; padding:.65rem .2rem .65rem .75rem; color:var(--text); text-decoration:none; }
.saved-ayah a span:first-child { display:grid; min-width:0; gap:.1rem; }
.saved-ayah strong { overflow:hidden; color:var(--text); font-family:Georgia,serif; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.saved-ayah small { color:var(--muted); font-size:.62rem; }
.saved-arrow { color:var(--gold); font-size:1.1rem; }
.saved-ayah button { display:grid; width:2.3rem; padding:0; place-items:center; border:0; color:var(--muted); background:transparent; cursor:pointer; }
.saved-ayah button:hover { color:var(--gold); }
.saved-ayah button svg { width:.9rem; height:.9rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.library-resume[hidden] { display:none; }
.library-resume { position:fixed; z-index:20; right:50%; bottom:max(.7rem,env(safe-area-inset-bottom)); display:grid; grid-template-columns:minmax(0,1fr) 3rem; align-items:center; width:min(calc(100% - 1.2rem),27rem); min-height:4rem; padding:.5rem .55rem .5rem .9rem; transform:translateX(50%); border:1px solid color-mix(in srgb,var(--gold) 68%,transparent); border-radius:1rem; color:var(--text); background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 20%,var(--card-soft)),color-mix(in srgb,var(--card-soft) 72%,var(--page)) 70%); box-shadow:0 1rem 3rem color-mix(in srgb,#000 46%,transparent),0 0 0 1px color-mix(in srgb,var(--text) 4%,transparent) inset; backdrop-filter:blur(18px); }
.library-resume-copy { display:grid; min-width:0; gap:.12rem; }
.library-resume-copy strong { overflow:hidden; color:var(--text); font-family:Georgia,serif; font-size:1rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.library-resume-copy span { color:var(--muted); font-size:.7rem; }
.library-resume-play { display:grid; width:2.75rem; height:2.75rem; padding:0; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--page); background:var(--gold); cursor:pointer; }
body.has-library-resume .page { padding-bottom:7rem; }
.player-page { width:min(100% - 2rem,68rem); min-height:100svh; padding-bottom:8rem; }
.player-page .page-header { margin-bottom:1rem; }
.player-title { text-align:center; }
.player-title h1 { margin:0; }
.player-title .arabic-name { margin:.25rem 0 0; color:var(--gold); font-family:"Tilawah Naskh","Traditional Arabic",serif; font-size:1.55rem; line-height:1.3; }
.ayah-stage { display:grid; min-height:clamp(24rem,62svh,42rem); place-items:center; }
.ayah-focus { position:relative; display:grid; width:100%; min-height:clamp(22rem,57svh,38rem); padding:clamp(1.5rem,4vw,3.5rem); place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--gold) 34%,transparent); border-radius:1.35rem; background:radial-gradient(ellipse at 16% 8%,color-mix(in srgb,var(--gold) 11%,transparent),transparent 43%),radial-gradient(ellipse at 88% 108%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 46%),linear-gradient(132deg,color-mix(in srgb,var(--gold) 7%,var(--card-soft)),color-mix(in srgb,var(--card-soft) 86%,var(--card)) 56%,var(--card)); box-shadow:0 1.5rem 4rem color-mix(in srgb,var(--shadow) 58%,transparent); }
.ayah-focus::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 25%,color-mix(in srgb,var(--gold) 4%,transparent),transparent 72%); }
.ayah-content { position:relative; z-index:1; display:grid; width:100%; max-width:58rem; justify-items:center; gap:clamp(1.1rem,3vh,2rem); opacity:1; transform:translateY(0) scale(1); font-size:var(--arabic-base); transition:opacity .18s ease,transform .18s ease; }
.ayah-content.is-changing { opacity:0; transform:translateY(.4rem) scale(.992); }
.focus-arabic { max-width:100%; margin:0; color:var(--text); font-family:"Tilawah Naskh","Traditional Arabic",serif; font-size:clamp(2.7em,5.6vw,5em); line-height:1.7; text-align:center; text-wrap:balance; }
.focus-translation { max-width:48rem; margin:0; color:var(--muted); font-family:Georgia,serif; font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.65; text-align:center; text-wrap:balance; }
.focus-divider { display:block; width:min(16rem,42%); height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.ayah-focus.is-long .focus-arabic { font-size:clamp(2.25em,4.5vw,4em); }
.ayah-focus.is-very-long .focus-arabic { font-size:clamp(1.8em,3.6vw,3.15em); line-height:1.62; }
.ayah-focus.is-long-translation .focus-translation { font-size:clamp(1rem,1.55vw,1.3rem); }
.loading,.error { position:absolute; z-index:2; margin:0; padding:1rem; color:var(--muted); text-align:center; }
.player-dock { position:fixed; z-index:20; right:50%; bottom:1.75rem; width:min(calc(100% - 1.2rem),34rem); transform:translateX(50%); padding:.55rem .8rem .62rem; border:1px solid color-mix(in srgb,var(--gold) 68%,transparent); border-radius:1rem; color:var(--text); background:linear-gradient(125deg,color-mix(in srgb,var(--gold) 18%,var(--card-soft)),color-mix(in srgb,var(--card-soft) 82%,var(--card)) 58%,color-mix(in srgb,var(--gold) 5%,var(--page))); box-shadow:0 1rem 3rem color-mix(in srgb,#000 46%,transparent),0 0 0 1px color-mix(in srgb,var(--text) 4%,transparent) inset; backdrop-filter:blur(18px); }
.surah-progress { position:absolute; top:-1px; left:1rem; right:1rem; height:2px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--line) 70%,transparent); }
.surah-progress span { display:block; width:100%; height:100%; border-radius:inherit; background:var(--gold); transform:scaleX(0); transform-origin:left center; will-change:transform; }
.compact-dock-row { display:grid; grid-template-columns:2.5rem 1fr 2.5rem; align-items:center; min-height:3rem; }
.dock-ayah { display:grid; width:2.15rem; height:2.15rem; place-items:center; border:1px solid color-mix(in srgb,var(--gold) 66%,transparent); border-radius:50%; color:var(--gold); font-size:.76rem; font-weight:750; }
.dock-actions { display:flex; justify-content:center; align-items:center; gap:1.35rem; }
.dock-actions button { display:grid; width:2.2rem; height:2.2rem; padding:0; place-items:center; border:0; color:var(--text); background:transparent; cursor:pointer; }
.dock-actions .skip-button { width:3.1rem; height:3.1rem; color:var(--gold); }
.skip-button svg { width:1.55rem; height:1.55rem; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.dock-actions .play-button { width:3.15rem; height:3.15rem; color:var(--gold); }
.play-button svg { width:1.8rem; height:1.8rem; overflow:visible; fill:currentColor; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.dock-actions button:hover { color:var(--text); }
.dock-actions button:focus-visible { outline:1px solid var(--gold); outline-offset:.2rem; border-radius:.2rem; }
.dock-tools { display:flex; align-items:center; justify-content:flex-end; gap:.1rem; }
.dock-tools button { display:grid; width:2.15rem; height:2.15rem; padding:0; place-items:center; border:0; color:var(--muted); background:transparent; cursor:pointer; }
.dock-tools button:hover,.dock-tools button.is-saved { color:var(--gold); }
.dock-tools button svg { width:1.15rem; height:1.15rem; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.dock-tools button.is-saved svg { fill:color-mix(in srgb,var(--gold) 28%,transparent); }
.timeline { display:grid; grid-template-columns:2.35rem 1fr 2.35rem; align-items:center; gap:.38rem; margin-top:.12rem; color:color-mix(in srgb,var(--muted) 90%,white); font-size:.58rem; }
.timeline span:last-child { text-align:right; }
.timeline input { width:100%; height:.8rem; margin:0; accent-color:var(--gold); cursor:pointer; }
.options-backdrop[hidden],.player-options[hidden] { display:none; }
.options-backdrop { position:fixed; z-index:40; inset:0; background:rgba(0,0,0,.52); backdrop-filter:blur(3px); }
.player-options { position:fixed; z-index:41; right:50%; bottom:0; width:min(100%,32rem); max-height:min(88svh,44rem); padding:.65rem 1rem max(1.15rem,env(safe-area-inset-bottom)); transform:translateX(50%); overflow:auto; border:1px solid var(--line); border-bottom:0; border-radius:1.25rem 1.25rem 0 0; color:var(--text); background:linear-gradient(155deg,color-mix(in srgb,var(--gold) 8%,var(--card-soft)),var(--card) 48%,var(--page)); box-shadow:0 -1.5rem 4rem rgba(0,0,0,.38); }
.options-handle { width:2.8rem; height:3px; margin:0 auto .6rem; border-radius:999px; background:var(--line); }
.options-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem; }
.options-heading h2 { margin:0; font-family:Georgia,serif; font-size:1.25rem; font-weight:600; }
.options-heading button { display:grid; width:2.5rem; height:2.5rem; padding:0; place-items:center; border:0; color:var(--muted); background:transparent; cursor:pointer; }
.options-heading svg { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.option-row,.toggle-row { display:flex; min-height:4rem; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); }
.option-row > div:first-child,.toggle-row > span { display:grid; gap:.14rem; }
.option-row strong,.toggle-row strong { font-size:.82rem; }
.option-row span,.toggle-row small { color:var(--muted); font-size:.66rem; font-weight:400; }
.option-row select { min-width:6rem; padding:.55rem .65rem; border:1px solid var(--line); border-radius:.65rem; color:var(--text); background:var(--card-soft); outline:none; }
.size-control { display:flex; align-items:center; gap:.15rem; }
.size-control button { width:2.2rem; height:2.2rem; padding:0; border:0; color:var(--gold); background:transparent; font-size:1.3rem; cursor:pointer; }
.size-control output { min-width:3.2rem; color:var(--muted); font-size:.7rem; text-align:center; }
.toggle-row { position:relative; cursor:pointer; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-row i { position:relative; width:2.55rem; height:1.42rem; flex:0 0 auto; border:1px solid var(--line); border-radius:999px; background:var(--page); transition:background .18s ease; }
.toggle-row i::after { content:""; position:absolute; top:.18rem; left:.2rem; width:.94rem; height:.94rem; border-radius:50%; background:var(--muted); transition:transform .18s ease,background .18s ease; }
.toggle-row input:checked + i { background:color-mix(in srgb,var(--gold) 23%,var(--page)); }
.toggle-row input:checked + i::after { transform:translateX(1.06rem); background:var(--gold); }
.range-fields { display:flex; align-items:flex-end; justify-content:center; gap:.65rem; max-height:0; opacity:0; overflow:hidden; transition:max-height .2s ease,opacity .2s ease,padding .2s ease; }
.range-repeat-active .range-fields { max-height:5rem; padding:.35rem 0 .2rem; opacity:1; }
.range-fields label { display:grid; gap:.25rem; color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; }
.range-fields input { width:5rem; padding:.55rem; border:1px solid var(--line); border-radius:.6rem; color:var(--text); background:var(--card-soft); text-align:center; }
body.options-open { overflow:hidden; }
body.hide-translation .focus-translation,body.hide-translation .focus-divider,body.focus-mode .focus-translation,body.focus-mode .focus-divider { display:none; }
body.focus-mode .player-page .page-header { display:none; }
body.focus-mode .player-page { padding-top:.5rem; }
body.focus-mode .ayah-stage { min-height:calc(100svh - 8rem); }
body.focus-mode .ayah-focus { min-height:calc(100svh - 9rem); border-color:transparent; background:transparent; box-shadow:none; }
body.focus-mode .ayah-focus::before { display:none; }
@media (max-width:54rem) { .surah-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .saved-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .ayah-stage { min-height:64svh; } }
@media (max-width:36rem) { .page { width:min(100% - 1.1rem,76rem); padding-top:.7rem; } .page-header { grid-template-columns:2.75rem 1fr 2.75rem; margin-bottom:1rem; } .back-link { width:2.75rem; height:2.75rem; } .tools { grid-template-columns:1fr; gap:.65rem; } .surah-list { grid-template-columns:1fr 1fr; gap:.65rem; } .surah-link { min-height:6.15rem; padding:.52rem .62rem; border-radius:.85rem; } .surah-card-top { grid-template-columns:1.75rem minmax(0,1fr) .9rem; gap:.3rem; } .surah-number { width:1.75rem; height:1.75rem; font-size:.65rem; } .surah-arrow { font-size:1.1rem; } .surah-name strong { font-size:clamp(.72rem,3.6vw,.92rem); } .surah-arabic { font-size:clamp(1.1rem,5.8vw,1.4rem); } .surah-meta { font-size:.55rem; } .saved-section { padding:.8rem; } .saved-list { grid-template-columns:1fr 1fr; gap:.45rem; } .saved-ayah { grid-template-columns:1fr 2rem; } .saved-ayah a { padding:.55rem .1rem .55rem .6rem; } .saved-ayah button { width:2rem; } .library-resume { bottom:max(.4rem,env(safe-area-inset-bottom)); width:min(calc(100% - 2rem),25rem); min-height:3.75rem; } .player-page { width:min(100% - .8rem,68rem); min-height:0; padding-bottom:8rem; } .player-page .page-header { padding-inline:.15rem; } .player-title h1 { font-size:clamp(1.75rem,8vw,2.35rem); } .player-title .arabic-name { font-size:1.35rem; } .ayah-stage { min-height:0; padding:.35rem 0 1rem; } .ayah-focus { min-height:clamp(18rem,40svh,23rem); padding:1.2rem; border-radius:1rem; } .ayah-focus.is-long { min-height:clamp(22rem,50svh,29rem); } .ayah-focus.is-very-long { min-height:clamp(27rem,62svh,35rem); } .ayah-focus.is-long-translation:not(.is-long):not(.is-very-long) { min-height:clamp(21rem,47svh,27rem); } .focus-arabic { font-size:clamp(2.05em,10.8vw,3.35em); line-height:1.65; } .focus-translation { font-size:clamp(1rem,4.7vw,1.2rem); } .ayah-focus.is-long .focus-arabic { font-size:clamp(1.8em,8.5vw,2.75em); } .ayah-focus.is-very-long .focus-arabic { font-size:clamp(1.48em,6.7vw,2.15em); } .player-dock { bottom:max(1.15rem,calc(env(safe-area-inset-bottom) + .65rem)); width:min(calc(100% - 1.2rem),28rem); padding-inline:.6rem; } .compact-dock-row { grid-template-columns:2.15rem 1fr 4.35rem; } .dock-actions { gap:.45rem; } .dock-actions .skip-button { width:2.65rem; height:2.9rem; } .dock-actions .play-button { width:2.8rem; } .dock-tools button { width:2.05rem; } }
@media (max-width:22rem) { .surah-list { grid-template-columns:1fr; } .focus-arabic { font-size:1.8rem; } }