*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#071b16;color:#f5f7ef;font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.screen{height:100vh;display:flex;flex-direction:column;padding:2.2vh 3vw 1.4vh;background:radial-gradient(circle at 50% 35%,#123e31 0,#071b16 65%)}.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:1.5vh}.brand{display:flex;align-items:center;gap:1vw}.logo-box{width:5.2vw;height:5.2vw;max-width:72px;max-height:72px;min-width:42px;min-height:42px;border:2px solid #d6b86a;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#d6b86a;font-size:clamp(22px,3vw,42px)}h1{font-size:clamp(20px,2.4vw,42px);letter-spacing:.06em;margin:0 0 .5vh;color:#f0d889}#mosqueLocation{font-size:clamp(12px,1.25vw,22px);opacity:.75}.datebox{text-align:right}.datebox #clock{font-size:clamp(28px,3.3vw,58px);font-weight:bold;letter-spacing:.04em;color:#fff}.datebox div:not(#clock){font-size:clamp(11px,1.1vw,18px);opacity:.8}.hero{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}.hero #statusLabel{font-size:clamp(13px,1.2vw,22px);letter-spacing:.2em;color:#d6b86a}.next-name{font-size:clamp(24px,3vw,52px);font-weight:bold;margin:.5vh 0;color:#fff}.countdown{font-size:clamp(45px,7.5vw,132px);font-weight:bold;letter-spacing:.05em;line-height:1;color:#f0d889;text-shadow:0 0 25px rgba(240,216,137,.16)}#statusSub{font-size:clamp(12px,1.2vw,20px);opacity:.75;margin-top:1vh}.prayer-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.65vw;margin:1vh 0 1.5vh}.prayer{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:10px;text-align:center;padding:1.2vh .3vw}.prayer .pname{font-size:clamp(10px,1.05vw,19px);font-weight:bold;color:#d6b86a;white-space:nowrap}.prayer .ptime{font-size:clamp(19px,2.2vw,38px);font-weight:bold;margin-top:.55vh}.prayer.active{background:#b99743;color:#071b16;border-color:#f0d889;transform:translateY(-3px)}.prayer.active .pname{color:#071b16}footer{display:flex;align-items:center;min-height:3.5vh;border-top:1px solid rgba(255,255,255,.16);padding-top:.7vh;color:#dce8d6;font-size:clamp(11px,1.1vw,19px);overflow:hidden}#runningText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.gear{background:transparent;border:0;color:#d6b86a;font-size:22px;margin-left:1vw}.hidden{display:none!important}.settings{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:3vh 3vw;overflow:auto}.settings-card{background:#102d24;border:1px solid #52715d;border-radius:16px;width:min(900px,94vw);max-height:94vh;overflow:auto;padding:24px;box-shadow:0 10px 50px #000}.settings-head{display:flex;justify-content:space-between;align-items:center}.settings-head h2{margin:0 0 18px;color:#f0d889}.settings-head button{background:none;border:0;color:#fff;font-size:32px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid label,.adjust label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#c8d8c8}.form-grid input,.form-grid select,.adjust input{background:#071b16;color:#fff;border:1px solid #496452;border-radius:7px;padding:10px}.adjust{margin-top:18px}.adjust h3{font-size:15px;color:#f0d889}.adjust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.actions{display:flex;gap:10px;margin-top:22px}.actions button{padding:11px 18px;border:0;border-radius:8px;background:#345646;color:#fff}.actions .primary{background:#b99743;color:#071b16;font-weight:bold}.note{font-size:12px;opacity:.65}
/* TV-first layout: retain landscape composition even when testing on a portrait phone. */
@media (max-width:700px){
  html,body{overflow:auto}
  .screen{min-width:900px;width:100vw;height:100vh;padding:18px 28px}
  .topbar{padding-bottom:12px}
  .prayer-grid{grid-template-columns:repeat(7,1fr);gap:8px}
  .prayer{padding:12px 4px}
  .prayer .pname{font-size:14px}
  .prayer .ptime{font-size:26px}
  .hero{min-height:300px}
  .countdown{font-size:64px}
}

/* FORCE LANDSCAPE PREVIEW ON PORTRAIT PHONES
   The browser cannot always lock orientation unless installed as an app.
   Therefore the entire display is rotated into a real landscape canvas. */
@media (orientation:portrait){
  html,body{width:100%;height:100%;overflow:hidden!important}
  #app{
    position:fixed!important;
    left:0!important;
    top:0!important;
    width:100vh!important;
    height:100vw!important;
    transform-origin:top left!important;
    transform:rotate(90deg) translateY(-100%)!important;
    overflow:hidden!important;
  }
  .screen{
    min-width:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:2.2vh 2.5vw!important;
    overflow:hidden!important;
  }
  .topbar{padding-bottom:1.5vh!important}
  .hero{min-height:0!important;flex:1!important}
  .prayer-grid{grid-template-columns:repeat(7,1fr)!important;gap:1vw!important}
  .prayer{padding:1.2vh .3vw!important}
  .prayer .pname{font-size:clamp(9px,1.05vw,19px)!important}
  .prayer .ptime{font-size:clamp(18px,2.2vw,38px)!important}
  .countdown{font-size:clamp(38px,6vw,110px)!important}
  .settings{width:100%!important;height:100%!important}
}

/* Two-column TV display: schedule + flexible information panel */
.display-columns{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(230px,.9fr);gap:1.4vw;height:100%;min-height:0}
.schedule-panel{display:flex;flex-direction:column;min-width:0;min-height:0}
.info-panel{border:1px solid rgba(214,184,106,.28);border-radius:16px;background:linear-gradient(145deg,rgba(31,82,65,.72),rgba(7,27,22,.82));padding:2.4vh 1.7vw;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.info-title{font-size:clamp(14px,1.25vw,24px);letter-spacing:.15em;color:#d6b86a;font-weight:bold}
.info-clock{font-size:clamp(30px,3.2vw,60px);font-weight:bold;color:#fff;margin-top:1.5vh;letter-spacing:.04em}
.info-date{font-size:clamp(11px,1vw,18px);opacity:.72;line-height:1.45}
.info-divider{height:1px;background:rgba(255,255,255,.16);margin:2vh 0}
.info-label{font-size:clamp(10px,.85vw,15px);letter-spacing:.14em;color:#d6b86a}
.info-next{font-size:clamp(22px,2vw,38px);font-weight:bold;margin-top:.5vh}
.info-time{font-size:clamp(18px,1.5vw,28px);color:#f0d889;margin-top:.3vh}
.info-message{font-size:clamp(14px,1.15vw,21px);line-height:1.55;color:#dce8d6;margin-top:.7vh}
.info-spacer{flex:1}
.info-footer{font-size:clamp(10px,.85vw,15px);line-height:1.6;color:#d6b86a;border-top:1px solid rgba(255,255,255,.14);padding-top:1.5vh}
.info-footer span{color:#dce8d6;opacity:.65}
.schedule-panel .hero{flex:1}
.schedule-panel .prayer-grid{margin-top:1vh}
@media (max-aspect-ratio:1/1){
  .display-columns{grid-template-columns:minmax(0,2.25fr) minmax(190px,.9fr)}
  .info-panel{padding-left:1.4vw;padding-right:1.4vw}
}

.cash-balance{font-size:clamp(24px,2.7vw,52px);font-weight:bold;color:#f0d889;margin-top:1vh;word-break:break-word}.info-message.small{font-size:clamp(12px,1vw,18px);opacity:.8}.iqamah-section{margin-top:1.5vh}

/* Settings fit fix for rotated portrait preview and Android back navigation */
.settings{z-index:2147483646!important;position:fixed!important;inset:0!important;pointer-events:auto!important}
@media (orientation:portrait){.settings{align-items:flex-start!important;justify-content:flex-start!important;padding:2vw!important;overflow:auto!important}.settings-card{width:calc(100% - 4vw)!important;max-width:none!important;max-height:calc(100% - 4vw)!important;padding:16px!important;border-radius:12px}.settings-head h2{font-size:20px!important;margin-bottom:10px}.form-grid{gap:8px!important}.form-grid label,.adjust label{font-size:11px!important}.form-grid input,.form-grid select,.adjust input{padding:7px!important;font-size:12px!important}.adjust-grid{gap:7px!important}.actions{margin-top:14px!important}.note{font-size:10px!important}}

/* v0.3.5: bottom area is a dedicated moving running-text ticker */
footer{position:relative}
#runningText{display:block;overflow:hidden;text-overflow:clip;white-space:nowrap;padding-right:2vw}
#runningText::after{content:"";display:inline-block}
@keyframes runningTicker{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-110%)}
}
#runningText{
  animation:runningTicker 24s linear infinite;
  will-change:transform;
}

/* v0.3.6: move settings button out of the running-text lane */
footer{padding-right:0!important}
footer #runningText{width:100%;flex:1;min-width:0}
footer .gear{
  position:fixed;
  right:1.2vw;
  bottom:1.2vh;
  z-index:20;
  margin:0!important;
  width:clamp(34px,3vw,58px);
  height:clamp(34px,3vw,58px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(214,184,106,.55);
  border-radius:50%;
  background:rgba(7,27,22,.9);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}


.pair-btn{position:fixed;right:1.2vw;bottom:7.2vh;z-index:20;width:clamp(34px,3vw,58px);height:clamp(34px,3vw,58px);border-radius:50%;border:1px solid rgba(212,175,55,.55);background:rgba(7,27,22,.92);color:#f1d77a;font-size:clamp(18px,1.8vw,30px);cursor:pointer}.pairing-card{max-width:620px}.pairing-body{text-align:center;padding:18px}.qr-placeholder{width:220px;height:220px;margin:10px auto 18px;border:3px dashed #d4af37;display:grid;place-items:center;font-size:54px;color:#d4af37;background:repeating-linear-gradient(45deg,rgba(212,175,55,.08),rgba(212,175,55,.08) 8px,transparent 8px,transparent 16px)}.qr-placeholder small{font-size:11px;line-height:1.3;padding:8px}.pairing-body h3{margin:8px 0;color:#f1d77a}.pairing-body p{color:#d7e5dc}

/* v0.3.8: tampilan TV lebih bersih */
.pair-btn{display:none!important}
footer .gear{position:fixed!important;right:.55vw!important;bottom:.45vh!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;font-size:14px!important;line-height:18px!important;padding:0!important;opacity:.38!important;margin:0!important}
#openPairingFromSettings{background:#345646;color:#fff;border:0;border-radius:8px;padding:11px 18px}
.sync-status{font-size:clamp(8px,.7vw,14px);opacity:.72;margin-top:.25vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:24vw}

/* Status teknis sinkronisasi tidak ditampilkan pada layar jamaah */
.sync-status{display:none!important}

/* v0.3.12: countdown ditempatkan paling atas, label animasi titik-titik */
.hero .countdown{order:1;margin-bottom:1.5vh}
.hero #statusLabel{order:2}
.hero .next-name{order:3}
.hero #statusSub{order:4}
.dots{display:inline-block;width:1.8em;text-align:left;overflow:hidden;vertical-align:bottom;animation:dotPulse 1.4s steps(4,end) infinite}
@keyframes dotPulse{0%{width:0}25%{width:.45em}50%{width:.9em}75%{width:1.35em}100%{width:1.8em}}

/* Slideshow lokal - tambahan incremental */
.slideshow{position:fixed;inset:0;z-index:100;background:#071b16;display:flex;align-items:center;justify-content:center}
.slideshow.hidden{display:none}
.slideshow img{width:100%;height:100%;object-fit:cover}
.slide-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6vw;background:linear-gradient(90deg,rgba(0,0,0,.70),rgba(0,0,0,.28),rgba(0,0,0,.70));color:#fff}
.slide-overlay #slideTitle{font-size:clamp(24px,4vw,64px);font-weight:800;margin-bottom:18px}
.slide-overlay #slideText{font-size:clamp(18px,2.5vw,42px);line-height:1.45;max-width:90%;white-space:pre-wrap}
.slide-overlay #slideSource{font-size:clamp(14px,1.5vw,26px);margin-top:20px;opacity:.9}
.slideshow-settings{margin-top:18px;padding:14px;border:1px solid rgba(255,255,255,.15);border-radius:12px}
.slide-manager{margin-top:18px;padding:14px;border:1px solid rgba(255,255,255,.15);border-radius:12px}
.slide-manager input,.slide-manager textarea{display:block;width:100%;box-sizing:border-box;margin:8px 0;padding:10px}
.slide-manager textarea{min-height:90px;resize:vertical}
.slide-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.slide-item small{opacity:.7}

/* v0.3.35 slideshow layout and back behavior */
.slide-overlay{justify-content:flex-start;padding:5vh 7vw 8vh}
.slide-overlay #slideTitle{margin-top:1vh;margin-bottom:auto;text-align:center;width:100%}
.slide-overlay #slideText{margin-top:auto;margin-bottom:0;text-align:center}
.slide-overlay #slideSource{margin-top:12px;margin-bottom:1vh}

/* v0.3.36 image-only slideshow */
.slideshow{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center}
.slideshow.hidden{display:none}
.slideshow img{display:block;width:100%;height:100%;object-fit:contain}
.slideshow .slide-overlay{display:none!important}

/* v0.3.38 outer transparent settings control */
.outer-settings-button{position:fixed;right:14px;bottom:14px;z-index:2147483647;width:42px;height:42px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(0,0,0,.18);color:rgba(255,255,255,.45);font-size:21px;line-height:42px;text-align:center;padding:0;opacity:.32;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer;transition:opacity .2s,background .2s,color .2s}.outer-settings-button:hover,.outer-settings-button:focus,.outer-settings-button:active{opacity:1;background:rgba(0,0,0,.55);color:#fff;outline:none}
.slideshow{z-index:1000}


/* v0.3.44 — Tema Masjid Baiturrahman Turunan, Girisuko
   Hanya mengubah presentasi visual; logika jadwal, slideshow, dan navigasi dipertahankan. */
html,body{
  background:#f4f1e8!important;
  color:#333!important;
}
.screen{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.96) 0%,rgba(244,241,232,.98) 58%,#e9e5da 100%)!important;
  color:#303030!important;
}
.topbar{
  border-bottom:2px solid rgba(128,128,128,.28)!important;
}
.logo-box{
  width:clamp(58px,6vw,94px)!important;
  height:clamp(58px,6vw,94px)!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:94px!important;
  max-height:94px!important;
  border:0!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#f7f5ef!important;
  box-shadow:0 2px 10px rgba(80,70,45,.12)!important;
}
.logo-box img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
h1{
  color:#9a7415!important;
  letter-spacing:.055em!important;
  text-shadow:none!important;
}
#mosqueLocation{
  color:#666!important;
  opacity:1!important;
}
.datebox #clock{
  color:#4a4a4a!important;
}
.datebox div:not(#clock){
  color:#777!important;
  opacity:1!important;
}
.hero #statusLabel{
  color:#9a7415!important;
}
.countdown{
  color:#9a7415!important;
  text-shadow:0 0 20px rgba(154,116,21,.12)!important;
}
.next-name{
  color:#444!important;
}
#statusSub{
  color:#777!important;
  opacity:1!important;
}
.prayer{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(128,128,128,.25)!important;
  box-shadow:0 2px 8px rgba(80,70,45,.05)!important;
}
.prayer .pname{
  color:#9a7415!important;
}
.prayer .ptime{
  color:#333!important;
}
.prayer.active{
  background:#c9a64b!important;
  border-color:#a98222!important;
  color:#fff!important;
}
.prayer.active .pname{
  color:#fff!important;
}
footer{
  border-top:2px solid rgba(128,128,128,.25)!important;
  color:#666!important;
}
.info-panel{
  border:1px solid rgba(154,116,21,.30)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(235,231,220,.95))!important;
  box-shadow:0 3px 14px rgba(80,70,45,.08)!important;
}
.info-title,.info-label{
  color:#9a7415!important;
}
.cash-balance{
  color:#9a7415!important;
}
.info-message{
  color:#555!important;
}
.info-message.small{
  color:#777!important;
}
.info-divider{
  background:rgba(128,128,128,.22)!important;
}
.outer-settings-button{
  background:rgba(70,70,70,.10)!important;
  border-color:rgba(100,100,100,.30)!important;
  color:rgba(60,60,60,.55)!important;
}
.outer-settings-button:hover,.outer-settings-button:focus,.outer-settings-button:active{
  background:rgba(70,70,70,.72)!important;
  color:#fff!important;
}
.settings{
  background:rgba(40,40,35,.48)!important;
}
.settings-card{
  background:#f7f5ef!important;
  color:#333!important;
  border-color:#c5b98f!important;
}
.settings-head h2,.adjust h3{
  color:#9a7415!important;
}
.settings-head button{
  color:#555!important;
}
.form-grid label,.adjust label{
  color:#555!important;
}
.form-grid input,.form-grid select,.adjust input{
  background:#fff!important;
  color:#333!important;
  border-color:#c9c2ae!important;
}
.actions button{
  background:#777!important;
  color:#fff!important;
}
.actions .primary{
  background:#b28a28!important;
  color:#fff!important;
}
.slideshow{
  background:#000!important;
}

/* v0.3.45 — Global Edition + Auto Logo Adapter */
.logo-box{background:#f4f1e8!important;border:1px solid rgba(154,116,21,.35)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.logo-box img{object-fit:contain!important;background:transparent!important;padding:4px!important}
.logo-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 4px}
.logo-preview{width:84px;height:84px;object-fit:contain;background:#f4f1e8;border:1px solid rgba(154,116,21,.35);border-radius:10px;padding:5px}
.logo-tools button{background:#eee9dc;color:#555;border:1px solid #b8aa83;border-radius:7px;padding:9px 12px}
.logo-note{grid-column:1/-1}

/* v0.3.46: running text lebih besar dan nyaman dibaca pada TV/proyektor */
footer{
  min-height:clamp(46px,5.2vh,82px)!important;
  padding-top:clamp(8px,1vh,16px)!important;
  padding-bottom:clamp(8px,1vh,16px)!important;
  padding-left:clamp(12px,1.8vw,32px)!important;
  padding-right:clamp(12px,1.8vw,32px)!important;
  align-items:center!important;
}
footer #runningText{
  font-size:clamp(18px,1.8vw,34px)!important;
  line-height:1.35!important;
  padding-right:3vw!important;
  letter-spacing:.015em!important;
}

/* v0.3.47: running text full-length marquee fix */
footer #runningText{
  display:block!important;
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  padding-right:8vw!important;
  animation:runningTicker var(--running-speed,28s) linear infinite!important;
}
footer{overflow:hidden!important}

/* v0.3.48 - readable mosque information and notes */
.mosque-info, .masjid-info, .info-masjid, .mosque-name, .masjid-name {
  font-size: clamp(24px, 2.2vw, 42px) !important;
  line-height: 1.25 !important;
  font-weight: 700;
}
.mosque-info small, .masjid-info small, .info-masjid small,
.mosque-info .location, .masjid-info .location, .info-masjid .location {
  font-size: clamp(18px, 1.45vw, 30px) !important;
  line-height: 1.35 !important;
}
.notes, .catatan, .note-box, .mosque-note, .info-note {
  font-size: clamp(20px, 1.65vw, 34px) !important;
  line-height: 1.4 !important;
  padding: 18px 24px !important;
}

/* v0.3.49 - actual selectors for larger mosque information and notes */
.info-panel .info-label,
.info-label {
  font-size: clamp(16px, 1.35vw, 28px) !important;
  line-height: 1.25 !important;
  letter-spacing: .08em !important;
  margin-top: 1.2vh !important;
}
.info-panel .info-message,
.info-message {
  font-size: clamp(20px, 1.75vw, 36px) !important;
  line-height: 1.42 !important;
  margin-top: 1vh !important;
}
.info-panel .info-message.small,
.info-message.small {
  font-size: clamp(18px, 1.5vw, 32px) !important;
  line-height: 1.42 !important;
}
#mosqueName {
  font-size: clamp(26px, 3vw, 54px) !important;
  line-height: 1.18 !important;
}
#mosqueLocation {
  font-size: clamp(16px, 1.55vw, 30px) !important;
  line-height: 1.3 !important;
}

/* v0.3.50 - balanced information panel layout */
.info-panel{
  display:grid !important;
  grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto minmax(0,1fr) auto !important;
  gap:0 !important;
  align-content:stretch !important;
  min-height:0 !important;
  padding:clamp(12px,1.4vh,24px) clamp(12px,1.2vw,28px) !important;
}
.info-panel > .info-title{
  font-size:clamp(18px,1.45vw,30px) !important;
  line-height:1.15 !important;
  margin:0 0 clamp(5px,.7vh,12px) !important;
}
.info-panel > .info-label{
  font-size:clamp(13px,1.05vw,22px) !important;
  line-height:1.2 !important;
  letter-spacing:.09em !important;
  margin:0 !important;
}
.info-panel > .cash-balance{
  font-size:clamp(25px,2.2vw,46px) !important;
  line-height:1.12 !important;
  margin:clamp(4px,.5vh,9px) 0 !important;
}
.info-panel > .info-divider{
  height:1px !important;
  width:100% !important;
  margin:clamp(7px,1vh,16px) 0 !important;
}
.info-panel > .info-message{
  min-height:0 !important;
  overflow:auto !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  font-size:clamp(18px,1.38vw,30px) !important;
  line-height:1.3 !important;
  margin:clamp(5px,.6vh,10px) 0 0 !important;
  padding-right:3px !important;
  scrollbar-width:none !important;
}
.info-panel > .info-message::-webkit-scrollbar{display:none}
.info-panel > .info-message.small{
  font-size:clamp(16px,1.22vw,27px) !important;
  line-height:1.3 !important;
  margin-top:clamp(5px,.6vh,10px) !important;
}
.info-panel > .info-spacer{display:none !important}

/* Keep the two text blocks visually balanced */
.info-panel > .info-divider:nth-of-type(2){
  margin-top:clamp(8px,1vh,16px) !important;
  margin-bottom:clamp(6px,.8vh,12px) !important;
}
@media (max-aspect-ratio:1/1){
  .info-panel{
    padding:10px 12px !important;
  }
  .info-panel > .info-message{
    font-size:clamp(16px,1.55vw,27px) !important;
  }
  .info-panel > .info-message.small{
    font-size:clamp(15px,1.35vw,24px) !important;
  }
}

/* v0.3.52 - proportional, centered and stronger information panel */
.info-panel{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:0 !important;
  text-align:center !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:clamp(12px,1.5vh,24px) clamp(12px,1.25vw,28px) !important;
  border:2px solid rgba(154,116,21,.48) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(235,231,220,.98)) !important;
}
.info-panel .info-title{
  width:100% !important;
  text-align:center !important;
  font-size:clamp(18px,1.45vw,30px) !important;
  line-height:1.15 !important;
  letter-spacing:.12em !important;
  font-weight:800 !important;
  color:#8f6808 !important;
  margin:0 0 clamp(5px,.6vh,10px) !important;
}
.info-panel .info-label{
  width:100% !important;
  text-align:center !important;
  font-size:clamp(13px,1.02vw,22px) !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  font-weight:800 !important;
  color:#8f6808 !important;
  margin:clamp(3px,.35vh,7px) 0 !important;
}
.info-panel .cash-balance{
  width:100% !important;
  text-align:center !important;
  font-size:clamp(26px,2.25vw,48px) !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  color:#765400 !important;
  margin:clamp(3px,.4vh,8px) 0 !important;
}
.info-panel .info-divider{
  flex:0 0 auto !important;
  width:100% !important;
  height:2px !important;
  margin:clamp(7px,.8vh,13px) 0 !important;
  background:rgba(143,104,8,.30) !important;
}
.info-panel .info-message,
.info-panel .info-message.small{
  width:100% !important;
  box-sizing:border-box !important;
  text-align:center !important;
  color:#3f3f3f !important;
  font-size:clamp(17px,1.28vw,29px) !important;
  line-height:1.28 !important;
  font-weight:600 !important;
  margin:clamp(4px,.45vh,8px) 0 !important;
  padding:0 2px !important;
  overflow:auto !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  scrollbar-width:none !important;
}
.info-panel .info-message::-webkit-scrollbar,
.info-panel .info-message.small::-webkit-scrollbar{display:none}
.info-panel .info-message.small{
  color:#555 !important;
  font-size:clamp(16px,1.18vw,27px) !important;
  line-height:1.3 !important;
  font-weight:500 !important;
}
.info-panel .info-spacer{display:none !important}

@media (max-aspect-ratio:1/1){
  .info-panel{
    padding:10px 12px !important;
  }
  .info-panel .info-title{font-size:clamp(17px,1.8vw,28px) !important}
  .info-panel .info-label{font-size:clamp(12px,1.35vw,21px) !important}
  .info-panel .cash-balance{font-size:clamp(24px,2.8vw,44px) !important}
  .info-panel .info-message{font-size:clamp(16px,1.65vw,27px) !important}
  .info-panel .info-message.small{font-size:clamp(15px,1.5vw,25px) !important}
}

/* v0.3.54 Android WebView compatibility */
.outer-settings-button{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;touch-action:manipulation!important}
#settings{z-index:2147483646!important;pointer-events:auto!important}
#settings:not(.hidden){display:flex!important;visibility:visible!important;opacity:1!important}

/* v0.3.82: TV readability + YouTube autoplay slideshow */
.prayer-grid{gap:1vw!important;margin-top:1.5vh!important;margin-bottom:2vh!important}
.prayer{padding:2.2vh .55vw!important;border-radius:14px!important}
.prayer .pname{font-size:clamp(13px,1.35vw,25px)!important;letter-spacing:.02em!important}
.prayer .ptime{font-size:clamp(27px,3.15vw,56px)!important;margin-top:1vh!important}
.slideshow{background:#000!important}
#slideYoutube{display:block;width:100%;height:100%;border:0;background:#000}


/* v0.3.83: portrait preview tidak diputar/terpotong; TV landscape tetap memakai komposisi 2 kolom. */
@media (orientation:portrait){
  html,body{width:100%;height:100%;overflow:auto!important}
  #app{position:static!important;width:100%!important;height:auto!important;min-height:100vh!important;transform:none!important;overflow:visible!important}
  .screen{width:100%!important;min-width:0!important;height:auto!important;min-height:100vh!important;padding:16px!important;overflow:visible!important}
  .display-columns{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;gap:14px!important}
  .schedule-panel{min-height:0!important}
  .topbar{gap:10px!important}
  .topbar h1{font-size:clamp(18px,5vw,30px)!important}
  .datebox #clock{font-size:clamp(24px,7vw,42px)!important}
  .hero{min-height:210px!important;flex:none!important}
  .countdown{font-size:clamp(42px,13vw,78px)!important}
  .next-name{font-size:clamp(25px,8vw,48px)!important}
  .prayer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:14px 0!important}
  .prayer{padding:16px 8px!important}
  .prayer .pname{font-size:clamp(13px,4vw,21px)!important}
  .prayer .ptime{font-size:clamp(27px,8vw,45px)!important}
  .info-panel{min-height:260px!important;padding:18px!important}
  footer{min-height:34px!important}
}

/* TV landscape: jadwal dibuat lebih besar tetapi tetap muat tujuh kartu. */
@media (orientation:landscape) and (min-width:900px){
  .prayer-grid{gap:12px!important}
  .prayer{padding:18px 7px!important}
  .prayer .pname{font-size:clamp(16px,1.45vw,28px)!important}
  .prayer .ptime{font-size:clamp(30px,3.35vw,62px)!important}
}

/* v0.3.85 — TV readable prayer schedule relayout */
.display-columns{grid-template-columns:minmax(0,3.15fr) minmax(170px,.55fr)!important;gap:.7vw!important}
.info-panel{padding:1.2vh .8vw!important;border-radius:10px!important}
.info-title{font-size:clamp(11px,1vw,18px)!important}
.info-label{font-size:clamp(8px,.65vw,12px)!important}
.cash-balance{font-size:clamp(18px,2vw,38px)!important}
.info-message{font-size:clamp(10px,.85vw,16px)!important;line-height:1.3!important}
.info-divider{margin:1vh 0!important}
.schedule-panel .hero{flex:.72!important;min-height:0!important}
.schedule-panel .prayer-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:.35vw!important;margin-top:.6vh!important}
.prayer{padding:.7vh .15vw!important;min-width:0!important;overflow:visible!important}
.prayer .pname{font-size:clamp(11px,1.28vw,24px)!important;white-space:nowrap!important;letter-spacing:-.035em!important}
.prayer .ptime{font-size:clamp(24px,2.85vw,52px)!important;line-height:1.05!important;white-space:nowrap!important}
.schedule-panel footer{padding-top:.7vh!important;padding-bottom:.5vh!important}
@media (max-aspect-ratio:1/1){.display-columns{grid-template-columns:minmax(0,3.15fr) minmax(150px,.55fr)!important}.prayer .pname{font-size:clamp(10px,1.28vw,23px)!important}.prayer .ptime{font-size:clamp(22px,2.85vw,50px)!important}}
/* v0.3.86 definitive TV relayout: appended last so earlier media rules cannot override it */
@media (min-width: 900px) and (min-aspect-ratio: 1/1){
  .screen{padding:1.2vh 1.4vw .8vh!important}
  .display-columns{grid-template-columns:minmax(0,4.8fr) minmax(125px,.38fr)!important;gap:.55vw!important}
  .info-panel{padding:1vh .55vw!important;min-width:0!important}
  .info-panel .info-title{font-size:clamp(12px,1.15vw,20px)!important}
  .info-panel .info-label{font-size:clamp(9px,.8vw,14px)!important}
  .info-panel .cash-balance{font-size:clamp(16px,1.55vw,28px)!important;white-space:nowrap!important}
  .info-panel .info-message{font-size:clamp(10px,.85vw,15px)!important;line-height:1.2!important}
  .schedule-panel .hero{flex:.48!important}
  .countdown{font-size:clamp(48px,8.2vw,150px)!important}
  .next-name{font-size:clamp(28px,3.4vw,62px)!important}
  .prayer-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:.28vw!important;margin:.5vh 0 .8vh!important}
  .prayer{padding:.65vh .05vw!important;border-radius:8px!important}
  .prayer .pname{font-size:clamp(10px,1.35vw,26px)!important;letter-spacing:-.06em!important;white-space:nowrap!important}
  .prayer .ptime{font-size:clamp(25px,3.25vw,60px)!important;line-height:1!important;margin-top:.3vh!important;white-space:nowrap!important}
  .schedule-panel footer{font-size:clamp(10px,1vw,18px)!important}
}
#slideYoutube{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;background:#000!important;border:0!important}


/* v0.3.87: final TV composition correction — lower the prayer cards and use the empty lower area. */
@media (min-width:900px) and (orientation:landscape){
  .schedule-panel{display:flex!important;flex-direction:column!important;min-height:0!important}
  .schedule-panel .hero{flex:0 0 auto!important;justify-content:flex-start!important;padding-top:1.8vh!important;padding-bottom:0!important}
  .schedule-panel .hero .countdown{margin-top:0!important}
  .schedule-panel .prayer-grid{margin-top:2.8vh!important;margin-bottom:1.2vh!important;align-self:stretch!important}
  .schedule-panel footer{margin-top:auto!important}
  .display-columns{grid-template-columns:minmax(0,4.35fr) minmax(155px,.65fr)!important}
  .prayer .pname{font-size:clamp(12px,1.18vw,23px)!important;letter-spacing:-.035em!important}
  .prayer .ptime{font-size:clamp(27px,3.05vw,58px)!important}
}


/* v0.3.88 — definitive display composition: lower prayer grid without clipping */
@media (min-width:900px) and (orientation:landscape){
  .schedule-panel .hero{
    flex:0 0 auto!important;
    min-height:0!important;
    padding-top:2.8vh!important;
    padding-bottom:0!important;
  }
  .schedule-panel .prayer-grid{
    margin-top:5.5vh!important;
    margin-bottom:1.5vh!important;
    position:relative!important;
    z-index:2!important;
  }
  .schedule-panel footer{margin-top:auto!important}
}

/* v0.3.89 — balanced TV landscape composition */
@media (min-width:900px) and (orientation:landscape){
  .screen{padding:1.4vh 1.4vw .9vh!important}
  .display-columns{grid-template-columns:minmax(0,4.25fr) minmax(165px,.75fr)!important;gap:.8vw!important}
  .schedule-panel{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
  .schedule-panel .hero{
    flex:0 0 auto!important;
    justify-content:flex-start!important;
    min-height:0!important;
    padding-top:1.2vh!important;
    padding-bottom:0!important;
  }
  .schedule-panel .countdown{
    font-size:clamp(54px,7.1vw,118px)!important;
    line-height:.98!important;
    margin:0 0 1.1vh!important;
  }
  .schedule-panel #statusLabel{font-size:clamp(13px,1.15vw,22px)!important;line-height:1.1!important}
  .schedule-panel .next-name{font-size:clamp(28px,2.8vw,52px)!important;line-height:1.05!important;margin:.45vh 0!important}
  .schedule-panel #statusSub{font-size:clamp(13px,1.15vw,21px)!important;margin-top:.35vh!important}
  .schedule-panel .prayer-grid{
    flex:0 0 auto!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:.55vw!important;
    margin:3.0vh 0 1.5vh!important;
    align-self:stretch!important;
  }
  .schedule-panel .prayer{
    min-width:0!important;
    min-height:clamp(78px,8.4vh,108px)!important;
    padding:1.0vh .18vw .85vh!important;
    border-radius:13px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .schedule-panel .prayer .pname{
    font-size:clamp(11px,1.18vw,23px)!important;
    line-height:1.05!important;
    letter-spacing:-.045em!important;
    white-space:nowrap!important;
  }
  .schedule-panel .prayer .ptime{
    font-size:clamp(28px,3.0vw,56px)!important;
    line-height:1!important;
    margin-top:.65vh!important;
    white-space:nowrap!important;
    letter-spacing:-.035em!important;
  }
  .schedule-panel footer{margin-top:auto!important;min-height:3.8vh!important}
  .info-panel{padding:1.4vh .8vw!important}
}


/* v0.3.91 — Reference layout alignment based on v0.3.63
   Restore the original vertical relationship:
   hero absorbs flexible space, prayer grid follows it, footer stays directly below.
   IMPORTANT: prayer card padding is intentionally NOT changed. */
@media (min-width:900px) and (orientation:landscape){
  .schedule-panel{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .schedule-panel .hero{
    flex:1 1 auto!important;
    min-height:0!important;
    justify-content:flex-start!important;
    padding-top:1.2vh!important;
    padding-bottom:0!important;
  }
  .schedule-panel .prayer-grid{
    flex:0 0 auto!important;
    margin-top:1vh!important;
    margin-bottom:1.5vh!important;
    align-self:stretch!important;
  }
  .schedule-panel footer{
    flex:0 0 auto!important;
    margin-top:0!important;
  }
}


/* v0.3.92 — REAL ROOT FIX: restore reference vertical flow.
   Do not alter prayer-card padding, gap, font sizes, or card dimensions.
   The previous patches forced the hero to flex-start and made display-columns
   height:100% inside a flex parent, so the available height was calculated wrong. */
@media (min-width:900px) and (orientation:landscape){
  .screen{
    display:flex!important;
    flex-direction:column!important;
    min-height:100vh!important;
    height:100vh!important;
  }
  .display-columns{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    align-items:stretch!important;
  }
  .schedule-panel{
    height:100%!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .schedule-panel .hero{
    flex:1 1 auto!important;
    min-height:0!important;
    justify-content:center!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .schedule-panel .prayer-grid{
    flex:0 0 auto!important;
    margin-top:1vh!important;
    margin-bottom:1.5vh!important;
  }
  .schedule-panel footer{
    flex:0 0 auto!important;
    margin-top:0!important;
  }
}


/* v0.3.93 — Running text compact reference alignment
   Based on the v0.3.63 reference relationship between prayer grid and ticker.
   IMPORTANT: prayer-card padding, font size, gap and card dimensions are untouched. */
@media (min-width:900px) and (orientation:landscape){
  .schedule-panel footer{
    flex:0 0 auto!important;
    min-height:3.5vh!important;
    height:3.5vh!important;
    margin-top:0!important;
    padding-top:.7vh!important;
    padding-bottom:0!important;
    padding-left:0!important;
    padding-right:0!important;
    align-items:center!important;
    line-height:1!important;
    overflow:hidden!important;
  }
  .schedule-panel footer #runningText{
    height:2.1vh!important;
    min-height:0!important;
    line-height:1!important;
    font-size:clamp(11px,1.1vw,19px)!important;
    padding:0 2vw 0 0!important;
    margin:0!important;
    display:block!important;
    overflow:visible!important;
    white-space:nowrap!important;
    text-overflow:clip!important;
  }
  .schedule-panel .prayer-grid{
    margin-bottom:1vh!important;
  }
}

/* Keep compact behavior on smaller screens without changing prayer padding. */
@media (max-width:899px){
  footer{
    min-height:34px!important;
    height:34px!important;
    padding-top:4px!important;
    padding-bottom:0!important;
  }
  footer #runningText{
    line-height:1!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
}


/* v0.3.94 — FINAL CLEAN LAYOUT OVERRIDE
   Root issue: accumulated !important layout patches left the schedule column
   at intrinsic content height instead of using the full display-column height.
   This rule explicitly defines the vertical flow. Prayer-card padding and
   dimensions are deliberately NOT modified. */
@media (min-width:900px) and (orientation:landscape){
  #display.screen{
    display:flex!important;
    flex-direction:column!important;
    box-sizing:border-box!important;
    height:100vh!important;
    min-height:100vh!important;
  }

  #display.screen > .display-columns{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(165px,.75fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    align-items:stretch!important;
  }

  #display.screen > .display-columns > .schedule-panel{
    display:flex!important;
    flex-direction:column!important;
    align-self:stretch!important;
    height:auto!important;
    min-height:0!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  #display.screen > .display-columns > .schedule-panel > .topbar{
    flex:0 0 auto!important;
  }

  #display.screen > .display-columns > .schedule-panel > .hero{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    overflow:visible!important;
  }

  #display.screen > .display-columns > .schedule-panel > .prayer-grid{
    flex:0 0 auto!important;
    width:100%!important;
    margin-top:0.8vh!important;
    margin-bottom:1.2vh!important;
    align-self:stretch!important;
  }

  #display.screen > .display-columns > .schedule-panel > footer{
    flex:0 0 3.5vh!important;
    height:3.5vh!important;
    min-height:3.5vh!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding-top:.4vh!important;
    padding-bottom:0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
  }

  #display.screen > .display-columns > .schedule-panel > footer #runningText{
    height:auto!important;
    min-height:0!important;
    line-height:1!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(11px,1.1vw,19px)!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
}

/* v0.3.95 — Acode portrait preview: restore visual landscape canvas.
   A normal browser cannot physically rotate the phone without a user gesture,
   but the display itself must render as landscape immediately in portrait preview. */
@media (orientation:portrait){
  html,body{
    width:100%;height:100%;overflow:hidden!important;
  }
  #app{
    position:fixed!important;
    left:0!important;top:0!important;
    width:100vh!important;
    height:100vw!important;
    min-width:0!important;
    min-height:0!important;
    transform-origin:top left!important;
    transform:rotate(90deg) translateY(-100%)!important;
    overflow:hidden!important;
  }
  #app .screen{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:2.2vh 2.5vw!important;
    overflow:hidden!important;
  }
  #app .display-columns{
    display:grid!important;
    grid-template-columns:minmax(0,3.15fr) minmax(150px,.55fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    flex-direction:initial!important;
    height:100%!important;
    min-height:0!important;
    gap:.7vw!important;
  }
  #app .schedule-panel{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    min-height:0!important;
  }
  #app .schedule-panel .hero{
    flex:1 1 auto!important;
    min-height:0!important;
    justify-content:center!important;
  }
  #app .schedule-panel .prayer-grid{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:.35vw!important;
    margin-top:.8vh!important;
    margin-bottom:1vh!important;
  }
  #app .schedule-panel .prayer{
    padding:2.2vh .55vw!important;
  }
  #app .schedule-panel footer{
    min-height:3.5vh!important;
    height:3.5vh!important;
    padding-top:.4vh!important;
    padding-bottom:0!important;
  }
  #app .info-panel{
    min-height:0!important;
    padding:1vh .55vw!important;
  }
  #slideshow{
    position:fixed!important;
    left:0!important;top:0!important;
    width:100vh!important;height:100vw!important;
    transform-origin:top left!important;
    transform:rotate(90deg) translateY(-100%)!important;
  }
}


/* v0.3.96 — Display panel: Information Masjid only.
   Hide the notes section on the public/display screen.
   Cash balance and Informasi Masjid remain visible. */
@media (min-width:0px){
  #display .info-panel .info-divider:last-of-type,
  #display .info-panel #infoNote,
  #display .info-panel #infoNote + .info-spacer{
    display:none!important;
  }
}


/* v0.3.97 — Running text speed setting */
#runningText{
  --running-speed:28s;
  animation-duration:var(--running-speed)!important;
}


/* v0.4.1 — Continuous running text: eliminate long blank interval between loops */
footer #runningText{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  padding-right:0!important;
  text-overflow:clip!important;
  animation:none!important;
}
footer #runningText .running-track{
  display:inline-flex!important;
  width:max-content!important;
  min-width:max-content!important;
  gap:8vw;
  will-change:transform;
  animation:runningTickerContinuous var(--running-speed,28s) linear infinite!important;
}
footer #runningText .running-item{
  display:inline-block!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
@keyframes runningTickerContinuous{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 4vw))}
}


/* v0.4.2 — Adaptive Informasi Masjid typography */
#infoMessage{
  font-size:clamp(14px,1.28vw,29px);
  line-height:1.22;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:normal;
  max-height:100%;
  transition:font-size .15s ease;
}


/* v0.4.3 — Adaptive info benar-benar mengalahkan aturan font-size !important lama */
#display .info-panel > #infoMessage{
  max-height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  box-sizing:border-box !important;
}

/* v0.4.4 — Batasi ruang panel informasi agar adaptive benar-benar bekerja.
   Info message harus mengisi hanya sisa tinggi panel, bukan memperbesar grid row. */
#display .info-panel{
  display:grid!important;
  grid-template-rows:auto auto auto auto auto minmax(0,1fr)!important;
  align-content:stretch!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#display .info-panel > #infoMessage{
  grid-row:6!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  padding:0!important;
  margin:clamp(4px,.45vh,8px) 0 0!important;
  font-size:20px!important;
  line-height:1.16!important;
}


/* v0.4.5 — Kunci area informasi dengan flex agar ukuran teks tidak memengaruhi tinggi panel. */
#display .info-panel{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#display .info-panel > #infoMessage{
  flex:1 1 0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  margin:clamp(4px,.45vh,8px) 0 0!important;
  padding:0!important;
  font-size:30px!important;
  line-height:1.16!important;
  box-sizing:border-box!important;
  transition:none!important;
}

/* v0.4.6 — Running text lebih tegas dan kontras untuk display masjid */
footer #runningText,
footer #runningText .running-track,
footer #runningText .running-item{
  color:#5b4614!important;
  font-weight:800!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
  -webkit-font-smoothing:antialiased!important;
}



/* v0.4.22 — unified TV stage, clean canonical geometry
   One 16:9 stage owns both prayer display and YouTube slideshow. */
html,body{margin:0!important;width:100%;height:100%;overflow:hidden!important;background:#000!important;}
#app{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;background:#000!important;}
#tvStage{
  position:absolute!important;
  left:50%!important;top:50%!important;
  width:100vw!important;height:56.25vw!important;
  max-width:177.7778vh!important;max-height:100vh!important;
  aspect-ratio:16/9!important;
  transform:translate(-50%,-50%)!important;
  overflow:hidden!important;background:#000!important;
}
#display.screen{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  box-sizing:border-box!important;
  margin:0!important;padding:1.25% 1.35% .65%!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  display:block!important;
  background:#f4f1e8!important;
}
#display.screen > .display-columns{
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  box-sizing:border-box!important;display:grid!important;
  grid-template-columns:minmax(0,2.28fr) minmax(0,.92fr)!important;
  gap:1.05%!important;overflow:hidden!important;
}
#display.screen > .display-columns > .schedule-panel{
  min-width:0!important;min-height:0!important;width:100%!important;height:100%!important;
  display:grid!important;grid-template-rows:auto minmax(0,1fr) auto auto!important;
  overflow:hidden!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar{
  min-width:0!important;min-height:0!important;margin:0!important;padding:0 0 1.05%!important;
  overflow:hidden!important;
}
#display.screen > .display-columns > .schedule-panel > .hero{
  min-width:0!important;min-height:0!important;height:auto!important;padding:0!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
  overflow:hidden!important;text-align:center!important;
}
#display.screen .hero .countdown{
  max-width:100%!important;font-size:clamp(62px,8.6vw,178px)!important;
  line-height:.95!important;letter-spacing:-.055em!important;margin:0 0 1.2%!important;
  white-space:nowrap!important;
}
#display.screen .hero #statusLabel{font-size:clamp(13px,1.15vw,25px)!important;line-height:1!important;margin:0 0 .5%!important;letter-spacing:.2em!important;}
#display.screen .hero .next-name{font-size:clamp(34px,3.35vw,70px)!important;line-height:.96!important;margin:0!important;white-space:nowrap!important;}
#display.screen .hero #statusSub{font-size:clamp(12px,1.05vw,22px)!important;line-height:1!important;margin-top:.8%!important;}
#display.screen > .display-columns > .schedule-panel > .prayer-grid{
  width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:.65%!important;margin:1% 0 1.35%!important;align-self:stretch!important;overflow:hidden!important;
}
#display.screen .prayer-grid .prayer{
  min-width:0!important;max-width:100%!important;min-height:0!important;box-sizing:border-box!important;
  padding:1.2% .25%!important;border-radius:11px!important;overflow:hidden!important;text-align:center!important;
}
#display.screen .prayer-grid .prayer .pname{
  max-width:100%!important;font-size:clamp(11px,1.18vw,25px)!important;line-height:1!important;
  letter-spacing:-.045em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;margin:0!important;
}
#display.screen .prayer-grid .prayer .ptime{
  max-width:100%!important;font-size:clamp(27px,2.85vw,61px)!important;line-height:.96!important;
  letter-spacing:-.055em!important;white-space:nowrap!important;margin:.7% 0 0!important;
}
#display.screen > .display-columns > .schedule-panel > footer{
  min-width:0!important;min-height:0!important;height:clamp(44px,6.2%,74px)!important;
  box-sizing:border-box!important;margin:0!important;padding:.4% 0 .35%!important;
  display:flex!important;align-items:center!important;overflow:hidden!important;line-height:1!important;
}
#display.screen footer #runningText{
  width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;
  overflow:hidden!important;line-height:1.02!important;font-size:clamp(24px,2.25vw,44px)!important;
  font-weight:900!important;white-space:nowrap!important;
}
#display.screen footer #runningText .running-track,
#display.screen footer #runningText .running-item{font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;}
#display.screen > .display-columns > .info-panel{
  min-width:0!important;min-height:0!important;width:100%!important;height:100%!important;
  box-sizing:border-box!important;overflow:hidden!important;
}
/* The slideshow is a sibling view inside the same 16:9 stage. */
#tvStage > #slideshow{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  z-index:2000!important;background:#000!important;overflow:hidden!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
#tvStage > #slideshow.hidden{display:none!important;}
#tvStage > #slideshow #slideYoutube{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;background:#000!important;display:block!important;}
/* v0.4.26 — subtle but visible sync control; preserve all layout geometry */
#display.screen > .outer-settings-button{
  position:absolute!important;top:1.35%!important;right:1.15%!important;bottom:auto!important;z-index:2147483647!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;
  width:clamp(34px,3.2%,52px)!important;height:clamp(34px,3.2%,52px)!important;min-width:34px!important;min-height:34px!important;
  border:1px solid rgba(154,116,21,.55)!important;border-radius:50%!important;background:rgba(247,231,169,.72)!important;color:#70530b!important;
  box-shadow:0 1px 4px rgba(70,50,0,.16)!important;opacity:.72!important;visibility:visible!important;padding:0!important;
  line-height:1!important;font-family:Arial,Helvetica,sans-serif!important;font-size:0!important;font-weight:700!important;
  pointer-events:auto!important;touch-action:manipulation!important;
}
#display.screen > .outer-settings-button .sync-gear{display:inline-block!important;font-size:clamp(17px,1.55vw,27px)!important;line-height:1!important;}
#display.screen > .outer-settings-button .sync-label{display:none!important;}
#display.screen > .outer-settings-button:hover,#display.screen > .outer-settings-button:focus,#display.screen > .outer-settings-button:active{opacity:1!important;background:#ead28a!important;color:#604600!important;outline:none!important;}

/* v0.4.24 — ticker-only correction from v0.4.22 baseline
   Do not alter schedule, hero, prayer cards, info panel, stage, or sync button. */
#display.screen > .display-columns > .schedule-panel > footer{
  height:clamp(52px,7.6%,86px)!important;
  min-height:clamp(52px,7.6%,86px)!important;
  max-height:clamp(52px,7.6%,86px)!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#display.screen footer #runningText{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
#display.screen footer #runningText .running-track{
  display:inline-flex!important;
  align-items:center!important;
  height:100%!important;
  line-height:1!important;
}
#display.screen footer #runningText .running-item{
  display:inline-block!important;
  line-height:1!important;
  padding-top:0!important;
  padding-bottom:0!important;
  margin:0!important;
}

/* v0.4.25 — prayer cards only; preserve ticker and all other layout */
#display.screen > .display-columns > .schedule-panel > .prayer-grid{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:.55%!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
#display.screen .prayer-grid .prayer{
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  padding:1.1% .12%!important;
  overflow:hidden!important;
}
#display.screen .prayer-grid .prayer .pname{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  font-size:clamp(9px,.92vw,18px)!important;
  line-height:1!important;
  letter-spacing:-.065em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
#display.screen .prayer-grid .prayer .ptime{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  font-size:clamp(22px,2.18vw,46px)!important;
  line-height:.98!important;
  letter-spacing:-.085em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  margin:.65% 0 0!important;
}

/* v0.4.27 — sync button lower + compact mosque identity only
   No changes to prayer cards, countdown, ticker, info panel, stage, or YouTube. */
#display.screen > .outer-settings-button{
  top:auto!important;
  bottom:1.55%!important;
  right:1.15%!important;
  width:clamp(30px,2.65%,44px)!important;
  height:clamp(30px,2.65%,44px)!important;
  min-width:30px!important;
  min-height:30px!important;
  opacity:.58!important;
  background:rgba(247,231,169,.52)!important;
  border-color:rgba(154,116,21,.38)!important;
  box-shadow:0 1px 3px rgba(70,50,0,.12)!important;
}
#display.screen > .outer-settings-button .sync-gear{
  font-size:clamp(15px,1.25vw,22px)!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(150px,31%)!important;
  column-gap:2%!important;
  align-items:start!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar .brand{
  min-width:0!important;
  max-width:100%!important;
  gap:.65vw!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar #mosqueName{
  display:block!important;
  max-width:100%!important;
  font-size:clamp(16px,1.75vw,32px)!important;
  line-height:1.12!important;
  letter-spacing:.045em!important;
  margin:0!important;
  white-space:normal!important;
  overflow:hidden!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar #mosqueLocation{
  font-size:clamp(10px,.85vw,16px)!important;
  line-height:1.1!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar .datebox{
  min-width:0!important;
  width:100%!important;
  text-align:right!important;
  overflow:hidden!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar .datebox #clock{
  font-size:clamp(24px,2.55vw,48px)!important;
  line-height:1!important;
  letter-spacing:.015em!important;
  white-space:nowrap!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar .datebox div:not(#clock){
  font-size:clamp(9px,.82vw,15px)!important;
  line-height:1.12!important;
}

/* v0.4.37 — YouTube controls visible and interactive */
#tvStage > #slideshow #slideYoutube{pointer-events:auto!important;}

/* v0.4.30 — single visible layer during slideshow; keep display mounted but hidden */
#tvStage.slideshow-mode > #display{
  visibility:hidden!important;
  pointer-events:none!important;
}
#tvStage.slideshow-mode > #slideshow{
  visibility:visible!important;
  opacity:1!important;
}


/* v0.4.36 — mosque identity alignment + requested YouTube HD720.
   Scope limited to header identity and YouTube playback request. */
#display.screen > .display-columns > .schedule-panel > .topbar{
  align-items:center!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar .brand{
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar #mosqueName{
  text-align:left!important;
  line-height:1.05!important;
  margin:0!important;
}
#display.screen > .display-columns > .schedule-panel > .topbar #mosqueLocation{
  text-align:left!important;
  margin-top:.2vh!important;
}

/* v0.4.37.35 — local images overlay only the countdown/hero area.
   Remote YouTube remains a full-stage slideshow. */
#tvStage.slideshow-local-mode > #display{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#tvStage.slideshow-local-mode > #slideshow{
  position:absolute!important;
  z-index:2100!important;
  inset:auto!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  background:#000!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
#tvStage.slideshow-local-mode > #slideshow #slideLocalImage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  background:#000!important;
}
#tvStage.slideshow-local-mode > #slideshow #slideYoutube{display:none!important;}
#tvStage.slideshow-remote-mode > #display{visibility:hidden!important;pointer-events:none!important;}
#tvStage.slideshow-remote-mode > #slideshow{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:2100!important;background:#000!important;}

/* v0.4.37.37: ensure remote YouTube player is not hidden by local/legacy rules */
#tvStage.slideshow-remote-mode > #slideshow #slideYoutube{display:block!important;visibility:visible!important;opacity:1!important;z-index:2200!important;pointer-events:auto!important;}
#tvStage.slideshow-remote-mode > #slideshow #slideLocalImage{display:none!important;visibility:hidden!important;opacity:0!important;}

/* v0.4.37.39 — reset local hero geometry before fullscreen YouTube. */
#tvStage.slideshow-remote-mode > #slideshow{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  transform:none!important;
  z-index:2100!important;
}
#tvStage.slideshow-remote-mode > #slideshow #slideYoutube{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* v0.4.37.50 — PWA controls and adaptive fullscreen layer. */
#pwaActions{
  position:fixed!important;right:12px!important;top:12px!important;z-index:999999!important;
  display:flex!important;gap:8px!important;align-items:center!important;
  pointer-events:auto!important;
}
#pwaActions button{
  border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;
  background:rgba(7,27,22,.86)!important;color:#f4f1e8!important;
  padding:8px 12px!important;font-size:12px!important;line-height:1!important;
  box-shadow:0 2px 10px rgba(0,0,0,.22)!important;
}
#pwaActions button[hidden]{display:none!important}
html.is-fullscreen #pwaActions{top:10px!important;right:10px!important}
@media (max-width:700px){
  #pwaActions{right:8px!important;top:8px!important;gap:5px!important}
  #pwaActions button{font-size:10px!important;padding:7px 9px!important}
}
/* Keep the 16:9 stage centered and adaptive on PC, phone, and TV viewports. */
#tvStage{
  width:min(100vw,177.7778dvh)!important;
  height:min(56.25vw,100dvh)!important;
  max-width:100vw!important;max-height:100dvh!important;
}
@supports not (height:100dvh){
  #tvStage{width:min(100vw,177.7778vh)!important;height:min(56.25vw,100vh)!important;max-height:100vh!important}
}
@media (orientation:portrait){
  #tvStage{width:100vw!important;height:56.25vw!important;max-width:100vw!important;max-height:none!important}
}


/* v0.4.37.51 — fullscreen viewport positioning fix.
   The PWA must occupy the actual browser viewport instead of centering
   a fixed 16:9 stage below/inside the viewport. */
html, body {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#tvStage {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  transform: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#display.screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}
@supports not (height: 100dvh) {
  #app, #tvStage {
    height: 100vh !important;
  }
}


/* v0.4.37.52 — PWA portrait/rotation + running-text visibility fix */

/* Do not retain the legacy portrait rotation on the outer app wrapper. */
#app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  transform-origin: initial !important;
  overflow: hidden !important;
}

/* Keep the schedule panel internally bounded so the footer/ticker remains visible. */
#display.screen > .display-columns > .schedule-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#display.screen > .display-columns > .schedule-panel > .hero {
  min-height: 0 !important;
  overflow: hidden !important;
}
#display.screen > .display-columns > .schedule-panel > .prayer-grid {
  min-height: 0 !important;
  flex: 0 0 auto !important;
}
#display.screen > .display-columns > .schedule-panel > footer {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5 !important;
  min-height: clamp(34px, 4.4vh, 72px) !important;
  max-height: clamp(34px, 6vh, 82px) !important;
  overflow: hidden !important;
}
#display.screen > .display-columns > .schedule-panel > footer #runningText {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  animation: runningTicker var(--running-speed, 28s) linear infinite !important;
}

/* The fullscreen exit hint is controlled by the browser/OS and cannot be
   hidden with page CSS. Keep the app's own button from becoming an exit
   control while fullscreen is active. */
#pwaFullscreenButton:fullscreen,
#pwaFullscreenButton[aria-label*="Keluar"] {
  display: none !important;
}


/* v0.4.37.53 — final PWA viewport/typography pass
   - remove app fullscreen control; use browser/system ESC or installed-PWA fullscreen
   - make portrait browser viewport render a centered landscape canvas
   - enlarge identity, countdown, prayer cards and running text
   - prevent legacy mobile min-width rules from breaking the layout */

/* Hide the app's fullscreen control. Browser/OS fullscreen hints cannot be
   removed by page CSS; ESC/back remains the exit method. */
button[id*="Fullscreen" i],
button[id*="fullscreen" i],
#pwaFullscreenButton,
.pwa-fullscreen-button,
.fullscreen-button {
  display: none !important;
}

/* Stable landscape canvas on normal landscape displays. */
html, body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
  overflow: hidden !important;
}
#tvStage {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Portrait phone: rotate a landscape canvas to fit the complete phone screen. */
@media (max-width: 900px) and (orientation: portrait) {
  #app {
    left: 50% !important;
    top: 50% !important;
    inset: auto !important;
    width: 100dvh !important;
    height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center !important;
  }
  #tvStage {
    width: 100% !important;
    height: 100% !important;
  }
  #display.screen {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 1.25% 1.35% .65% !important;
  }
  #display.screen > .display-columns {
    grid-template-columns: minmax(0, 2.28fr) minmax(0, .92fr) !important;
  }
}

/* Remove the old mobile fixed-width canvas rule. */
@media (max-width: 700px) {
  .screen {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 1.25% 1.35% .65% !important;
  }
  .display-columns {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Readability scale for PC/TV. */
#mosqueName {
  font-size: clamp(28px, 3.35vw, 64px) !important;
  line-height: 1.12 !important;
}
#mosqueLocation {
  font-size: clamp(18px, 1.7vw, 34px) !important;
  line-height: 1.2 !important;
}
.countdown {
  font-size: clamp(52px, 7.2vw, 150px) !important;
  line-height: .98 !important;
  letter-spacing: .015em !important;
}
.prayer .pname {
  font-size: clamp(11px, 1.18vw, 23px) !important;
}
.prayer .ptime {
  font-size: clamp(22px, 2.55vw, 48px) !important;
}
#display.screen > .display-columns > .schedule-panel > footer {
  flex: 0 0 clamp(36px, 5.2vh, 78px) !important;
  height: clamp(36px, 5.2vh, 78px) !important;
  min-height: clamp(36px, 5.2vh, 78px) !important;
  max-height: none !important;
  padding-top: .35vh !important;
  align-items: center !important;
}
#display.screen > .display-columns > .schedule-panel > footer #runningText,
#runningText {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  font-size: clamp(14px, 1.55vw, 30px) !important;
  line-height: 1.1 !important;
}


/* v0.4.37.54 — portrait browser fit correction
   Do not rotate the complete application inside a portrait browser.
   Instead, fit the complete 16:9 display inside the available viewport
   with controlled letterboxing. This prevents the cropped/rotated layout
   seen on mobile Chrome while preserving the landscape TV composition. */

@media (max-width: 900px) and (orientation: portrait) {
  html, body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  #app {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    transform: none !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  #tvStage {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 100vw !important;
    height: 56.25vw !important;
    max-width: 100vw !important;
    max-height: none !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #display.screen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 1.25% 1.35% .65% !important;
    transform: none !important;
  }

  #display.screen > .display-columns {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    grid-template-columns: minmax(0, 2.28fr) minmax(0, .92fr) !important;
  }

  #display.screen > .display-columns > .schedule-panel,
  #display.screen > .display-columns > .info-panel {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #display.screen > .display-columns > .schedule-panel > footer {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #display.screen footer #runningText {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

/* Browser fullscreen cannot be triggered automatically without a user
   gesture. Installed PWA fullscreen is controlled by manifest display mode. */


/* v0.4.37.55 — restore compact fullscreen control
   Browser fullscreen still requires a user gesture. The control is kept
   small and placed at the bottom-right so it does not dominate the display. */
#pwaActions {
  top: auto !important;
  right: 10px !important;
  bottom: 10px !important;
  left: auto !important;
  gap: 0 !important;
  width: auto !important;
  height: auto !important;
}

#pwaFullscreenButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 50% !important;
  background: rgba(7,27,22,.42) !important;
  color: rgba(244,241,232,.86) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: .72 !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.18) !important;
}

#pwaFullscreenButton::before {
  content: "⛶" !important;
  display: block !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

#pwaFullscreenButton:hover,
#pwaFullscreenButton:focus-visible {
  opacity: 1 !important;
  background: rgba(7,27,22,.78) !important;
}

@media (max-width: 700px) {
  #pwaActions {
    right: 7px !important;
    bottom: 7px !important;
  }

  #pwaFullscreenButton {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
  }

  #pwaFullscreenButton::before {
    font-size: 15px !important;
  }
}