*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0e17;--bg-card:#111827;--bg-card-hover:#1a2332;--gold:#f59e0b;--gold-dim:#b27308;--gold-glow:#f59e0b4d;--gold-soft:#f59e0b14;--white:#fff;--white-dim:#ffffffb3;--white-muted:#fff6;--border:#ffffff0f;--current-glow:#f59e0b26;--next-glow:#3b82f61f;--blue-accent:#3b82f6;--clock-scale:1;--countdown-scale:1}html,body{background:var(--bg-primary);width:100vw;height:100vh;color:var(--white);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}body{background:radial-gradient(ellipse 80% 60% at 50% 0%, #f59e0b0a 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 50% 100%, #3b82f608 0%, transparent 60%), var(--bg-primary);flex-direction:column;justify-content:center;align-items:center;padding:2vh 3vw;display:flex}.masjid-header{text-align:center;margin-bottom:2vh;position:relative}.crescent-icon{color:var(--gold);filter:drop-shadow(0 0 12px var(--gold-glow));margin-bottom:.5vh;font-size:clamp(1.8rem,3vw,2.8rem);animation:6s ease-in-out infinite crescentFloat;display:inline-block}@keyframes crescentFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.location-name{color:var(--white);letter-spacing:.02em;font-family:Amiri,serif;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:700;line-height:1.2}.location-sub{color:var(--white-muted);margin-top:.3vh;font-size:clamp(.7rem,1.2vw,.95rem)}.dates-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(1rem,3vw,3rem);margin-bottom:1.5vh;display:flex}.date-hijri{color:var(--gold);font-family:Amiri,serif;font-size:clamp(1.1rem,2.2vw,1.8rem);font-weight:700}.date-separator{background:var(--white-muted);border-radius:50%;flex-shrink:0;width:4px;height:4px}.date-gregorian{color:var(--white-dim);font-size:clamp(.9rem,1.6vw,1.3rem);font-weight:400}.clock-container{text-align:center;margin-bottom:2vh}.digital-clock{font-size:calc(clamp(3rem, 8vw, 7rem) * var(--clock-scale));letter-spacing:.04em;color:var(--white);font-variant-numeric:tabular-nums;text-shadow:0 0 40px #ffffff14;font-weight:800;line-height:1}.clock-seconds{color:var(--white-muted);vertical-align:super;margin-left:.1em;font-size:.45em;font-weight:500}.clock-ampm{color:var(--white-dim);margin-left:.15em;font-size:.3em;font-weight:500}.prayer-grid{grid-template-columns:repeat(var(--cols,6), 1fr);gap:clamp(.5rem,1.2vw,1.2rem);width:100%;max-width:1400px;margin-bottom:2.5vh;display:grid}.prayer-card{background:var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:clamp(12px,1.5vw,20px);padding:clamp(1rem,2vh,2rem) clamp(.8rem,1vw,1.5rem);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.prayer-card:before{content:"";background:linear-gradient(90deg, transparent, var(--border), transparent);height:3px;transition:background .4s;position:absolute;top:0;left:0;right:0}.prayer-card.is-current{border-color:var(--gold);background:linear-gradient(135deg,#f59e0b1f 0%,#f59e0b0a 100%);animation:3s ease-in-out infinite currentPulse;box-shadow:0 0 30px #f59e0b26,0 0 60px #f59e0b14,inset 0 0 30px #f59e0b0d}.prayer-card.is-current:before{background:linear-gradient(90deg, transparent, var(--gold), transparent);height:3px}.prayer-card.is-next{background:linear-gradient(135deg,#3b82f614 0%,#3b82f608 100%);border-color:#3b82f666;box-shadow:0 0 20px #3b82f614}.prayer-card.is-next:before{background:linear-gradient(90deg, transparent, var(--blue-accent), transparent)}@keyframes currentPulse{0%,to{box-shadow:0 0 30px #f59e0b26,0 0 60px #f59e0b14,inset 0 0 30px #f59e0b0d}50%{box-shadow:0 0 40px #f59e0b40,0 0 80px #f59e0b1f,inset 0 0 40px #f59e0b14}}.prayer-label{text-transform:uppercase;letter-spacing:.12em;color:var(--white-dim);margin-bottom:clamp(.4rem,1vh,.8rem);font-size:clamp(.7rem,1.1vw,1rem);font-weight:600;transition:color .3s}.prayer-card.is-current .prayer-label{color:var(--gold)}.prayer-card.is-next .prayer-label{color:var(--blue-accent)}.prayer-label-ar{color:var(--white-muted);margin-bottom:clamp(.5rem,1.2vh,1rem);font-family:Amiri,serif;font-size:clamp(.8rem,1.3vw,1.15rem);font-weight:400}.prayer-time{color:var(--white);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:clamp(1.6rem,3.5vw,3rem);font-weight:800;line-height:1}.prayer-card.is-current .prayer-time{color:var(--gold);text-shadow:0 0 20px var(--gold-glow)}.prayer-badge{text-transform:uppercase;letter-spacing:.08em;border-radius:100px;margin-top:clamp(.4rem,.8vh,.7rem);padding:.2em .8em;font-size:clamp(.55rem,.9vw,.75rem);font-weight:600;display:inline-block}.prayer-badge.badge-current{color:var(--gold);background:#f59e0b33;border:1px solid #f59e0b4d}.prayer-badge.badge-next{color:var(--blue-accent);background:#3b82f626;border:1px solid #3b82f640}.bottom-bar{box-sizing:border-box;justify-content:center;align-items:center;width:100%;max-width:1400px;min-height:120px;padding:0 clamp(120px,18vw,220px);display:flex;position:relative}.countdown-section{text-align:center;width:100%;max-width:min(560px,100%);margin:0 auto;overflow:hidden}.countdown-label{text-transform:uppercase;letter-spacing:.15em;color:var(--white-muted);margin-bottom:.3vh;font-size:clamp(.7rem,1.1vw,.95rem);font-weight:500}.countdown-prayer-name{font-family:Amiri,serif;font-size:calc(clamp(1.2rem, 2.2vw, 1.8rem) * var(--countdown-scale));color:var(--gold);margin-bottom:.5vh;font-weight:700}.countdown-timer{font-size:calc(clamp(1.6rem, 3.6vw, 3rem) * var(--countdown-scale));font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--white);white-space:nowrap;font-weight:800;line-height:1}.prayer-progress{width:min(100%, calc(460px * var(--countdown-scale)));margin:1.3vh auto 0}.prayer-progress[hidden]{display:none}.pp-track{background:#ffffff12;border-radius:999px;height:clamp(6px,.85vh,12px);position:relative;box-shadow:inset 0 1px 2px #00000073}.pp-fill{border-radius:inherit;background:linear-gradient(90deg, var(--gold-dim), var(--gold));width:0;height:100%;box-shadow:0 0 10px var(--gold-glow);will-change:width;transition:width 1s linear,box-shadow .6s;position:relative;overflow:hidden}.pp-fill.pp-instant{transition:none}.pp-fill:after{content:"";background:linear-gradient(90deg,#fff0,#fff4d6d9);width:10px;position:absolute;top:0;bottom:0;right:0}.pp-glint{background:linear-gradient(100deg,#0000 20%,#ffffff61 50%,#0000 80%);animation:3.6s ease-in-out infinite ppGlint;position:absolute;inset:0;transform:translate(-100%)}@keyframes ppGlint{0%{transform:translate(-100%)}55%,to{transform:translate(100%)}}.prayer-progress.is-soon .pp-fill{background:linear-gradient(90deg,#d97706,#fbbf24);animation:1.8s ease-in-out infinite ppPulse}.prayer-progress.is-imminent .pp-fill{background:linear-gradient(90deg,#f59e0b,#fde68a);animation-duration:.9s}@keyframes ppPulse{0%,to{box-shadow:0 0 8px #f59e0b59}50%{box-shadow:0 0 22px #fbbf24d9}}.prayer-progress.pp-done .pp-track{animation:1.4s ease-out ppDone}@keyframes ppDone{0%{box-shadow:0 0 #f59e0bbf}to{box-shadow:0 0 0 16px #f59e0b00}}.pp-labels{font-size:calc(clamp(.65rem, .95vw, .85rem) * var(--countdown-scale));letter-spacing:.04em;color:var(--white-muted);font-variant-numeric:tabular-nums;white-space:nowrap;justify-content:space-between;gap:1rem;margin-top:.7vh;display:flex}.pp-labels .pp-to{color:var(--gold)}.prayer-progress.is-soon .pp-labels .pp-to{color:#fbbf24}@media (prefers-reduced-motion:reduce){.pp-glint{display:none}.pp-fill{transition:none}.prayer-progress.is-soon .pp-fill,.prayer-progress.pp-done .pp-track{animation:none}}.countdown-timer .sep{color:var(--white-muted);animation:1s step-end infinite colonBlink}@keyframes colonBlink{0%,49%{opacity:1}50%,to{opacity:.3}}.qibla-section{text-align:center;position:absolute;top:50%;right:0;transform:translateY(-50%)}.night-section{text-align:center;width:clamp(110px,16vw,210px);position:absolute;top:50%;left:0;transform:translateY(-50%)}.night-section[hidden]{display:none}.night-seg-name{color:var(--gold);margin-bottom:.6vh;font-family:Amiri,serif;font-size:clamp(.95rem,1.5vw,1.3rem);font-weight:700;line-height:1.15}.night-section .night-track{height:clamp(10px,1.3vh,16px);margin:0 0 .6vh}@media (width<=720px){.night-section{width:min(320px,90vw);margin-top:1.5vh;position:static;transform:none}.qibla-section{margin-top:1.5vh;position:static;transform:none}.bottom-bar{flex-direction:column}}.qibla-label{text-transform:uppercase;letter-spacing:.15em;color:var(--white-muted);margin-bottom:.5vh;font-size:clamp(.65rem,1vw,.85rem);font-weight:500}.qibla-bearing{color:var(--gold);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700}.qibla-distance{color:var(--white-muted);margin-top:.2vh;font-size:clamp(.65rem,1vw,.85rem)}.back-link{color:var(--white-muted);opacity:.5;z-index:10;font-size:clamp(.65rem,.9vw,.8rem);text-decoration:none;transition:opacity .3s;position:fixed;top:1.5vh;left:1.5vw}.back-link:hover{opacity:1;color:var(--gold)}.top-controls{z-index:10;align-items:center;gap:.6rem;display:flex;position:fixed;top:1.5vh;right:1.5vw}.fullscreen-btn{border:1px solid var(--border);color:var(--white-muted);cursor:pointer;opacity:.5;z-index:10;background:0 0;border-radius:6px;padding:.4em .7em;font-size:clamp(.65rem,.9vw,.8rem);transition:all .3s}.fullscreen-btn:hover{opacity:1;border-color:var(--gold-dim);color:var(--gold)}.display-opts-btn{border:1px solid var(--border);color:var(--white-muted);cursor:pointer;opacity:.5;z-index:10;background:0 0;border-radius:6px;padding:.4em .7em;font-size:clamp(.65rem,.9vw,.8rem);transition:all .3s}.display-opts-btn:hover{opacity:1;border-color:var(--gold-dim);color:var(--gold)}.display-opts-panel{border:1px solid var(--border);z-index:20;background:#0f1520f5;border-radius:10px;width:260px;padding:14px 16px;display:none;position:fixed;top:calc(1.5vh + 2.6em);right:1.5vw;box-shadow:0 10px 40px #00000080}.display-opts-panel.open{display:block}.display-opts-panel h4{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;font-size:.78rem}.display-opts-panel label{color:var(--white-muted);margin:8px 0 4px;font-size:.74rem;display:block}.display-opts-panel .row{align-items:center;gap:6px;display:flex}.display-opts-panel input[type=range]{accent-color:var(--gold);flex:1}.display-opts-panel .val{text-align:right;min-width:44px;color:var(--white);font-variant-numeric:tabular-nums;font-size:.78rem}.display-opts-panel .actions{justify-content:flex-end;gap:6px;margin-top:12px;display:flex}.display-opts-panel button{border:1px solid var(--border);color:var(--white-muted);cursor:pointer;background:0 0;border-radius:6px;padding:4px 10px;font-size:.7rem}.display-opts-panel button:hover{color:var(--gold);border-color:var(--gold-dim)}.afam-credit{border:1px solid var(--border);color:var(--white-muted);letter-spacing:.04em;opacity:.78;z-index:10;background:#00000052;border-radius:999px;align-items:center;gap:.7em;padding:.65em 1.4em;font-size:clamp(.85rem,1.15vw,1.05rem);text-decoration:none;transition:all .3s;display:flex;box-shadow:0 2px 10px #00000059}.afam-credit:hover{opacity:1;color:var(--gold);border-color:var(--gold-dim);background:#0000008c;transform:translateY(1px)}.afam-credit .crescent{color:var(--gold);font-size:1.25em}.afam-credit .by{color:var(--white-muted);text-transform:uppercase;letter-spacing:.16em;font-size:.78em}.afam-credit .name{color:var(--white);font-size:1.02em;font-weight:700}.legal-link{color:var(--white-muted);letter-spacing:.08em;opacity:.4;z-index:10;white-space:nowrap;font-size:clamp(.6rem,.8vw,.75rem);text-decoration:none;transition:opacity .3s,color .3s;position:fixed;top:calc(1.5vh + 2.4em);left:1.5vw}.legal-link:hover{opacity:1;color:var(--gold)}.masjid-loading{background:var(--bg-primary);z-index:1000;flex-direction:column;justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:fixed;inset:0}.masjid-loading.hidden{opacity:0;pointer-events:none}.loader-ring{border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loader-text{color:var(--white-muted);margin-top:16px;font-size:.85rem}@media (width<=900px){.prayer-grid{grid-template-columns:repeat(3,1fr)}body{justify-content:flex-start;padding:3vh 2vw 1.5vh}}@media (width<=550px){.prayer-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.bottom-bar{flex-direction:column;gap:1.5rem}body{overflow-y:auto}}@media (width>=1920px){body{padding:3vh 5vw}}.fade-in{animation:.6s both fadeIn}.fade-in-delay-1{animation-delay:.1s}.fade-in-delay-2{animation-delay:.2s}.fade-in-delay-3{animation-delay:.3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}