/*
 * Masjid Display Portal v4.2.3
 * Paparan khas Android/TV 1920x1080 yang responsif.
 * Dimuatkan selepas semua CSS Player lama supaya pembetulan ini menjadi lapisan akhir.
 */
:root{
  --player-viewport-width:100vw;
  --player-viewport-height:100vh;
  --event-safe-x:clamp(28px,3.1vw,72px);
  --event-safe-y:clamp(24px,3.2vh,52px);
}

html,body{
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

.player{
  width:var(--player-viewport-width);
  height:var(--player-viewport-height);
  min-width:100vw;
  min-height:100vh;
}

/* Pastikan semua mod takeover sebenar menggunakan seluruh viewport. */
.prayer-event-overlay:not(.compact){
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  padding:var(--event-safe-y) var(--event-safe-x);
  display:grid;
  place-items:center;
  align-content:center;
}

.prayer-event-overlay:not(.compact) .prayer-event-card{
  width:min(100%,1780px);
  max-width:none;
  min-height:min(82vh,890px);
  padding:clamp(24px,3.2vh,54px) clamp(24px,3.8vw,76px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.prayer-event-overlay:not(.compact) .prayer-event-type{
  max-width:96%;
  padding:clamp(9px,1.15vh,16px) clamp(18px,1.65vw,34px);
  font-size:clamp(18px,1.55vw,34px);
  line-height:1.15;
  letter-spacing:clamp(.08em,.16vw,.18em);
  white-space:normal;
  text-wrap:balance;
}

.prayer-event-overlay:not(.compact) .prayer-event-card h1{
  max-width:100%;
  margin:clamp(20px,2.5vh,34px) 0 clamp(12px,1.7vh,24px);
  font-size:clamp(76px,8.2vw,164px);
  line-height:.86;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.prayer-event-overlay:not(.compact) .flip-clock{
  width:100%;
  max-width:1640px;
  min-height:clamp(210px,31vh,350px);
  margin:clamp(10px,1.4vh,22px) auto 0;
  gap:clamp(7px,.72vw,15px);
}

.prayer-event-overlay:not(.compact) .flip-digit{
  width:clamp(100px,10.4vw,214px);
  height:clamp(150px,28.5vh,308px);
  border-radius:clamp(14px,1.3vw,28px);
}

.prayer-event-overlay:not(.compact) .flip-half b,
.prayer-event-overlay:not(.compact) .flip-leaf b{
  font-size:clamp(118px,12.6vw,260px);
}

.prayer-event-overlay:not(.compact) .flip-separator{
  width:clamp(15px,1.65vw,34px);
  height:clamp(150px,28.5vh,308px);
  gap:clamp(18px,2.5vh,34px);
}

.prayer-event-overlay:not(.compact) .flip-separator i{
  width:clamp(12px,1.1vw,22px);
  height:clamp(12px,1.1vw,22px);
}

.prayer-event-overlay:not(.compact) .flip-period{
  min-width:clamp(54px,4.2vw,86px);
  height:clamp(46px,5.2vh,64px);
  font-size:clamp(20px,1.65vw,32px);
}

.prayer-event-overlay:not(.compact) .flip-clock.text-mode{
  min-height:0;
  margin-top:clamp(18px,2.2vh,34px);
}

.prayer-event-overlay:not(.compact) .flip-text{
  font-size:clamp(100px,11.5vw,230px);
  line-height:.9;
}

.prayer-event-overlay:not(.compact) .prayer-event-countdown-label{
  margin-top:clamp(12px,1.7vh,22px);
  font-size:clamp(17px,1.25vw,27px);
  letter-spacing:.18em;
}

.prayer-event-overlay:not(.compact) .prayer-event-card p{
  max-width:1500px;
  margin:clamp(20px,2.5vh,38px) auto 0;
  font-size:clamp(25px,2.05vw,43px);
  line-height:1.22;
  text-wrap:balance;
}

/* Waktu Syuruk, Isyraq dan Dhuha: masa lebih besar dan tajuk jelas. */
.prayer-event-overlay[data-mode="syuruk"] .prayer-event-card,
.prayer-event-overlay[data-mode="isyraq"] .prayer-event-card,
.prayer-event-overlay[data-mode="dhuha"] .prayer-event-card{
  min-height:min(86vh,930px);
}

.prayer-event-overlay[data-mode="syuruk"] .prayer-event-card h1,
.prayer-event-overlay[data-mode="isyraq"] .prayer-event-card h1,
.prayer-event-overlay[data-mode="dhuha"] .prayer-event-card h1{
  font-size:clamp(94px,10.5vw,208px);
  margin-bottom:clamp(14px,1.8vh,26px);
}

.prayer-event-overlay[data-mode="syuruk"] .flip-digit,
.prayer-event-overlay[data-mode="isyraq"] .flip-digit,
.prayer-event-overlay[data-mode="dhuha"] .flip-digit{
  width:clamp(116px,12.2vw,248px);
  height:clamp(164px,30.5vh,328px);
}

.prayer-event-overlay[data-mode="syuruk"] .flip-half b,
.prayer-event-overlay[data-mode="syuruk"] .flip-leaf b,
.prayer-event-overlay[data-mode="isyraq"] .flip-half b,
.prayer-event-overlay[data-mode="isyraq"] .flip-leaf b,
.prayer-event-overlay[data-mode="dhuha"] .flip-half b,
.prayer-event-overlay[data-mode="dhuha"] .flip-leaf b{
  font-size:clamp(132px,14.4vw,286px);
}

/* Sedang solat tidak mempunyai countdown; gunakan ruang itu untuk mesej utama. */
.prayer-event-overlay.prayer-session-active .prayer-event-card{
  min-height:min(88vh,950px);
  width:min(100%,1820px);
}

.prayer-event-overlay.prayer-session-active .prayer-event-type{
  font-size:clamp(24px,2.15vw,44px);
  padding:clamp(12px,1.45vh,20px) clamp(22px,2.1vw,42px);
}

.prayer-event-overlay.prayer-session-active .prayer-event-card h1{
  font-size:clamp(118px,12vw,238px);
  margin:clamp(30px,4vh,58px) 0 clamp(18px,2.4vh,34px);
}

.prayer-event-overlay.prayer-session-active .prayer-event-card p{
  max-width:1560px;
  font-size:clamp(30px,2.45vw,50px);
}

.prayer-event-overlay.prayer-session-active .prayer-event-reminders{
  max-width:94%;
  margin-top:clamp(24px,3.2vh,48px);
  gap:clamp(10px,1vw,20px);
}

.prayer-event-overlay.prayer-session-active .prayer-event-reminders span{
  padding:clamp(10px,1.1vh,16px) clamp(18px,1.45vw,30px);
  font-size:clamp(20px,1.45vw,31px);
}

/* Android TV/WebView lazimnya melaporkan viewport CSS yang lebih kecil akibat DPR. */
.player[data-platform="android"] .prayer-event-overlay:not(.compact) .prayer-event-card{
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* 16:9 Full HD dan paparan TV lebar. */
@media (min-aspect-ratio:16/10) and (min-width:1200px){
  .prayer-event-overlay:not(.compact) .prayer-event-card{
    min-height:min(84vh,905px);
  }
  .prayer-event-overlay:not(.compact) .prayer-event-card h1{
    font-size:clamp(86px,8.8vw,176px);
  }
  .prayer-event-overlay:not(.compact) .flip-clock{
    min-height:clamp(230px,32vh,360px);
  }
}

/* Paparan 720p atau viewport Android yang diperkecil oleh devicePixelRatio. */
@media (max-width:1199px), (max-height:719px){
  :root{--event-safe-x:clamp(16px,2.4vw,34px);--event-safe-y:clamp(12px,2vh,24px)}
  .prayer-event-overlay:not(.compact) .prayer-event-card{
    min-height:90vh;
    padding:clamp(12px,2vh,24px) clamp(14px,3vw,34px);
  }
  .prayer-event-overlay:not(.compact) .prayer-event-type{
    font-size:clamp(14px,2.2vw,24px);
  }
  .prayer-event-overlay:not(.compact) .prayer-event-card h1{
    font-size:clamp(52px,11vw,112px);
    margin:clamp(10px,2vh,20px) 0 clamp(6px,1.2vh,12px);
  }
  .prayer-event-overlay:not(.compact) .flip-clock{
    min-height:clamp(145px,33vh,250px);
  }
  .prayer-event-overlay:not(.compact) .flip-digit{
    width:clamp(64px,11.4vw,132px);
    height:clamp(96px,27vh,190px);
  }
  .prayer-event-overlay:not(.compact) .flip-half b,
  .prayer-event-overlay:not(.compact) .flip-leaf b{
    font-size:clamp(76px,14vw,166px);
  }
  .prayer-event-overlay:not(.compact) .flip-separator{
    height:clamp(96px,27vh,190px);
    width:clamp(10px,1.8vw,20px);
  }
  .prayer-event-overlay:not(.compact) .prayer-event-card p{
    font-size:clamp(18px,3vw,31px);
    margin-top:clamp(10px,2vh,22px);
  }
  .prayer-event-overlay.prayer-session-active .prayer-event-card h1{
    font-size:clamp(72px,15vw,150px);
  }
}

/* Potret/tablet: kekalkan kandungan dalam skrin tanpa mengecil berlebihan. */
@media (max-aspect-ratio:4/3){
  .prayer-event-overlay:not(.compact) .prayer-event-card{
    min-height:92vh;
  }
  .prayer-event-overlay:not(.compact) .flip-clock{
    max-width:96vw;
  }
  .prayer-event-overlay:not(.compact) .flip-digit{
    width:clamp(48px,12vw,126px);
    height:clamp(76px,18vh,190px);
  }
  .prayer-event-overlay:not(.compact) .flip-half b,
  .prayer-event-overlay:not(.compact) .flip-leaf b{
    font-size:clamp(62px,15vw,160px);
  }
}