@font-face {
  font-family: UrduUI;
  src: local("Noto Nastaliq Urdu"), local("Jameel Noori Nastaleeq"), local("Noto Naskh Arabic"), local("Arial");
}

:root {
  --green: #003b34;
  --green-dark: #002b26;
  --green-soft: #06483f;
  --cream: #f5efe3;
  --panel: #fffaf0;
  --gold: #d6a23a;
  --gold-soft: #e7c36f;
  --text: #092f2a;
  --line: rgba(0, 43, 38, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--green-dark);
  font-family: UrduUI, "Segoe UI", Arial, sans-serif;
}

.screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 15vh 42vh 34vh 9vh;
  background: var(--green-dark);
}

/* TOP */
.topbar {
  background: var(--green-dark);
  color: white;
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.85fr;
  align-items: center;
  padding: 0 3vw;
  border-bottom: 3px solid var(--gold);
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.6vw;
  min-width: 0;
}

.logo {
  width: 5.6vw;
  height: 5.6vw;
  min-width: 58px;
  min-height: 58px;
  max-width: 92px;
  max-height: 92px;
  display: grid;
  place-items: center;
  color: var(--gold-soft);
  font-size: clamp(42px, 4.6vw, 74px);
}

.masjid-title {
  font-size: clamp(42px, 5vw, 78px);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.date-area {
  text-align: center;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.18;
  font-weight: 850;
  border-inline: 2px solid var(--gold);
  padding-inline: 2vw;
  white-space: nowrap;
}

.date-area div:last-child {
  color: var(--gold);
  font-size: 0.76em;
  margin-top: 0.2em;
}

.clock {
  direction: ltr;
  text-align: left;
  font-size: clamp(58px, 6.2vw, 96px);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

/* MIDDLE */
.middle {
  min-height: 0;
  background: var(--cream);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.6vw;
  padding: 2vh 1.8vw;
}

.next-box,
.azkar-box {
  min-height: 0;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.box-title {
  height: 16%;
  min-height: 46px;
  background: var(--green);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 850;
}

.next-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
}

.prayer-side {
  display: grid;
  align-content: center;
  text-align: center;
  padding: 1.5vh 1vw;
}

.next-name {
  color: var(--text);
  font-size: clamp(86px, 10.5vw, 160px);
  font-weight: 950;
  line-height: 0.88;
}

.line {
  width: 72%;
  margin: 1.6vh auto 1.2vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1vw;
  color: var(--gold);
}

.line::before,
.line::after {
  content: "";
  height: 2px;
  background: var(--gold);
}

.line span {
  font-size: clamp(24px, 2vw, 34px);
}

.next-label {
  color: var(--text);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 850;
  line-height: 1;
}

.next-time {
  direction: ltr;
  color: var(--text);
  font-size: clamp(62px, 7.2vw, 110px);
  font-weight: 950;
  line-height: 1;
  margin-top: 0.6vh;
}

.count-side {
  border-right: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  align-content: center;
  padding: 1vh 1.4vw;
}

.count-label {
  color: var(--text);
  font-size: clamp(32px, 3.5vw, 54px);
  font-weight: 850;
  margin-bottom: 2vh;
}

.count-wrap {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.count-unit {
  min-width: clamp(86px, 10vw, 150px);
  background: var(--green-dark);
  color: white;
  border-radius: 10px;
  text-align: center;
  padding: 0.9vh 0.8vw 1.2vh;
}

.count-unit span {
  display: block;
  font-size: clamp(54px, 6.5vw, 96px);
  font-weight: 900;
  line-height: 0.9;
}

.count-unit small {
  display: block;
  margin-top: 0.7vh;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 800;
}

.count-wrap b {
  color: var(--text);
  font-size: clamp(56px, 5vw, 82px);
}

/* AZKAR */
.azkar-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.zikr {
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: 1.8vh 1vw;
  text-align: center;
  border-left: 1.5px solid var(--line);
}

.zikr:last-child {
  border-left: 0;
}

.zikr-top {
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 850;
  color: var(--text);
  white-space: nowrap;
}

.zikr-main {
  width: clamp(92px, 10vw, 150px);
  height: clamp(92px, 10vw, 150px);
  border-radius: 50%;
  background: var(--green-dark);
  color: white;
  display: grid;
  place-items: center;
  padding: 1vw;
  font-size: clamp(22px, 2.1vw, 34px);
  font-weight: 850;
}

.zikr-count {
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  color: var(--text);
  font-size: clamp(20px, 2.1vw, 32px);
  font-weight: 850;
  min-width: 88px;
  padding: 0.25em 0.8em 0.35em;
}

/* TIMINGS */
.timings {
  min-height: 0;
  background: var(--green-dark);
  color: white;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  display: grid;
  grid-template-rows: 20% 80%;
  padding: 1vh 1.4vw 1.4vh;
}

.timings h2 {
  margin: 0;
  text-align: center;
  color: var(--gold);
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1;
  font-weight: 850;
}

.timings-row {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1.5px solid var(--gold);
  border-radius: 13px;
  overflow: hidden;
}

.timing-item {
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border-left: 1.5px solid var(--gold);
  padding: 0.3vh 0.4vw;
}

.timing-item:last-child {
  border-left: 0;
}

.timing-item.active {
  color: var(--gold);
  background: rgba(214, 162, 58, 0.08);
  box-shadow: inset 0 0 0 2px var(--gold);
}

.timing-name {
  font-size: clamp(22px, 2.4vw, 40px);
  font-weight: 850;
  line-height: 1;
}

.timing-time {
  direction: ltr;
  font-size: clamp(42px, 4.6vw, 74px);
  font-weight: 900;
  line-height: 1;
  margin-top: 0.7vh;
}

/* FOOTER */
.footer {
  background: var(--green-dark);
  color: var(--gold-soft);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 850;
  white-space: nowrap;
}

/* RESPONSIVE SAFETY */
@media (max-aspect-ratio: 1.45/1) {
  .screen {
    grid-template-rows: 13vh 44vh 34vh 9vh;
  }

  .middle {
    grid-template-columns: 1fr;
  }

  .azkar-box {
    display: none;
  }
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .date-area {
    display: none;
  }

  .logo {
    display: none;
  }

  .masjid-title {
    font-size: clamp(34px, 8vw, 58px);
  }

  .clock {
    font-size: clamp(42px, 10vw, 72px);
  }

  .timings-row {
    grid-template-columns: repeat(4, 1fr);
  }
}