/* =========================================================================
   «Қазыбек би» мешіті — TV board.
   Forest palette: deep green base, lighter emerald prayer panel, bone-white
   hero card, one gold accent.  Layout in %, type in rem (app.js sets root).
   Old-WebKit safe: no grid/flex-gap/clamp/var()/dvh.  Motion: transform +
   opacity only.  base #0A3629/#072B21  panel #165F4A→#114C3B  bone #FBF9F3
   ink #0C3A2D  emerald #146B52  gold #E4C77E/#C9A95C  mint #7FD9B5
   ========================================================================= */
@font-face{ font-family:'KFGQPC';   src:url('fonts/KFGQPC%20Uthmanic%20Script%20HAFS%20Regular.otf') format('opentype'); font-display:swap; }
@font-face{ font-family:'AdwaSalaf';src:url('fonts/adwa-assalaf%20Regular.ttf') format('truetype'); font-display:swap; }
@font-face{ font-family:'KzSans'; src:url('fonts/kz-sans.ttf') format('truetype'); font-weight:normal; font-display:swap; }
@font-face{ font-family:'KzSans'; src:url('fonts/kz-sans-bold.ttf') format('truetype'); font-weight:bold; font-display:swap; }
@font-face{ font-family:'KzDisplay'; src:url('fonts/kz-display.ttf') format('truetype'); font-weight:normal; font-display:swap; }

*{ margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; }
html{ font-size:1vw; width:100%; height:100%; overflow:hidden; background:#0A3629; -webkit-text-size-adjust:100%; }
body{ width:100%; height:100%; overflow:hidden; background:#0A3629; color:#FFFFFF;
  font-family:'KzSans', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
img{ border:0; display:block; }
i{ font-style:normal; }
.stage{ position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; background:#0A3629; }

/* --------------------------- living background -------------------------- */
.bg{ position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden;
  background:-webkit-linear-gradient(top, #0C3F31 0%, #0A3629 50%, #072B21 100%);
  background:linear-gradient(to bottom, #0C3F31 0%, #0A3629 50%, #072B21 100%); }
.au{ position:absolute; border-radius:50%; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.au1{ left:-14%; top:-34%; width:70%; height:126%; opacity:.8;
  background:-webkit-radial-gradient(50% 50%, circle, #16704F 0%, rgba(22,112,79,.55) 30%, rgba(22,112,79,0) 72%);
  background:radial-gradient(circle at 50% 50%, #16704F 0%, rgba(22,112,79,.55) 30%, rgba(22,112,79,0) 72%);
  -webkit-animation:au1 17s ease-in-out infinite alternate; animation:au1 17s ease-in-out infinite alternate; }
.au2{ right:-16%; top:-24%; width:68%; height:136%; opacity:.8;
  background:-webkit-radial-gradient(50% 50%, circle, #125F48 0%, rgba(18,95,72,.55) 30%, rgba(18,95,72,0) 72%);
  background:radial-gradient(circle at 50% 50%, #125F48 0%, rgba(18,95,72,.55) 30%, rgba(18,95,72,0) 72%);
  -webkit-animation:au2 21s ease-in-out infinite alternate; animation:au2 21s ease-in-out infinite alternate; }
.au3{ left:22%; bottom:-64%; width:66%; height:124%; opacity:.22;
  background:-webkit-radial-gradient(50% 50%, circle, #B9A06A 0%, rgba(185,160,106,.5) 30%, rgba(185,160,106,0) 70%);
  background:radial-gradient(circle at 50% 50%, #B9A06A 0%, rgba(185,160,106,.5) 30%, rgba(185,160,106,0) 70%);
  -webkit-animation:au3 26s ease-in-out infinite alternate; animation:au3 26s ease-in-out infinite alternate; }
.pattern{ position:absolute; left:0; top:0; right:0; bottom:0; opacity:.06;
  background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23FFFFFF' stroke-width='1.1'><rect x='34' y='34' width='52' height='52'/><path d='M60 23 97 60 60 97 23 60Z'/><rect x='-26' y='-26' width='52' height='52'/><path d='M0 -37 37 0 0 37 -37 0Z'/><rect x='94' y='-26' width='52' height='52'/><path d='M120 -37 157 0 120 37 83 0Z'/><rect x='-26' y='94' width='52' height='52'/><path d='M0 83 37 120 0 157 -37 120Z'/><rect x='94' y='94' width='52' height='52'/><path d='M120 83 157 120 120 157 83 120Z'/></g></svg>"); background-repeat:repeat;
  -webkit-animation:drift 140s linear infinite; animation:drift 140s linear infinite; }
/* soft lights drifting upward */
.bokeh{ position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; }
.bk{ position:absolute; bottom:-14%; width:5rem; height:5rem; opacity:0;
  -webkit-animation:rise 52s linear infinite; animation:rise 52s linear infinite; }
.bk i{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; opacity:.24;
  background:-webkit-radial-gradient(50% 50%, circle, #D9C48C 0%, rgba(217,196,140,.45) 35%, rgba(217,196,140,0) 70%);
  background:radial-gradient(circle at 50% 50%, #D9C48C 0%, rgba(217,196,140,.45) 35%, rgba(217,196,140,0) 70%);
  -webkit-animation:sway 9s ease-in-out infinite alternate; animation:sway 9s ease-in-out infinite alternate; }
.bk2 i, .bk5 i, .bk8 i{ background:-webkit-radial-gradient(50% 50%, circle, #6FC9A6 0%, rgba(111,201,166,.45) 35%, rgba(111,201,166,0) 70%);
  background:radial-gradient(circle at 50% 50%, #6FC9A6 0%, rgba(111,201,166,.45) 35%, rgba(111,201,166,0) 70%); }
.bk1{ left:5%;  width:5.8rem; height:5.8rem;   -webkit-animation-duration:34s; animation-duration:34s; -webkit-animation-delay:-6s;  animation-delay:-6s; }
.bk2{ left:14%; width:10.2rem; height:10.2rem;   -webkit-animation-duration:46s; animation-duration:46s; -webkit-animation-delay:-30s; animation-delay:-30s; }
.bk3{ left:26%; width:4.6rem; height:4.6rem; -webkit-animation-duration:30s; animation-duration:30s; -webkit-animation-delay:-18s; animation-delay:-18s; }
.bk4{ left:37%; width:8.0rem; height:8.0rem; -webkit-animation-duration:41s; animation-duration:41s; -webkit-animation-delay:-44s; animation-delay:-44s; }
.bk5{ left:47%; width:6.4rem; height:6.4rem; -webkit-animation-duration:36s; animation-duration:36s; -webkit-animation-delay:-12s; animation-delay:-12s; }
.bk6{ left:58%; width:9.4rem; height:9.4rem; -webkit-animation-duration:47s; animation-duration:47s; -webkit-animation-delay:-52s; animation-delay:-52s; }
.bk7{ left:67%; width:5.2rem; height:5.2rem; -webkit-animation-duration:31s; animation-duration:31s; -webkit-animation-delay:-26s; animation-delay:-26s; }
.bk8{ left:76%; width:7.2rem; height:7.2rem;   -webkit-animation-duration:40s; animation-duration:40s; -webkit-animation-delay:-38s; animation-delay:-38s; }
.bk9{ left:85%; width:5.8rem; height:5.8rem;   -webkit-animation-duration:33s; animation-duration:33s; -webkit-animation-delay:-2s;  animation-delay:-2s; }
.bk10{ left:93%; width:8.7rem; height:8.7rem;  -webkit-animation-duration:44s; animation-duration:44s; -webkit-animation-delay:-20s; animation-delay:-20s; }
.bk3 i, .bk7 i{ -webkit-animation-duration:7s; animation-duration:7s; }
.bk2 i, .bk6 i, .bk10 i{ -webkit-animation-duration:12s; animation-duration:12s; }
/* a slow diagonal light beam crossing the whole board */
.beam{ position:absolute; top:-20%; left:-45%; width:32%; height:140%;
  background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.085) 50%, rgba(255,255,255,0) 100%);
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.085) 50%, rgba(255,255,255,0) 100%);
  -webkit-transform:skewX(-18deg) translateX(0); transform:skewX(-18deg) translateX(0);
  -webkit-animation:beam 22s ease-in-out infinite; animation:beam 22s ease-in-out infinite; }

/* ------------------------- left panel: prayers -------------------------- */
.lp{ position:absolute; left:2.6%; top:3.4%; width:38.8%; height:77.3%; overflow:hidden; border-radius:1.5rem;
  background:-webkit-linear-gradient(top, #165F4A 0%, #114C3B 100%);
  background:linear-gradient(to bottom, #165F4A 0%, #114C3B 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1.2rem 3rem rgba(3,20,14,.45), inset 0 1px 0 rgba(255,255,255,.14); }
.lp-glow{ position:absolute; left:-30%; top:-25%; width:120%; height:60%; opacity:.5;
  background:-webkit-radial-gradient(50% 50%, ellipse, #1D7A5C 0%, rgba(29,122,92,.5) 34%, rgba(29,122,92,0) 72%);
  background:radial-gradient(ellipse at 50% 50%, #1D7A5C 0%, rgba(29,122,92,.5) 34%, rgba(29,122,92,0) 72%);
  -webkit-animation:breathe 14s ease-in-out infinite; animation:breathe 14s ease-in-out infinite; }
.rows{ position:absolute; left:1.6rem; right:1.6rem; top:1.6rem; bottom:1.6rem; }
.pr{ position:relative; display:block; height:11.9%; margin-bottom:.55rem;
  -webkit-transition:height .6s cubic-bezier(0.23,1,0.32,1); transition:height .6s cubic-bezier(0.23,1,0.32,1); }
.pr-l{ margin-bottom:0; }
.pc-in{ position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden;
  background:rgba(4,28,20,.30); border:1px solid rgba(255,255,255,.09); border-radius:.9rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-transition:background-color .6s ease, border-color .6s ease; transition:background-color .6s ease, border-color .6s ease; }
.pn{ position:absolute; left:1.35rem; top:50%; margin-top:-.95rem; line-height:1.9rem; font-size:1.6rem; font-weight:bold; color:#FFFFFF; white-space:nowrap; }
.pa{ position:absolute; right:9.7rem; top:50%; margin-top:-1.2rem; line-height:2.4rem; font-family:'KFGQPC','Traditional Arabic',serif; direction:rtl;
  font-size:1.9rem; color:#E4C77E; white-space:nowrap; }
.ptag{ position:absolute; left:50%; margin-left:-2.55rem; top:50%; margin-top:-.85rem; line-height:1.7rem; width:5.1rem; text-align:center; border-radius:999px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:bold; color:#0C3A2D; background:#E4C77E; opacity:0;
  -webkit-transition:opacity .5s ease; transition:opacity .5s ease; }
.pt{ position:absolute; right:1.3rem; top:50%; margin-top:-1.35rem; line-height:2.7rem; font-size:2.7rem; font-weight:bold; letter-spacing:-.02em; color:#FFFFFF; white-space:nowrap; }
.pdate{ display:none; }
.pcd{ position:absolute; left:1.6rem; right:1.6rem; bottom:1.25rem; padding-top:1.05rem; display:none; white-space:nowrap; }
.pcd-l{ font-size:1.12rem; font-weight:bold; color:#2E5548; line-height:2rem; }
.pcd-v{ float:right; font-size:2rem; font-weight:bold; color:#0C3A2D; line-height:2rem; letter-spacing:-.01em; }

.pc-glow, .pc-sh{ display:none; }
.pr.is-next .ptag{ opacity:1; }
/* the prayer whose time it is now: a bone-white hero card in its own slot */
.pr.is-now{ height:33.4%; }
.pr.is-now .pc-in{ border-color:rgba(255,255,255,0); box-shadow:0 .9rem 2.6rem rgba(3,20,14,.35);
  background:-webkit-linear-gradient(top, #FFFFFF 0%, #F6F3EA 100%);
  background:linear-gradient(to bottom, #FFFFFF 0%, #F6F3EA 100%); }
.pr.is-now .ptag{ opacity:1; left:1.6rem; margin:0; top:1.35rem; width:auto; line-height:1.2rem; text-align:left; background:none; color:#0F5A44; font-size:.8rem; letter-spacing:.24em; }
.pr.is-now .pn{ left:1.6rem; top:3.15rem; margin:0; font-size:2.1rem; line-height:2.3rem; color:#0C3A2D; }
.pr.is-now .pa{ left:1.6rem; right:auto; top:5.7rem; margin:0; line-height:2.4rem; font-size:2rem; color:#146B52; }
.pr.is-now .pdate{ display:block; position:absolute; right:1.6rem; top:1.35rem; line-height:1.2rem; font-size:.95rem; color:#4E6E63; white-space:nowrap; }
.pr.is-now .pt{ right:1.6rem; top:2.85rem; margin:0; line-height:1; font-size:4.3rem; color:#146B52; letter-spacing:-.03em; }
.pr.is-now .pcd{ display:block; }
.pbar{ position:absolute; left:0; right:0; top:0; height:.42rem; border-radius:.21rem; overflow:hidden; background:rgba(12,58,45,.13); }
.pbar-f{ position:absolute; left:0; top:0; width:100%; height:100%;
  border-radius:.21rem; background:-webkit-linear-gradient(left, #146B52, #1E8A69); background:linear-gradient(to right, #146B52, #1E8A69);
  -webkit-transform-origin:0 50%; transform-origin:0 50%; -webkit-transform:scaleX(0); transform:scaleX(0);
  -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.23,1,0.32,1); transition:transform 1.2s cubic-bezier(0.23,1,0.32,1); overflow:hidden; }
.pbar-f i{ position:absolute; left:0; top:0; width:40%; height:100%;
  background:-webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  -webkit-transform:translateX(-100%); transform:translateX(-100%);
  -webkit-animation:flow 2.6s ease-in-out infinite; animation:flow 2.6s ease-in-out infinite; }
.pr.is-now .pc-glow{ display:block; position:absolute; left:6%; right:6%; top:30%; bottom:-8%; border-radius:1.4rem;
  box-shadow:0 .6rem 2.6rem .3rem rgba(255,255,255,.28); opacity:.35;
  -webkit-animation:glow 4.4s ease-in-out infinite; animation:glow 4.4s ease-in-out infinite; }
.pr.is-now .pc-sh{ display:block; position:absolute; top:-30%; left:0; width:30%; height:160%;
  background:-webkit-linear-gradient(left, rgba(20,107,82,0) 0%, rgba(20,107,82,.08) 50%, rgba(20,107,82,0) 100%);
  background:linear-gradient(to right, rgba(20,107,82,0) 0%, rgba(20,107,82,.08) 50%, rgba(20,107,82,0) 100%);
  -webkit-transform:skewX(-16deg) translateX(-160%); transform:skewX(-16deg) translateX(-160%);
  -webkit-animation:shimmer 9s ease-in-out infinite; animation:shimmer 9s ease-in-out infinite; }
.pc-in > .pc-glow{ z-index:0; } .pc-in > div{ z-index:1; }

/* -------------------- right header: mosque name + clock ------------------ */
.rh{ position:absolute; left:42.9%; right:2.6%; top:3.4%; height:15.2%; }
.brand{ position:absolute; left:0; bottom:.55rem; }
.kick{ font-family:'KzDisplay','Arial Narrow',Arial,sans-serif; font-size:1.05rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:.25rem; }
.name{ font-family:'KzDisplay','Arial Narrow',Arial,sans-serif; font-size:3.3rem; line-height:1.05; font-weight:normal; letter-spacing:.05em; text-transform:uppercase; color:#FFFFFF; white-space:nowrap; }
.clockbox{ position:absolute; right:0; bottom:.55rem; text-align:right; }
.clock{ font-family:'KzDisplay','Arial Narrow',Arial,sans-serif; font-size:5.6rem; line-height:1; font-weight:normal; letter-spacing:.01em; color:#FFFFFF; white-space:nowrap;
  text-shadow:0 .2rem 1.6rem rgba(0,0,0,.3); }
.clock .sec{ font-size:2rem; color:#E4C77E; margin-left:.45rem; letter-spacing:.02em; }
.clock .dg{ width:.55em; }
.clock .sep{ width:.3em; }
.date1{ position:absolute; left:0; right:0; top:.1rem; display:table; width:100%; line-height:1.5rem; font-family:'KzDisplay','Arial Narrow',Arial,sans-serif; font-size:1.2rem; letter-spacing:.08em; text-transform:uppercase; color:#E4C77E; white-space:nowrap; }
.dc{ display:table-cell; vertical-align:middle; white-space:nowrap; }
.dc-l{ width:1%; text-align:left; }
.dc-r{ width:1%; text-align:right; }
.dc-m{ padding:0 1.1rem; }
.dc-m i{ display:block; height:1px; background:rgba(228,199,126,.42); }
.dsep{ display:inline-block; margin:0 .55rem; font-size:.55rem; vertical-align:.25rem; color:rgba(228,199,126,.7); }
.dar{ font-family:'AdwaSalaf','Traditional Arabic',serif; direction:rtl; unicode-bidi:embed; font-size:1.3rem; letter-spacing:0; text-transform:none; color:#E4C77E; }
.dg{ display:inline-block; width:.62em; text-align:center; }
.sep{ display:inline-block; width:.34em; text-align:center; }
.tick{ -webkit-animation:blink 1s step-end infinite; animation:blink 1s step-end infinite; }

/* ------------------------ right: single ayat/dua panel ------------------ */
.col-r{ position:absolute; left:42.9%; top:20.2%; width:54.5%; height:60.5%; }
.pan{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; border-radius:1.5rem;
  background:-webkit-linear-gradient(top, rgba(255,255,255,.075) 0%, rgba(255,255,255,.035) 100%);
  background:linear-gradient(to bottom, rgba(255,255,255,.075) 0%, rgba(255,255,255,.035) 100%);
  border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 .8rem 2.4rem rgba(3,20,14,.25); }
.panword{ position:absolute; right:1.5rem; bottom:.9rem; direction:rtl; unicode-bidi:embed;
  font-family:'KFGQPC','Traditional Arabic',serif; font-size:2.6rem; line-height:1; color:rgba(228,199,126,.16);
  pointer-events:none; z-index:0; white-space:nowrap;
  -webkit-transition:opacity 1s ease; transition:opacity 1s ease; }
/* a gold comet running clockwise along the real rounded outline (SVG; sized by app.js) */
svg.ring{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ring .r0{ -webkit-animation:ring0 9s linear infinite; animation:ring0 9s linear infinite; }
.ring .r1{ -webkit-animation:ring1 9s linear infinite; animation:ring1 9s linear infinite; }
.ring .r2{ -webkit-animation:ring2 9s linear infinite; animation:ring2 9s linear infinite; }
.ring .r3{ -webkit-animation:ring3 9s linear infinite; animation:ring3 9s linear infinite; }
.ring .r4{ -webkit-animation:ring4 9s linear infinite; animation:ring4 9s linear infinite; }
.ring .r5{ -webkit-animation:ring5 9s linear infinite; animation:ring5 9s linear infinite; }
.ring .r6{ -webkit-animation:ring6 9s linear infinite; animation:ring6 9s linear infinite; }
.ring .r7{ -webkit-animation:ring7 9s linear infinite; animation:ring7 9s linear infinite; }
.cap{ position:absolute; left:1.9rem; top:1.3rem; line-height:1.6rem; font-size:1.2rem; letter-spacing:.2em; text-transform:uppercase; color:#E4C77E; font-weight:bold; white-space:nowrap;
  -webkit-transition:opacity 1s ease; transition:opacity 1s ease; }
.cap i{ display:inline-block; width:.5rem; height:.5rem; background:#E4C77E; margin-right:.9rem; vertical-align:.18rem; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.src{ position:absolute; right:1.6rem; top:1.15rem; display:inline-block; font-size:.84rem; letter-spacing:.06em; color:#E4C77E; white-space:nowrap;
  border:1px solid rgba(228,199,126,.4); border-radius:999px; padding:.34rem 1rem .36rem 1rem; background:rgba(4,28,20,.25);
  -webkit-transition:opacity 1s ease; transition:opacity 1s ease; }
.pbody{ position:absolute; left:2.4rem; right:2.4rem; top:4.1rem; bottom:1.4rem; overflow:hidden; text-align:center; opacity:1;
  -webkit-transition:opacity 1s ease; transition:opacity 1s ease; }
.pbody.is-swapping, .cap.is-swapping, .src.is-swapping, .panword.is-swapping{ opacity:0; }
.arb{ direction:rtl; text-align:center; color:#FFFFFF; text-shadow:0 .1rem .8rem rgba(0,0,0,.28); }
.arb-q{ font-family:'KFGQPC','Traditional Arabic',serif; font-size:2.2rem; line-height:1.7; }
.arb-h{ font-family:'AdwaSalaf','Traditional Arabic',serif; font-size:2.05rem; line-height:1.72; }
.orn{ position:relative; width:10rem; height:1px; margin:.75rem auto .8rem auto;
  background:-webkit-linear-gradient(left, rgba(228,199,126,0), rgba(228,199,126,.85), rgba(228,199,126,0));
  background:linear-gradient(to right, rgba(228,199,126,0), rgba(228,199,126,.85), rgba(228,199,126,0)); }
.orn:after{ content:''; position:absolute; left:50%; top:50%; width:.46rem; height:.46rem; margin:-.23rem 0 0 -.23rem; background:#E4C77E;
  -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.kaz{ font-size:1.35rem; line-height:1.5; color:rgba(255,255,255,.95); }

/* --------------------------- footer: QR shelf --------------------------- */
/* The original shelf and tile shape — QR on the left, label on the right,
   hairline between tiles — just seven of them now: four plain links, then
   three that crossfade between two destinations each (mosque socials,
   chief imam socials, official sites). Under those three, a pair of logos
   says which one is up: the live one gold, the waiting one dim. */
.ftr{ position:absolute; left:2.6%; top:83.4%; width:94.8%; height:13.6%; }
.qbar{ position:absolute; left:0; top:0; right:0; bottom:0; border-radius:1.5rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
/* Column track: 1.2fr for the four wide tiles, 1fr for the last three —
   i.e. 1.2 1.2 1.2 1.2 1 1 1 out of 7.8fr total. */
.qgs{ position:absolute; left:1.15rem; right:1.15rem; top:50%; margin-top:-2.7rem; height:5.4rem; font-size:0; white-space:nowrap; }
.qg{ display:inline-block; vertical-align:top; position:relative; width:15.384%; height:5.4rem; padding:0 .75rem; white-space:normal;
  border-right:1px solid rgba(255,255,255,.12); }
.qg-s{ width:12.820%; }
.qg:last-child{ border-right:0; }
.qt{ position:absolute; left:.75rem; top:0; width:5.4rem; height:5.4rem; padding:.4rem; border-radius:.6rem; overflow:hidden;
  background:-webkit-linear-gradient(top, #FFFFFF 0%, #F6F3EA 100%);
  background:linear-gradient(to bottom, #FFFFFF 0%, #F6F3EA 100%);
  border:1px solid rgba(228,199,126,.42);
  box-shadow:0 .3rem 1rem rgba(3,20,14,.34); }
.qt img{ width:100%; height:100%; }
.qw{ position:relative; width:100%; height:100%; }
.qi{ position:absolute; left:0; top:0; width:100%; height:100%; opacity:0;
  -webkit-transition:opacity 1s ease; transition:opacity 1s ease; }
.qi.is-shown{ opacity:1; }
.qx{ position:absolute; left:6.95rem; right:.75rem; top:50%;
  -webkit-transform:translateY(-50%); transform:translateY(-50%); }
.qn{ font-size:1.05rem; line-height:1.24rem; font-weight:bold; color:#FFFFFF; }
.nb{ white-space:nowrap; }
.qs{ font-size:.62rem; line-height:.8rem; color:rgba(255,255,255,.6); margin-top:.18rem; }
/* the two logos: the one showing now is gold and breathes very faintly, the other waits dim */
.qlg{ margin-top:.3rem; font-size:0; white-space:nowrap; }
.lg{ position:relative; display:inline-block; vertical-align:middle; width:1.1rem; height:1.1rem; margin-right:.45rem;
  color:#E4C77E; opacity:.26; -webkit-transition:opacity .9s ease; transition:opacity .9s ease; }
.lg.is-on{ opacity:1; }
.lg svg{ display:block; width:100%; height:100%; }
.lg-txt{ width:auto; height:1.1rem; font-size:.62rem; line-height:1.1rem; font-weight:bold; letter-spacing:.01em; }
.lg-txt .lg-halo{ display:none; }
.lg-txt.is-on{ -webkit-animation:lgtxt 3.4s ease-in-out infinite; animation:lgtxt 3.4s ease-in-out infinite; }
.lg-halo{ position:absolute; left:-.34rem; top:-.34rem; right:-.34rem; bottom:-.34rem; opacity:0; pointer-events:none;
  -webkit-transition:opacity .9s ease; transition:opacity .9s ease; }
.lg.is-on .lg-halo{ opacity:1; }
.lg-halo i{ display:block; width:100%; height:100%; border-radius:50%;
  background:-webkit-radial-gradient(50% 50%, circle, rgba(228,199,126,.26) 0%, rgba(228,199,126,0) 68%);
  background:radial-gradient(circle at 50% 50%, rgba(228,199,126,.26) 0%, rgba(228,199,126,0) 68%);
  -webkit-animation:lghalo 3.4s ease-in-out infinite; animation:lghalo 3.4s ease-in-out infinite; }
.credit{ position:fixed; right:4.1%; bottom:.4rem; font-size:.72rem; line-height:1rem; letter-spacing:.04em; color:rgba(255,255,255,.42); white-space:nowrap; z-index:9; }

/* ----------------------------- notice ----------------------------------- */
.notice{ position:absolute; left:0; bottom:0; width:100%; height:0; overflow:hidden; line-height:1.85rem; text-align:center;
  font-size:.95rem; letter-spacing:.06em; color:#0B3B2E; background:#E4C77E;
  -webkit-transition:height .5s ease; transition:height .5s ease; }
.notice.is-on{ height:1.85rem; }

/* --------- foreground layer (everything except the ambient bg) ---------- */
.ui{ -webkit-transition:opacity 1s ease; transition:opacity 1s ease; }
.ui.ui-hidden{ opacity:0; pointer-events:none; }

/* ------------- "prayer time has begun" full-screen announcement --------- */
.ov{ position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden;
  opacity:0; pointer-events:none; z-index:5;
  -webkit-transition:opacity 1s ease; transition:opacity 1s ease; }
.ov.is-on{ opacity:1; }
.ov-clock{ position:absolute; left:0; right:0; top:8%; text-align:center;
  font-family:'KzDisplay','Arial Narrow',Arial,sans-serif; font-size:3.2rem; line-height:1;
  letter-spacing:.01em; color:#FFFFFF; text-shadow:0 .2rem 1.6rem rgba(0,0,0,.3); }
.ov-clock .sec{ font-size:1.4rem; color:#E4C77E; margin-left:.35rem; }
.ov-msg{ position:absolute; left:2%; right:2%; top:26%; text-align:center; white-space:nowrap;
  font-family:'KzDisplay','Arial Narrow',Arial,sans-serif; font-size:3.9rem; line-height:1;
  letter-spacing:.02em; text-transform:uppercase; color:#FFFFFF; text-shadow:0 .2rem 2.4rem rgba(0,0,0,.4); }
.ov-msg-ar{ position:absolute; left:2%; right:2%; top:51%; text-align:center; white-space:nowrap;
  direction:rtl; unicode-bidi:embed; font-family:'KFGQPC','Traditional Arabic',serif; font-size:2.6rem;
  line-height:1; color:#FFFFFF; text-shadow:0 .2rem 2rem rgba(0,0,0,.4); }
.ov-track{ position:absolute; left:37%; right:37%; bottom:12%; height:.4rem; border-radius:.2rem;
  background:rgba(255,255,255,.16); overflow:hidden; }
.ov-bar-f{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:.2rem; overflow:hidden;
  -webkit-transform-origin:0 50%; transform-origin:0 50%; -webkit-transform:scaleX(0); transform:scaleX(0);
  background:-webkit-linear-gradient(left, #146B52, #1E8A69); background:linear-gradient(to right, #146B52, #1E8A69); }
.ov-bar-f i{ position:absolute; left:0; top:0; width:40%; height:100%;
  background:-webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  -webkit-transform:translateX(-100%); transform:translateX(-100%);
  -webkit-animation:flow 2.6s ease-in-out infinite; animation:flow 2.6s ease-in-out infinite; }

/* ---------------------------- entrance ---------------------------------- */
.lp, .rh, .col-r, .ftr{ opacity:0; -webkit-animation:fadeUp 1s cubic-bezier(0.23,1,0.32,1) forwards; animation:fadeUp 1s cubic-bezier(0.23,1,0.32,1) forwards; }
.rh   { -webkit-animation-delay:.1s; animation-delay:.1s; }
.col-r{ -webkit-animation-delay:.22s; animation-delay:.22s; }
.ftr  { -webkit-animation-delay:.36s; animation-delay:.36s; }

/* ---------------------------- keyframes --------------------------------- */
@-webkit-keyframes fadeUp{ from{opacity:0;-webkit-transform:translateY(.8rem);} to{opacity:1;-webkit-transform:translateY(0);} }
@keyframes fadeUp{ from{opacity:0;transform:translateY(.8rem);} to{opacity:1;transform:translateY(0);} }
@-webkit-keyframes breathe{ 0%,100%{opacity:.35;} 50%{opacity:.7;} }
@keyframes breathe{ 0%,100%{opacity:.35;} 50%{opacity:.7;} }
@-webkit-keyframes au1{ from{-webkit-transform:translate(0,0) scale(1);} to{-webkit-transform:translate(22%,16%) scale(1.15);} }
@keyframes au1{ from{transform:translate(0,0) scale(1);} to{transform:translate(22%,16%) scale(1.15);} }
@-webkit-keyframes au2{ from{-webkit-transform:translate(0,0) scale(1.1);} to{-webkit-transform:translate(-18%,20%) scale(.95);} }
@keyframes au2{ from{transform:translate(0,0) scale(1.1);} to{transform:translate(-18%,20%) scale(.95);} }
@-webkit-keyframes au3{ from{-webkit-transform:translate(0,0);} to{-webkit-transform:translate(-24%,-14%);} }
@keyframes au3{ from{transform:translate(0,0);} to{transform:translate(-24%,-14%);} }
@-webkit-keyframes drift{ from{background-position:0 0;} to{background-position:12rem 12rem;} }
@keyframes drift{ from{background-position:0 0;} to{background-position:12rem 12rem;} }
@-webkit-keyframes rise{ 0%{-webkit-transform:translateY(0);opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{-webkit-transform:translateY(-128vh);opacity:0;} }
@keyframes rise{ 0%{transform:translateY(0);opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{transform:translateY(-128vh);opacity:0;} }
@-webkit-keyframes sway{ from{-webkit-transform:translateX(-3.4rem);} to{-webkit-transform:translateX(3.4rem);} }
@keyframes sway{ from{transform:translateX(-3.4rem);} to{transform:translateX(3.4rem);} }
@-webkit-keyframes beam{ 0%{-webkit-transform:skewX(-18deg) translateX(0);} 100%{-webkit-transform:skewX(-18deg) translateX(460%);} }
@keyframes beam{ 0%{transform:skewX(-18deg) translateX(0);} 100%{transform:skewX(-18deg) translateX(460%);} }
@-webkit-keyframes glow{ 0%,100%{opacity:.35;} 50%{opacity:.8;} }
@keyframes glow{ 0%,100%{opacity:.35;} 50%{opacity:.8;} }
@-webkit-keyframes shimmer{ 0%{-webkit-transform:skewX(-16deg) translateX(-160%);} 28%,100%{-webkit-transform:skewX(-16deg) translateX(420%);} }
@keyframes shimmer{ 0%{transform:skewX(-16deg) translateX(-160%);} 28%,100%{transform:skewX(-16deg) translateX(420%);} }
@-webkit-keyframes flow{ 0%{-webkit-transform:translateX(-100%);} 100%{-webkit-transform:translateX(350%);} }
@keyframes flow{ 0%{transform:translateX(-100%);} 100%{transform:translateX(350%);} }
@-webkit-keyframes blink{ 0%,48%{opacity:1;} 52%,100%{opacity:.28;} }
@keyframes blink{ 0%,48%{opacity:1;} 52%,100%{opacity:.28;} }
@-webkit-keyframes lgtxt{ 0%,100%{text-shadow:0 0 .28rem rgba(228,199,126,.18);} 50%{text-shadow:0 0 .6rem rgba(228,199,126,.45);} }
@keyframes lgtxt{ 0%,100%{text-shadow:0 0 .28rem rgba(228,199,126,.18);} 50%{text-shadow:0 0 .6rem rgba(228,199,126,.45);} }
@-webkit-keyframes lghalo{ 0%,100%{-webkit-transform:scale(.93);} 50%{-webkit-transform:scale(1.02);} }
@keyframes lghalo{ 0%,100%{transform:scale(.93);} 50%{transform:scale(1.02);} }

@media (prefers-reduced-motion: reduce){
  .au, .pattern, .lp-glow, .pc-sh, .ring rect, .pc-glow, .bk, .bk i, .beam, .pbar-f i, .ov-bar-f i, .lg-halo i, .lg-txt.is-on{ -webkit-animation:none; animation:none; }
  .bk{ display:none; }
  .lp, .rh, .col-r, .ftr{ -webkit-animation:none; animation:none; opacity:1; }
  .ui, .ov{ -webkit-transition:none; transition:none; }
}