@import url("https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Tajawal:wght@400;500;700&display=swap");@font-face{font-family:UthmanicHafs;src:url(/fonts/uthmanic_hafs_v20.ttf) format("truetype");font-display:swap}body,html{margin:0;padding:0;overflow-x:hidden;max-width:100%}*{box-sizing:border-box}body{font-family:Tajawal,system-ui,sans-serif;background:#14110d;color:#ede5d2}a{color:inherit}@keyframes installSlideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.install-prompt{animation:installSlideUp .28s ease-out}@keyframes tourPop{0%{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes tourFade{0%{opacity:0}to{opacity:1}}@keyframes tourPulse{0%,to{box-shadow:0 0 0 0 rgba(201,168,94,.55)}70%{box-shadow:0 0 0 10px rgba(201,168,94,0)}}@keyframes tourEq{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.tour-overlay{animation:tourFade .25s ease-out}.tour-card{animation:tourPop .3s cubic-bezier(.2,.8,.25,1)}.tour-hint{animation:tourPulse 1.6s ease-out infinite}.tour-eq span{animation:tourEq .9s ease-in-out infinite}@media (prefers-reduced-motion:reduce){.install-prompt,.tour-card,.tour-eq span,.tour-hint,.tour-overlay{animation:none}}@keyframes mushafSharePulse{0%,to{box-shadow:0 0 0 0 rgba(201,168,94,.5)}60%{box-shadow:0 0 0 12px rgba(201,168,94,0)}}.mushaf-share-pulse{animation:mushafSharePulse 2.4s ease-out infinite}@media (max-width:420px){.mushaf-actions-bar{gap:6px!important;padding:4px!important}.mushaf-actions-bar button{padding-left:11px!important;padding-right:11px!important;font-size:12.5px!important}}@media (prefers-reduced-motion:reduce){.mushaf-share-pulse{animation:none}}:root{--gold:var(--app-accent,#c9a85e);--gold-deep:var(--app-accent-deep,#b08a3e);--radius:16px;--tap:52px;--ease:cubic-bezier(0.2,0.8,0.25,1)}:where(button,a,input,select,[tabindex]):focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}@keyframes sheetFade{0%{opacity:0}to{opacity:1}}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheetPop{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sheet-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;animation:sheetFade .22s ease-out}.sheet-panel{background:var(--ui-bg,#14110d);color:var(--ui-ink,#ede5d2);border:1px solid var(--ui-border,rgba(176,138,62,.35));box-shadow:0 -12px 40px rgba(0,0,0,.5)}.sheet-mobile{margin-top:auto;width:100%;max-height:88vh;border-radius:22px 22px 0 0;animation:sheetUp .32s var(--ease);padding-bottom:env(safe-area-inset-bottom,0)}.sheet-desktop{margin:auto;width:min(560px,92vw);max-height:86vh;border-radius:var(--radius);animation:sheetPop .24s var(--ease)}.sheet-grip{width:44px;height:5px;border-radius:3px;background:var(--ui-border,hsla(42,43%,88%,.4));margin:10px auto 4px}.dock{position:fixed;left:0;right:0;bottom:calc(var(--player-h, 0px) + env(safe-area-inset-bottom, 0px));z-index:60;background:#14110d;border-top:1px solid rgba(176,138,62,.3);box-shadow:0 -8px 28px rgba(0,0,0,.4)}.dock:before{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,#c9a85e,transparent);opacity:.5}.dock-btn{flex:1 1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tap);border:none;background:transparent;color:#ede5d2;font-family:Tajawal,system-ui,sans-serif;font-weight:600;font-size:12px;cursor:pointer;border-radius:12px;transition:transform .12s var(--ease),background .15s}.dock-btn:active{transform:scale(.92)}.dock-btn[data-on=true]{background:linear-gradient(#c9a85e,#b08a3e);color:#14110d}.dock-btn[disabled]{opacity:.32;cursor:default}@keyframes paletteUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.palette-bar{animation:paletteUp .24s var(--ease)}.chip{width:40px;height:40px;border-radius:50%;cursor:pointer;flex:0 0 auto;border:2px solid transparent;transition:transform .12s var(--ease);position:relative}.chip:active{transform:scale(.9)}.chip[data-on=true]{transform:scale(1.14);box-shadow:0 0 0 2px var(--ui-bg,#14110d),0 0 0 4px var(--gold)}.medallion{display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:44px;padding:0 16px;border-radius:22px;cursor:pointer;background:var(--ui-panel,#1f1a14);border:1.5px solid var(--gold-deep);color:var(--gold);font-family:Tajawal,system-ui,sans-serif;font-weight:700;font-size:17px;letter-spacing:.5px;transition:transform .12s var(--ease)}.medallion:active{transform:scale(.95)}.turn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--tap);padding:0 20px;border:none;border-radius:14px;cursor:pointer;font-family:Tajawal,system-ui,sans-serif;font-weight:700;font-size:16px;color:#14110d;background:linear-gradient(var(--gold),var(--gold-deep));box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .12s var(--ease)}.turn-btn:active{transform:scale(.96)}.turn-btn[disabled]{opacity:.3;cursor:default;box-shadow:none}.turn-ghost{background:transparent;color:var(--ui-ink,#ede5d2);border:1px solid var(--ui-border,hsla(42,43%,88%,.28));box-shadow:none;padding:0 14px}@keyframes suraFlash{0%{background:transparent}15%{background:color-mix(in srgb,var(--gold) 26%,transparent)}55%{background:color-mix(in srgb,var(--gold) 26%,transparent)}to{background:transparent}}.sura-flash{animation:suraFlash 2.2s ease;border-radius:8px}@media (prefers-reduced-motion:reduce){.sura-flash{animation:none;background:color-mix(in srgb,var(--gold) 18%,transparent)}}.nav-round{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;color:#14110d;box-shadow:0 6px 16px rgba(0,0,0,.35);display:inline-flex;align-items:center;justify-content:center;transition:transform .12s var(--ease)}.nav-round:active{transform:scale(.94)}.nav-round[disabled]{opacity:.3;cursor:default;box-shadow:none}.sheet-section{padding:4px 18px 18px}.sheet-title{font-family:Tajawal,system-ui,sans-serif;font-weight:700;font-size:15px;color:var(--ui-ink,#ede5d2);margin:18px 0 10px}.sheet-hint{font-size:12.5px;color:var(--ui-muted,#9c8e76);line-height:1.7;margin-top:4px}@media (prefers-reduced-motion:reduce){.palette-bar,.sheet-backdrop,.sheet-desktop,.sheet-mobile{animation:none}.chip,.dock-btn,.medallion,.turn-btn{transition:none}}