/* SHABAB AZAN - TV display (masjid / office / shop). Works landscape 1920x1080 and portrait 1080x1920. Uses app.css tokens + fonts. */
html, body { overflow: hidden; }
body.tv { font-size: 1.6vmin; cursor: none; }
body.tv.setup-open { cursor: auto; }
.tvw { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: grid; padding: 2.4vmin 3vmin 0; gap: 1.6vmin;
  grid-template-columns: 1fr 1.25fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "head head" "clock grid" "next grid" "mq mq"; }
body.vert .tvw { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "head" "clock" "next" "grid" "mq"; padding: 3vmin 3.4vmin 0; gap: 2vmin; }
.tvhead { grid-area: head; display: flex; align-items: center; gap: 2vmin; }
.tvhead .logo { width: 9vmin; height: 9vmin; border-radius: 2vmin; object-fit: contain; background: rgba(255,255,255,.08); border: 1px solid var(--brd-gold); padding: .6vmin; flex: none; }
.tvhead .logo svg, .tvhead .logo img { width: 100%; height: 100%; object-fit: contain; }
.tvhead .nm { flex: 1; min-width: 0; }
.tvhead .nm b { display: block; font-size: 4.6vmin; line-height: 1.25; font-family: var(--f-head), var(--f-ml), var(--f-ar-ui); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, var(--gold2), var(--gold) 60%, var(--gold3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.lang-ml .tvhead .nm b { font-family: var(--f-mlh), var(--f-ui), var(--f-ar-ui), sans-serif; }
.tvhead .nm small { font-size: 2.2vmin; color: var(--ink2); }
.tvhead .dt { text-align: end; font-size: 2.5vmin; line-height: 1.45; }
.tvhead .dt .h { color: var(--gold); }
body.vert .tvhead { flex-wrap: wrap; }
body.vert .tvhead .dt { width: 100%; text-align: center; display: flex; justify-content: center; gap: 3vmin; }
.tvclock { grid-area: clock; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.tvclock .tm { font-family: var(--f-head), var(--f-ui); font-weight: 700; font-size: 19vmin; line-height: .95; letter-spacing: -.4vmin; direction: ltr; display: flex; align-items: baseline; text-shadow: 0 1vmin 4vmin rgba(0,0,0,.3); }
.tvclock .tm .s { font-size: 6vmin; color: var(--gold); margin-inline-start: 1vmin; min-width: 7vmin; }
.tvclock .tm .ap { font-size: 3.6vmin; color: var(--ink2); margin-inline-start: 1vmin; }
.tvclock .ttl { font-size: 3.4vmin; color: var(--gold); font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; font-weight: 700; margin-top: 1vmin; }
body.vert .tvclock .tm { font-size: 20vmin; }
.tvnext { grid-area: next; padding: 2.2vmin 2.6vmin; border-radius: 3vmin; }
.tvnext .row { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; }
.tvnext .l { font-size: 2.4vmin; color: var(--gold); font-weight: 700; }
.tvnext .n { font-size: 6vmin; font-weight: 700; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; line-height: 1.2; }
.tvnext .cd { font-family: var(--f-head), var(--f-ui); font-weight: 700; font-size: 7vmin; color: var(--gold2); direction: ltr; }
.tvnext .bar { height: 1.2vmin; border-radius: 1vmin; background: rgba(255,255,255,.12); margin-top: 1.6vmin; overflow: hidden; }
.tvnext .bar i { display: block; height: 100%; width: 0; border-radius: 1vmin; background: linear-gradient(90deg, var(--gold3), var(--gold), var(--gold2)); box-shadow: 0 0 2vmin var(--gold); transition: width 1s linear; }
.tvnext .iq { margin-top: 1.2vmin; font-size: 2.6vmin; color: var(--ink2); }
.tvnext .iq b { color: var(--ok); font-size: 3.4vmin; }
.tvgrid { grid-area: grid; display: grid; gap: 1.4vmin; grid-template-columns: 1fr; align-content: center; }
.tvrow { display: grid; grid-template-columns: 9vmin 1fr auto auto; align-items: center; gap: 2vmin; padding: 1.4vmin 2.4vmin; border-radius: 2.4vmin; }
.tvrow.noiq { grid-template-columns: 9vmin 1fr auto; }
.tvrow .ic { width: 8vmin; height: 8vmin; border-radius: 2vmin; display: grid; place-items: center; background: linear-gradient(145deg, rgba(var(--soft-rgb),.28), rgba(var(--soft-rgb),.08)); color: var(--soft); }
[data-theme="kasavu"] .tvrow .ic { background: rgba(184,134,11,.14); color: var(--gold3); }
.tvrow .ic svg { width: 5vmin; height: 5vmin; }
.tvrow .pn { font-size: 4.4vmin; font-weight: 700; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; line-height: 1.25; }
.tvrow .t { font-family: var(--f-head), var(--f-ui); font-size: 5vmin; font-weight: 700; direction: ltr; text-align: end; white-space: nowrap; }
.tvrow .t small { font-size: 2.2vmin; color: var(--ink2); margin-inline-start: .6vmin; }
.tvrow .t.iqt { color: var(--ok); font-size: 4.2vmin; min-width: 19vmin; }
.tvrow.cur { border-color: var(--brd-gold); background: linear-gradient(90deg, rgba(var(--glow-rgb),.22), var(--card) 70%); box-shadow: 0 0 3vmin rgba(var(--glow-rgb),.25); }
.tvrow.nx .t:not(.iqt) { color: var(--gold); }
.tvhdr { display: grid; grid-template-columns: 9vmin 1fr auto auto; gap: 2vmin; padding: 0 2.4vmin; font-size: 2.2vmin; color: var(--gold); font-weight: 700; }
.tvhdr span:nth-child(3), .tvhdr span:nth-child(4) { text-align: end; min-width: 19vmin; }
.tvhdr.noiq { grid-template-columns: 9vmin 1fr auto; }
body.vert .tvrow { padding: 1.3vmin 2.6vmin; }
body.vert .tvgrid { align-content: start; }
.marquee { grid-area: mq; height: 7vmin; margin: 0 -3vmin; overflow: hidden; display: flex; align-items: center; background: linear-gradient(90deg, var(--gold3), var(--gold), var(--gold3)); color: var(--accent-ink); font-weight: 700; font-size: 3.2vmin; }
[data-theme="kasavu"] .marquee { color: #fff; }
.marquee .mtx { white-space: nowrap; padding-inline-start: 100%; animation: marquee var(--mq, 30s) linear infinite; font-family: var(--f-ml), var(--f-ui), var(--f-ar-ui); }
body.rtl .marquee .mtx { animation-name: marqueeR; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes marqueeR { from { transform: translateX(0); } to { transform: translateX(100%); } }
.credit-tv { position: fixed; z-index: 3; bottom: 7.6vmin; right: 2vmin; font-size: 1.5vmin; color: var(--ink3); }
body.rtl .credit-tv { right: auto; left: 2vmin; }
.dim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; background: #000; opacity: 0; pointer-events: none; transition: opacity 3s; }
.dim.on { opacity: .5; }
.azanov { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; display: none; place-items: center; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(21,70,200,.92), rgba(5,12,40,.97)); }
[data-theme="kasavu"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(255,250,235,.96), rgba(239,226,192,.98)); }
[data-theme="makkah"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(40,32,10,.95), rgba(0,0,0,.98)); }
[data-theme="emerald"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(6,95,70,.95), rgba(1,28,22,.98)); }
[data-theme="bio"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(31,209,179,.28), rgba(6,18,31,.98) 70%); }
[data-theme="bio"] .marquee { background: linear-gradient(90deg, #0e9f86, #1fd1b3, #38bdf8); color: #04261f; }
[data-theme="bio"] .tvrow.cur { border-color: rgba(31,209,179,.55); background: linear-gradient(90deg, rgba(31,209,179,.24), var(--card) 70%); box-shadow: 0 0 3vmin rgba(31,209,179,.3); }
[data-theme="bio"] .tvnext { animation: bioGlow 5s ease-in-out infinite; }
[data-theme="bio"] .tvhead .nm b { background: linear-gradient(90deg, #8ff5e2, #1fd1b3 50%, #38bdf8); -webkit-background-clip: text; background-clip: text; }
[data-theme="bio"] .tvhead .logo { background: rgba(7,24,42,.6); border-color: rgba(31,209,179,.35); box-shadow: 0 0 2.4vmin rgba(31,209,179,.25); }
[data-theme="bio"] .tvnext .iq b, [data-theme="bio"] .tvrow .t.iqt { color: #34d399; }
[data-theme="bio"] .bio-orb.teal { width: 60vmin; height: 44vmin; } [data-theme="bio"] .bio-ring { width: 70vmin; height: 70vmin; right: -22vmin; bottom: -28vmin; } [data-theme="bio"] .bio-mark { width: 30vmin; height: 30vmin; top: 60vmin; right: 2vmin; }
.azanov.on { display: grid; animation: fadeUp .8s; }
.azanov .lg { width: 22vmin; height: 22vmin; margin: 0 auto; animation: breathe 3s ease-in-out infinite; }
.azanov .a1 { font-size: 5vmin; color: var(--gold); font-weight: 700; margin-top: 2vmin; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
.azanov .a2 { font-size: 14vmin; font-weight: 700; line-height: 1.2; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
.azanov .a3 { font-family: "Amiri", serif; font-size: 7vmin; color: var(--gold2); direction: rtl; margin-top: 1vmin; }
.azanov .a4 { margin-top: 2vmin; font-size: 3vmin; color: var(--ink2); }
.soundov { position: fixed; z-index: 10; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 90vw; bottom: 10vmin; padding: 1.6vmin 3.4vmin; border-radius: 99px; background: var(--gold); color: var(--accent-ink); font-size: 2.6vmin; font-weight: 700; box-shadow: 0 1vmin 4vmin rgba(0,0,0,.4); border: 0; animation: breathe 2.5s ease-in-out infinite; }
.cornerbtn { position: fixed; z-index: 11; top: 0; right: 0; width: 9vmin; height: 9vmin; opacity: 0; background: none; border: 0; }
.cornerbtn:focus, .cornerbtn:hover { opacity: .8; color: var(--gold); }
.cornerbtn svg { width: 4vmin; height: 4vmin; margin: auto; }
/* setup panel (remote friendly) */
.tvsetup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; overflow-y: auto; padding: 3vmin 4vmin 8vmin; background: linear-gradient(165deg, var(--bg2), var(--bg1) 60%, var(--bg3)); display: none; font-size: 2.3vmin; }
.tvsetup.on { display: block; }
.tvsetup h2 { margin: 0 0 2vmin; font-size: 4.6vmin; color: var(--gold); font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
.tvsetup .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46vmin, 1fr)); gap: 1.6vmin 2.4vmin; }
.tvsetup .f { padding: 1.6vmin 2vmin; border-radius: 2vmin; }
.tvsetup .f > label, .tvsetup .f > b { display: block; font-weight: 700; margin-bottom: 1vmin; color: var(--ink2); font-size: 2.1vmin; }
.tvsetup select, .tvsetup input[type=text] { width: 100%; font-size: 2.6vmin; padding: 1.2vmin 1.6vmin; border-radius: 1.4vmin; background: var(--card2); border: 2px solid var(--brd); color: var(--ink); }
.tvsetup select option { color: #111; background: #fff; }
.tvsetup .opts { display: flex; flex-wrap: wrap; gap: 1vmin; }
.tvsetup .opt { padding: 1.1vmin 2vmin; border-radius: 1.4vmin; background: var(--card2); border: 2px solid var(--brd); font-size: 2.3vmin; color: var(--ink); }
.tvsetup .opt.on { background: var(--gold); color: var(--accent-ink); border-color: var(--gold); font-weight: 700; }
.tvsetup .iqg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1vmin; }
.tvsetup .iqg div { text-align: center; }
.tvsetup .iqg input { width: 100%; text-align: center; font-size: 2.8vmin; padding: 1vmin; border-radius: 1.2vmin; background: var(--card2); border: 2px solid var(--brd); color: var(--ink); }
.tvsetup .actions { display: flex; gap: 2vmin; margin-top: 3vmin; flex-wrap: wrap; }
.tvsetup .big { padding: 2vmin 4vmin; border-radius: 2vmin; font-size: 3vmin; font-weight: 700; background: var(--gold); color: var(--accent-ink); border: 0; }
.tvsetup .big.ghost { background: var(--card2); color: var(--ink); border: 2px solid var(--brd); }
.tvsetup :focus { outline: .6vmin solid var(--gold2) !important; outline-offset: .4vmin; box-shadow: 0 0 0 1.2vmin rgba(var(--glow-rgb),.25); }
.tvsetup .logoprev { width: 10vmin; height: 10vmin; border-radius: 1.6vmin; object-fit: contain; background: rgba(255,255,255,.08); vertical-align: middle; margin-inline-end: 1.6vmin; }
.tvhint { position: fixed; z-index: 3; left: 50%; top: 1vmin; transform: translateX(-50%); font-size: 1.6vmin; color: var(--ink3); opacity: 0; animation: fadeUp 1s 1s forwards, fadeAway 1s 8s forwards; }
/* landscape: 6 rows must fit beside the clock */
body.land .tvw { grid-template-rows: auto 1fr auto auto; padding-top: 1.6vmin; gap: 1.2vmin; }
body.land .tvgrid { gap: 1vmin; min-height: 0; }
body.land .tvrow { padding: .9vmin 2.2vmin; grid-template-columns: 7.5vmin 1fr auto auto; }
body.land .tvrow.noiq { grid-template-columns: 7.5vmin 1fr auto; }
body.land .tvrow .ic { width: 6.6vmin; height: 6.6vmin; }
body.land .tvrow .ic svg { width: 4.2vmin; height: 4.2vmin; }
body.land .tvrow .pn { font-size: 3.9vmin; }
body.land .tvrow .t { font-size: 4.4vmin; }
body.land .tvrow .t.iqt { font-size: 3.8vmin; }
body.land .tvhdr { grid-template-columns: 7.5vmin 1fr auto auto; }
body.land .tvhdr.noiq { grid-template-columns: 7.5vmin 1fr auto; }
body.land .tvclock .tm { font-size: 17vmin; }
body.land .tvnext { padding: 1.8vmin 2.4vmin; }
body.land .marquee { height: 6vmin; font-size: 2.9vmin; }
body.land .credit-tv { bottom: 6.4vmin; }
[data-theme="kasavu"] .tvw { padding-top: 4vmin; }
[data-theme="kasavu"] .kasavu-band.bottom { display: none; }
.soundov { bottom: auto; top: 11vmin; }
/* SB's official art as TV background (setup: "Background art", link: &bg=1) - dimmed so the times stay readable */
body.bgart #bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(tv-bg.webp) center / cover no-repeat; opacity: .55; animation: tvArt 40s ease-in-out infinite alternate; }
body.bgart #bg::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(180deg, rgba(2,10,30,.45), rgba(2,10,30,.72)); }
@keyframes tvArt { from { transform: scale(1); } to { transform: scale(1.06); } }
body.bgart .azanov { background: linear-gradient(180deg, rgba(2,10,30,.35), rgba(2,10,30,.55)), url(tv-bg.webp) center / cover no-repeat; }
body.bgart .azanov > div { padding: 4vmin 8vmin; border-radius: 4vmin; background: rgba(2,10,30,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--brd-gold); }
/* TV splash (2 s) - official art */
.tvsplash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; background: #04163f url(tv-bg.webp) center / cover no-repeat; display: grid; place-items: center; transition: opacity .7s; }
body.vert .tvsplash { background-image: url(splash.webp); }
.tvsplash img { width: 46vmin; height: 46vmin; object-fit: contain; filter: drop-shadow(0 0 5vmin rgba(40,180,255,.7)); animation: splashLogoTv 1.1s cubic-bezier(.2,1.1,.3,1) both; }
body.vert .tvsplash img { opacity: 0; }
.tvsplash.out { opacity: 0; pointer-events: none; }
@keyframes splashLogoTv { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* ---- build 202 themes on TV ---- */
[data-fx] .tvnext { animation: fxGlow 6s ease-in-out infinite; }
[data-fx="light"] .marquee { color: #fff; }
[data-fx="light"] .tvrow .ic { background: linear-gradient(145deg, rgba(var(--glow-rgb),.18), rgba(var(--glow-rgb),.05)); color: var(--gold3); }
[data-fx="light"] .tvnext .bar { background: rgba(var(--glow-rgb),.14); }
[data-fx="light"] .tvhead .logo { background: rgba(255,255,255,.8); }
[data-fx="light"] .tvclock .tm { text-shadow: 0 .4vmin 2.4vmin rgba(255,255,255,.8); }
[data-fx="light"] .tvnext .iq b, [data-fx="light"] .tvrow .t.iqt { color: var(--ok); }
[data-fx="light"] .tvnext, [data-fx="light"] .tvrow { background: rgba(255,255,255,.8); }
[data-fx="light"] .tvrow.cur { background: linear-gradient(90deg, rgba(var(--glow-rgb),.2), rgba(255,255,255,.85) 70%); }
[data-theme="classic"] .marquee { background: linear-gradient(90deg, #8d1745, #c2185b 30%, #e3b552 50%, #c2185b 70%, #8d1745); color: #fff; }
[data-theme="classic"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(141,23,69,.95), rgba(34,4,15,.98)); }
[data-theme="marble"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(255,253,246,.97), rgba(236,228,210,.99)); }
[data-theme="marble"] .marquee { background: linear-gradient(90deg, #145a38, #1f7a4d 50%, #145a38); }
[data-theme="sunset"] .azanov { background: radial-gradient(circle at 50% 60%, rgba(239,106,60,.9), rgba(74,18,72,.96) 55%, rgba(20,4,26,.99)); }
[data-theme="sunset"] .marquee { background: linear-gradient(90deg, #c22f66, #ff9a3d 50%, #c22f66); color: #2a1000; }
[data-theme="lantern"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(126,80,230,.75), rgba(13,6,38,.98) 70%); }
[data-theme="ocean"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(246,252,252,.97), rgba(196,233,231,.99)); }
[data-theme="ocean"] .marquee { background: linear-gradient(90deg, #075760, #0a7680 50%, #075760); }
[data-theme="diamond"] .azanov { background: radial-gradient(circle at 50% 40%, rgba(40,52,70,.95), rgba(0,0,0,.99) 70%); }
[data-theme="diamond"] .marquee { background: linear-gradient(90deg, #8fa3bd, #ffffff 50%, #8fa3bd); color: #0a0f18; }
/* art scaled for TV (vmin) */
body.tv .lt { width: calc(8vmin * var(--ls)); } body.tv .lt-lamp { height: calc(16vmin * var(--ls)); } body.tv .lt-cord { height: calc(var(--len) * 1.2); }
body.tv .lt-halo { top: calc(var(--len) * 1.2 + 5vmin * var(--ls)); width: calc(22vmin * var(--ls)); height: calc(22vmin * var(--ls)); margin-left: calc(-11vmin * var(--ls)); }
body.tv .lt.l1 { left: 1.5%; } body.tv .lt.r1 { right: 1.5%; } body.tv .lt.l2 { left: 9%; } body.tv .lt.r2 { right: 9%; }
body.tv .lt-moon { width: 16vmin; height: 16vmin; }
body.tv .ss-sun { width: 40vmin; height: 40vmin; margin-left: -20vmin; bottom: 14vmin; } body.tv .ss-dunes.back { height: 28vmin; bottom: 5vmin; } body.tv .ss-dunes.mid { height: 24vmin; } body.tv .ss-dunes.front { height: 18vmin; }
body.tv .oc-sea { height: 20vmin; } body.tv .oc-hills { bottom: 17vmin; height: 9vmin; }
body.tv .mb-dome { height: 34vmin; width: 80vmin; opacity: .4; } body.tv .mb-frame { height: 16vmin; }
body.tv .dm-gem { width: 44vmin; height: 37vmin; } body.tv .cl-arch { height: 18vmin; }
[data-theme="glow"] .azanov { background: radial-gradient(circle at 50% 45%, rgba(11,58,134,.95), rgba(3,11,31,.98) 70%); }
[data-theme="glow"] .marquee { background: linear-gradient(90deg, #0891b2, #22d3ee 50%, #0891b2); color: #021526; }
[data-theme="glow"] .tvhead .nm b { background: linear-gradient(180deg, #ffffff, #e6f0ff 45%, #b8c7dd); -webkit-background-clip: text; background-clip: text; }
[data-theme="glow"] .tvclock .tm { background: linear-gradient(180deg, #ffffff, #e6f0ff 45%, #a9bad3); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 2vmin rgba(34,211,238,.4)); }
[data-theme="glow"] .tvclock .tm .s { -webkit-text-fill-color: #22d3ee; } [data-theme="glow"] .tvclock .tm .ap { -webkit-text-fill-color: rgba(230,240,255,.8); }
[data-theme="glow"] .tvrow.cur { border-color: #22d3ee; background: linear-gradient(90deg, rgba(34,211,238,.24), rgba(29,78,216,.2) 70%); box-shadow: 0 0 3vmin rgba(34,211,238,.35); }
[data-theme="glow"] .tvrow .ic { background: linear-gradient(140deg, rgba(37,99,235,.55), rgba(8,30,80,.7)); color: #a5f3fc; border: 1px solid rgba(34,211,238,.45); }
[data-theme="glow"] .tvhead .logo { border-color: #22d3ee; box-shadow: 0 0 2.4vmin rgba(34,211,238,.35); }
body.tv .gl-frame { border-radius: 3vmin; } body.tv .gl-crescent { width: 50vmin; height: 50vmin; } body.tv .gl-waves { width: 12vmin; height: 20vmin; bottom: 18vmin; } body.tv .gl-orb { width: 70vmin; height: 70vmin; margin-left: -35vmin; }
/* Azan-now overlay: expanding glow rings behind the logo */
.azanov .lg { position: relative; }
.azanov .lg .brandlogo { position: relative; z-index: 1; border-radius: 22%; }
.azanov .azr { position: absolute; left: 50%; top: 50%; width: 22vmin; height: 22vmin; margin: -11vmin 0 0 -11vmin; border-radius: 50%; border: .5vmin solid var(--gold); box-shadow: 0 0 3vmin var(--gold); opacity: 0; animation: azRing 3s ease-out infinite; }
.azanov .azr:nth-child(2) { animation-delay: 1s; } .azanov .azr:nth-child(3) { animation-delay: 2s; }
@keyframes azRing { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
/* ===================== build 204: MASJID MODE ===================== */
/* the stage: everything lives in it; for a vertical TV that reports landscape it is turned 90 deg (tv.js orient()) */
#stage { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 50% 50%; }
body.rot .cornerbtn { opacity: 0; }
/* timing screen: 6 rows + the Jumu'ah line must fit (no scrolling) */
.tvrows { display: grid; gap: 1.4vmin; }
body.land .tvrows { gap: .7vmin; }
body.land .tvgrid { align-content: center; }
.tvrow.jrow { padding-top: .7vmin; padding-bottom: .7vmin; border-style: dashed; }
.tvrow.jrow .ic { opacity: .8; }
body.land .tvrow.jrow .ic { height: 5vmin; } body.land .tvrow.jrow .pn { font-size: 3.4vmin; } body.land .tvrow.jrow .t { font-size: 3.7vmin; } body.land .tvrow.jrow .t.iqt { font-size: 3.4vmin; }
.tvrow .t em { font-style: normal; font-family: var(--f-ui), var(--f-ml), var(--f-ar-ui), sans-serif; font-size: 1.9vmin; font-weight: 700; color: var(--ink2); margin-inline-end: 1.2vmin; vertical-align: middle; }
body.lang-ml .tvrow .t em { font-family: var(--f-ml), var(--f-ui), sans-serif; }
.tvnext .eidl { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; margin-top: 1vmin; padding: .8vmin 1.6vmin; border-radius: 1.4vmin; background: rgba(var(--glow-rgb), .16); border: 1px solid var(--brd-gold); font-size: 2.4vmin; }
.tvnext .eidl span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvnext .eidl b { color: var(--gold2); direction: ltr; white-space: nowrap; font-family: var(--f-head), var(--f-ui); font-size: 2.8vmin; }
body.lang-ml .tvnext .eidl b, body.lang-ta .tvnext .eidl b, body.lang-kn .tvnext .eidl b { font-family: var(--f-ui), var(--f-ml), sans-serif; }
.tvnext .iq:empty { display: none; }
body.land .tvnext .iq { margin-top: .8vmin; }
body.nomq .credit-tv { bottom: 1vmin; }
body.nomq .tvw { padding-bottom: 3.4vmin; }
.tvhead .nm small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* full screens (Azan, Iqamah countdown, phone off, quiet, khutbah, Eid) */
.azanov .ovw { position: relative; text-align: center; max-width: 92%; margin: 0 auto; }
.azanov .a2.sm { font-size: 8vmin; }
.azanov .ovname { font-size: 3.4vmin; color: var(--ink2); margin-bottom: 1vmin; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
.azanov .ovcd { font-family: var(--f-head), var(--f-ui); font-weight: 800; font-size: 26vmin; line-height: 1.05; direction: ltr; color: var(--gold2); margin: 1vmin 0 2vmin; font-variant-numeric: tabular-nums; letter-spacing: -.3vmin; text-shadow: 0 0 5vmin rgba(var(--glow-rgb), .45); }
.azanov.k-eidcount .ovcd { font-size: 17vmin; }
.azanov .lg .brandlogo { width: 100%; height: 100%; object-fit: contain; }
#stage .azanov.k-phoneoff { background: radial-gradient(circle at 50% 38%, rgba(150,16,30,.95), rgba(40,4,10,.98) 55%, rgba(6,2,4,.99)); color: #fff; }
.phoneoff .phi { width: 32vmin; height: 32vmin; margin: 0 auto; color: #ff6b6b; filter: drop-shadow(0 0 3vmin rgba(255,60,60,.6)); animation: breathe 2.4s ease-in-out infinite; }
.phoneoff .phi svg { width: 100%; height: 100%; }
.phoneoff .pm { font-size: 7.4vmin; font-weight: 800; line-height: 1.35; margin-top: 3vmin; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; color: #fff; }
.phoneoff .pa { font-family: "Noto Naskh Arabic", var(--f-ar-ui), serif; font-size: 4.6vmin; color: #ffd1d1; margin-top: 2.4vmin; line-height: 1.6; }
.phoneoff .pe { font-family: var(--f-ui), sans-serif; font-size: 3.4vmin; color: rgba(255,255,255,.75); margin-top: 1vmin; }
#stage .azanov.k-quiet { background: #000; color: rgba(255,255,255,.55); }
.quiet .qclk { font-family: var(--f-head), var(--f-ui); font-size: 13vmin; font-weight: 700; direction: ltr; color: rgba(255,255,255,.42); }
.quiet .a1 { color: rgba(255,255,255,.5) !important; font-size: 4.4vmin !important; }
.quiet .a4 { color: rgba(255,255,255,.35) !important; }
#stage .azanov.k-khutbah { background: radial-gradient(circle at 50% 40%, rgba(8,70,60,.95), rgba(2,14,14,.98) 70%); color: #fff; }
.azanov .phs { display: flex; align-items: center; justify-content: center; gap: 2vmin; margin-top: 4vmin; color: #ffb4b4; font-size: 3.6vmin; font-weight: 700; }
.azanov .phs svg { width: 9vmin; height: 9vmin; flex: none; }
.azanov.k-khutbah .a2 { font-size: 16vmin; color: #b9ffe9; }
.azanov.k-eid .a2 { font-size: 15vmin; background: linear-gradient(180deg, #fff6d6, var(--gold2) 50%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.azanov .stars { position: absolute; top: -10vmin; right: -10vmin; bottom: -10vmin; left: -10vmin; pointer-events: none; }
.azanov .stars i { position: absolute; width: 2vmin; height: 2vmin; background: var(--gold2); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 2.6s ease-in-out infinite; }
.azanov .stars i:nth-child(1) { top: 6%; left: 10%; } .azanov .stars i:nth-child(2) { top: 14%; right: 12%; animation-delay: .5s; width: 3vmin; height: 3vmin; }
.azanov .stars i:nth-child(3) { bottom: 18%; left: 6%; animation-delay: 1s; } .azanov .stars i:nth-child(4) { bottom: 8%; right: 8%; animation-delay: 1.5s; width: 3vmin; height: 3vmin; }
.azanov .stars i:nth-child(5) { top: 44%; left: 2%; animation-delay: .8s; } .azanov .stars i:nth-child(6) { top: 40%; right: 2%; animation-delay: 2s; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
body.vert .azanov .a2 { font-size: 12vmin; } body.vert .azanov .a2.sm { font-size: 8vmin; } body.vert .azanov .ovcd { font-size: 24vmin; }
body.vert .azanov.k-eidcount .ovcd { font-size: 15vmin; } body.vert .phoneoff .pm { font-size: 6.6vmin; }
.dim { opacity: 0; }
/* settings */
.tvsetup { padding: 0; overflow: hidden; }
.ms { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 32vmin 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "head head" "nav body" "act act"; gap: 1.6vmin 2.4vmin; padding: 2.4vmin 3vmin; }
body.vert .ms { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; grid-template-areas: "head" "nav" "body" "act"; }
.mshead { grid-area: head; display: flex; align-items: center; gap: 2vmin; min-width: 0; }
.mslogo { width: 7vmin; height: 7vmin; flex: none; } .mslogo img { width: 100%; height: 100%; border-radius: 22%; }
.mshead h2 { margin: 0; font-size: 4.2vmin; color: var(--gold); font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; white-space: nowrap; }
.mshead small { color: var(--ink2); font-size: 2.2vmin; margin-inline-start: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msnav { grid-area: nav; display: flex; flex-direction: column; gap: 1vmin; overflow-y: auto; min-height: 0; padding: .8vmin; }
body.vert .msnav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
.msnav .nb { text-align: start; padding: 1.4vmin 2vmin; border-radius: 1.6vmin; font-size: 2.5vmin; font-weight: 700; background: var(--card2); border: 2px solid var(--brd); color: var(--ink); line-height: 1.3; font-family: var(--f-ml), var(--f-ui), var(--f-ar-ui), sans-serif; }
.msnav .nb.on { background: var(--gold); color: var(--accent-ink); border-color: var(--gold); }
.msbody { grid-area: body; overflow-y: auto; min-height: 0; padding: .8vmin; }
.msbody h3 { margin: 0 0 1.4vmin; font-size: 3.4vmin; color: var(--gold2); font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
.tvsetup .grid { grid-template-columns: repeat(auto-fill, minmax(44vmin, 1fr)); }
.tvsetup .wide { grid-column: 1 / -1; }
.tvsetup .f p { margin: .4vmin 0 1vmin; font-size: 2.3vmin; }
.tvsetup .help { font-size: 2vmin; color: var(--ink2); margin: 1.2vmin 0 0; line-height: 1.5; }
.tvsetup .help.forgot { background: rgba(255,180,0,.1); border: 1px solid rgba(255,180,0,.45); padding: 1.4vmin 1.8vmin; border-radius: 1.4vmin; color: var(--ink); font-size: 2.2vmin; }
.tvsetup .help.ver { opacity: .7; }
.tvsetup .actions { grid-area: act; margin: 0; }
.tvsetup .opt, .tvsetup .sb, .tvsetup .big { font-family: var(--f-ml), var(--f-ui), var(--f-ar-ui), sans-serif; }
.stp { display: flex; align-items: center; gap: 1vmin; flex-wrap: wrap; }
.stp b { min-width: 14vmin; text-align: center; font-size: 3.2vmin; padding: .6vmin 1.4vmin; border-radius: 1.2vmin; background: rgba(0,0,0,.22); }
[data-fx="light"] .stp b { background: rgba(255,255,255,.7); }
.stp b small { display: block; font-size: 1.9vmin; color: var(--ink2); font-weight: 400; }
.tstp b { direction: ltr; }
.sb { min-width: 6.4vmin; height: 6.4vmin; padding: 0 1.4vmin; border-radius: 1.4vmin; font-size: 2.6vmin; font-weight: 700; background: var(--card2); border: 2px solid var(--brd); color: var(--ink); direction: ltr; }
.iqtab { display: grid; gap: 0; }
.iqtab .iqr { display: grid; grid-template-columns: 16vmin auto 1fr; align-items: center; gap: 1.2vmin 2vmin; padding: 1.2vmin 0; border-bottom: 1px solid var(--brd); }
.iqtab .iqr:last-child { border-bottom: 0; }
.iqtab .pn { font-size: 3vmin; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
body.vert .iqtab .iqr { grid-template-columns: 16vmin 1fr; } body.vert .iqtab .iqr .stp { grid-column: 1 / -1; }
.eidg { display: flex; flex-wrap: wrap; gap: 2vmin 4vmin; margin: 1vmin 0 1.4vmin; }
.eidg small { display: block; color: var(--ink2); font-size: 2vmin; margin-bottom: .6vmin; }
.tvsetup textarea { width: 100%; font-size: 2.6vmin; padding: 1.2vmin 1.6vmin; border-radius: 1.4vmin; background: var(--card2); border: 2px solid var(--brd); color: var(--ink); font-family: var(--f-ml), var(--f-ui), var(--f-ar-ui), sans-serif; resize: none; box-sizing: border-box; }
.tvsetup span.logoprev { display: inline-block; } .tvsetup span.logoprev img { width: 100%; height: 100%; border-radius: 22%; }
.tvsetup :focus, .pinpad :focus { outline: .6vmin solid var(--gold2) !important; outline-offset: .4vmin; box-shadow: 0 0 0 1.2vmin rgba(var(--glow-rgb),.25); }
/* admin PIN pad */
.pinpad { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; display: none; place-items: center; overflow-y: auto; padding: 3vmin; background: linear-gradient(165deg, var(--bg2), var(--bg1) 60%, var(--bg3)); }
.pinpad.on { display: grid; }
.pinbox { width: 74vmin; max-width: 94%; text-align: center; padding: 3vmin; border-radius: 3vmin; box-sizing: border-box; }
.pinlogo { width: 10vmin; height: 10vmin; margin: 0 auto; } .pinlogo img { width: 100%; height: 100%; border-radius: 22%; }
.pinbox h2 { color: var(--gold); font-size: 4vmin; margin: 1vmin 0; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
.pinbox p { font-size: 2.7vmin; margin: .6vmin 0; } .pinbox .help { font-size: 2vmin; color: var(--ink2); line-height: 1.5; }
.pinbox .help.forgot { text-align: start; background: rgba(255,180,0,.1); border: 1px solid rgba(255,180,0,.45); padding: 1.4vmin 1.8vmin; border-radius: 1.4vmin; color: var(--ink); }
.pinbox .dots { display: flex; justify-content: center; gap: 2vmin; margin: 2vmin 0 1vmin; direction: ltr; }
.pinbox .dots i { width: 3vmin; height: 3vmin; border-radius: 50%; border: .4vmin solid var(--gold); }
.pinbox .dots i.f { background: var(--gold); }
.pinbox .pmsg { min-height: 3vmin; color: #ff8080; font-size: 2.4vmin; }
.pinbox .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vmin; margin: 1.4vmin auto; max-width: 48vmin; direction: ltr; }
.pinbox .pk { height: 8.5vmin; font-size: 4vmin; font-weight: 700; border-radius: 2vmin; background: var(--card2); border: 2px solid var(--brd); color: var(--ink); }
.pinbox .pk.ok { background: var(--gold); color: var(--accent-ink); border-color: var(--gold); }
.pinbox .opts { display: flex; justify-content: center; gap: 1.4vmin; flex-wrap: wrap; margin-top: 1vmin; }
.pinbox .opt { padding: 1.1vmin 2.4vmin; border-radius: 1.4vmin; background: var(--card2); border: 2px solid var(--brd); font-size: 2.3vmin; color: var(--ink); font-family: var(--f-ml), var(--f-ui), var(--f-ar-ui), sans-serif; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: 4vmin; transform: translateX(-50%); max-width: 86%; padding: 1.6vmin 3vmin; border-radius: 2vmin; background: rgba(0,0,0,.88); color: #fff; font-size: 2.6vmin; opacity: 0; transition: opacity .4s; pointer-events: none; text-align: center; }
.toast.on { opacity: 1; }
/* full screens are opaque: the timing screen must not show through */
#stage .azanov { background-color: #02060f; }
[data-fx="light"] #stage .azanov, [data-theme="kasavu"] #stage .azanov { background-color: #f4efe2; }
#stage .azanov.k-phoneoff { background-color: #0a0206; }
#stage .azanov.k-khutbah { background-color: #021010; }
#stage .azanov.k-quiet { background-color: #000; }
/* vertical: Eid line + 7 rows + credit must fit */
body.vert .tvw { gap: 1.6vmin; }
body.vert .tvrows { gap: 1.1vmin; }
body.vert .tvrow { padding-top: 1.1vmin; padding-bottom: 1.1vmin; }
body.vert .tvclock .tm { font-size: 19vmin; }
/* steppers: minus left, plus right in every language (numbers read left to right) */
.stp { direction: ltr; } .stp b { unicode-bidi: plaintext; }
.pinpad.on { display: flex; } .pinbox { margin: auto; }