* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020a08;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.2vh;
  padding: 1.6vh 1.6vw;
  background: linear-gradient(135deg, #0a2620 0%, #041310 55%, #020a08 100%);
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1.6vw;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 1.6vh 1.6vw;
}

.brand { display: flex; align-items: center; gap: 1vw; flex-shrink: 0; }

.hidden { display: none !important; }

.preview-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #FAC775;
  color: #04342C;
  text-align: center;
  font-weight: 700;
  font-size: clamp(12px, 1.6vh, 20px);
  padding: 0.8vh 1vw;
}

.logo-badge {
  width: 5vh; height: 5vh; min-width: 40px; min-height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1D9E75, #0F6E56);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.logo-badge svg { width: 55%; height: 55%; }
.logo-badge img { width: 100%; height: 100%; object-fit: cover; }

.masjid-name { font-family: 'Jost', sans-serif; color: #fff; font-size: clamp(20px, 3vh, 48px); font-weight: 700; white-space: nowrap; }
.masjid-loc { color: rgba(255,255,255,0.5); font-size: clamp(12px, 1.6vh, 24px); font-weight: 500; }

.quote {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2vh;
  transition: opacity 0.4s ease;
}
.quote .quote-ar {
  font-family: 'Amiri', serif;
  font-weight: 700;
  color: #fff;
  font-size: clamp(15px, 2.0vh, 30px);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.quote .quote-ms {
  font-style: italic;
  font-weight: 500;
  color: rgba(250, 199, 117, 0.6);
  font-size: clamp(9px, 1vh, 15px);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clock-block { display: flex; align-items: center; gap: 1.3vw; flex-shrink: 0; }

.clock {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #5DCAA5;
  font-size: clamp(26px, 4.6vh, 64px);
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 0.35vw;
}
.clock .ampm { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.36em; color: rgba(255,255,255,0.55); font-weight: 600; }

.date-block {
  text-align: right;
  border-left: 0.5px solid rgba(255,255,255,0.14);
  padding-left: 1.1vw;
  color: rgba(255,255,255,0.6);
}
.date-block div:first-child { font-size: clamp(12px, 1.8vh, 26px); font-weight: 600; }
.date-block div:last-child { font-size: clamp(10px, 1.5vh, 22px); color: rgba(255,255,255,0.45); margin-top: 2px; }

/* ---------- middle ---------- */

.middle {
  display: grid;
  grid-template-columns: 1fr clamp(260px, 19vw, 360px);
  gap: 1.2vw;
  min-height: 0;
}

.poster {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #1a4638 0%, #0c2019 100%);
}

.poster-photo {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poster .badge {
  position: absolute;
  top: 1.6vh; left: 1.6vw;
  background: rgba(29,158,117,0.32);
  border-radius: 6px;
  padding: 0.7vh 1.1vw;
  font-size: clamp(12px, 1.5vh, 20px);
  color: #E1F5EE;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.poster-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10vh 2vw 2.6vh;
  background: linear-gradient(to top, rgba(2,10,8,0.94) 15%, rgba(2,10,8,0.5) 65%, transparent);
  transition: opacity 0.4s ease;
}

.poster-overlay h2 { font-family: 'Jost', sans-serif; color: #fff; font-size: clamp(30px, 6vh, 92px); font-weight: 700; line-height: 1.2; }
.poster-overlay p { color: rgba(255,255,255,0.75); font-size: clamp(16px, 2.6vh, 38px); font-weight: 500; margin-top: 1vh; }

/* gambar admin upload — poster-photo isi latar, overlay ni cuma bekalkan
   gradient nipis kat bawah supaya dots kekal jelas dibaca. Caption (p)
   papar cuma kalau admin isi satu — kalau kosong, xnampak apa-apa pun. */
.poster-overlay.type-photo {
  background: linear-gradient(to top, rgba(2, 10, 8, 0.8) 0%, transparent 35%);
}
.poster-overlay.type-photo h2 {
  display: none;
}
.poster-overlay.type-photo p {
  font-size: clamp(14px, 2vh, 28px);
}

/* ayat/hadith harian — kandungan reflektif, bukan caption gambar, so
   center penuh dlm kotak poster (bukan melekat bawah macam pengumuman
   biasa) dgn sikit hiasan minimalist (garis kecil pemisah). Fon lagi
   kecil drpd tajuk pengumuman sebab teks lagi panjang — elak overflow. */
.poster-overlay.type-quran,
.poster-overlay.type-hadith,
.poster-overlay.type-ceramah,
.poster-overlay.type-panduan,
.poster-overlay.type-occasion,
.poster-overlay.type-account {
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4vh 5vw;
  background: radial-gradient(ellipse at center, rgba(12, 36, 29, 0.7) 0%, rgba(2, 10, 8, 0.92) 100%);
}
.poster-overlay.type-quran h2,
.poster-overlay.type-hadith h2,
.poster-overlay.type-ceramah h2,
.poster-overlay.type-panduan h2,
.poster-overlay.type-occasion h2,
.poster-overlay.type-account h2 {
  font-size: clamp(20px, 3.2vh, 46px);
  line-height: 1.5;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.poster-overlay.type-quran h2 {
  font-family: 'Amiri', serif;
  line-height: 1.8;
}
.poster-overlay.type-quran h2::after,
.poster-overlay.type-hadith h2::after,
.poster-overlay.type-ceramah h2::after,
.poster-overlay.type-panduan h2::after,
.poster-overlay.type-occasion h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 2vh auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(93, 202, 165, 0.9), transparent);
  box-shadow: 0 0 12px rgba(93, 202, 165, 0.5);
}
.poster-overlay.type-quran .dots,
.poster-overlay.type-hadith .dots,
.poster-overlay.type-ceramah .dots,
.poster-overlay.type-panduan .dots,
.poster-overlay.type-occasion .dots,
.poster-overlay.type-account .dots {
  justify-content: center;
}

/* QR sumbangan — object-fit:contain & saiz tetap (BUKAN cover macam
   gambar galeri) — QR kena kekal tepat/tak dipotong supaya boleh diimbas. */
.poster-qr {
  display: none;
  width: clamp(160px, 22vh, 280px);
  height: clamp(160px, 22vh, 280px);
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin: 0 auto 2.4vh;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.poster-overlay.type-account .poster-qr {
  display: block;
}

/* countdown "bento grid" — satu card satu tarikh penting Hijrah, card
   plaing dekat (hero) lagi besar. Layout beza drpd slaid lain (bukan
   satu blok teks center), so h2/p disembunyikan, guna grid tersendiri. */
.countdown-grid { display: none; }
.poster-overlay.type-countdown {
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 3vh 3vw;
  background: radial-gradient(ellipse at center, rgba(2,10,8,0.55) 0%, rgba(2,10,8,0.8) 100%);
}
.poster-overlay.type-countdown h2,
.poster-overlay.type-countdown p {
  display: none;
}
.poster-overlay.type-countdown .countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 1.2vh 1vw;
  flex: 1;
  min-height: 0;
}
.poster-overlay.type-countdown .dots {
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1.6vh;
}

.countdown-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1vh 0.6vw;
  min-width: 0;
}
.countdown-card.hero {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(155deg, rgba(93, 202, 165, 0.4), rgba(15, 110, 86, 0.3));
  border: 1px solid rgba(93, 202, 165, 0.55);
  box-shadow: 0 14px 34px rgba(9, 74, 58, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.countdown-card .cc-title {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: clamp(10px, 1.3vh, 18px);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.countdown-card.hero .cc-title {
  font-size: clamp(16px, 2.2vh, 30px);
}
.countdown-card .cc-days {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: #5DCAA5;
  font-size: clamp(16px, 2.2vh, 32px);
  margin-top: 0.5vh;
  text-shadow: 0 0 18px rgba(93, 202, 165, 0.45);
}
.countdown-card.hero .cc-days {
  font-size: clamp(28px, 4vh, 56px);
  text-shadow: 0 0 26px rgba(93, 202, 165, 0.6);
}
.countdown-card .cc-days-label {
  font-size: clamp(8px, 0.95vh, 13px);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.2vh;
}

.dots { display: flex; gap: 7px; margin-top: 1.6vh; }
.dots span { width: 20px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); cursor: pointer; }
.dots span.active { width: 34px; background: #5DCAA5; }

.prayer-panel {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.countdown-block {
  background: linear-gradient(135deg, #1D9E75, #0F6E56);
  padding: 2.8vh 1vw;
  text-align: center;
  flex-shrink: 0;
}
.countdown-block .label { font-size: clamp(12px, 1.7vh, 24px); color: rgba(255,255,255,0.8); font-weight: 600; letter-spacing: 0.06em; }
.countdown-block .next-name { font-size: clamp(20px, 2.8vh, 40px); color: #fff; font-weight: 700; margin: 0.4vh 0; }
.countdown-block .next-time {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(24px, 4vh, 58px);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prayer-list {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.4vh 1.2vw;
}

.prayer-list li {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 0.4vw;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.prayer-list li:first-child { border-top: none; }

.prayer-list .p-name { font-size: clamp(17px, 3.6vh, 46px); font-weight: 600; color: rgba(255,255,255,0.68); }

.prayer-list .p-time {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(15px, 2.9vh, 36px);
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: clamp(72px, 8.5vw, 130px);
  text-align: right;
  justify-self: end;
}
.prayer-list li.info .p-name { color: rgba(255,255,255,0.38); font-weight: 500; }
.prayer-list li.info .p-time { color: rgba(255,255,255,0.55); font-weight: 600; }

.prayer-list li.upcoming {
  margin: 0.4vh 0;
  padding: 0 1vw;
  border-radius: 12px;
  border-top-color: transparent;
  background: linear-gradient(135deg, rgba(93,202,165,0.22), rgba(15,110,86,0.28));
  box-shadow: inset 0 0 0 1px rgba(93,202,165,0.35);
}
.prayer-list li.upcoming + li { border-top-color: transparent; }
.prayer-list li.upcoming .p-name { color: #E1F5EE; font-weight: 700; }
.prayer-list li.upcoming .p-time {
  width: auto;
  color: #04342C;
  background: #5DCAA5;
  border-radius: 999px;
  padding: 0.4vh 0.9vw;
  text-align: center;
}

/* ---------- ticker ---------- */

.ticker {
  background: linear-gradient(90deg, #0F6E56, #1D9E75);
  border-radius: 10px;
  padding: 1.3vh 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-block;
  padding-left: 100%;
  color: #E1F5EE;
  font-size: clamp(16px, 2.8vh, 40px);
  font-weight: 600;
  animation: ticker-scroll 28s linear infinite;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ---------- prayer state overlay ---------- */

.prayer-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2vh;
  background: radial-gradient(circle at 50% 42%, #123c30 0%, #041310 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.prayer-overlay.active { opacity: 1; pointer-events: auto; }

.prayer-overlay-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(48px, 11vh, 160px);
  font-weight: 700;
  color: #5DCAA5;
  letter-spacing: 0.02em;
}

.prayer-overlay-message {
  font-size: clamp(18px, 3.4vh, 46px);
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 0 4vw;
}

.prayer-overlay-countdown {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(26px, 5.4vh, 74px);
  font-weight: 700;
  color: #fff;
}

.prayer-overlay.urgent {
  background: radial-gradient(circle at 50% 42%, #4a3418 0%, #1f1207 72%);
}
.prayer-overlay.urgent .prayer-overlay-name { color: #FAC775; }