/*
 * NAB Display CSS — CLEAN BASELINE
 * Safe cleanup only:
 * - comments/legacy commented code removed
 * - whitespace normalized
 * - exact duplicate declarations within the same rule removed
 * - selector order, media-query order, specificity and cascade preserved
 *
 * Source baseline: display.css current 2026-08-24
 */

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Poppins", sans-serif;
    color: white;
    text-align: center;
    background: radial-gradient(circle at top, #0f3d33 0%, #020814 60%, #000 100%);
}

.slide {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 1;
}

.slide.active {
    opacity: 1;
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 40px;
}

.overlay {
    max-width: 1920px;
    margin: auto;
}

#header-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#masjid-title {
    font-size: 35px;
    font-weight: 800;
    color: var(--nab-color-title);
    letter-spacing: 2px;
}

#sub-title {
    font-size: 25px;
    opacity: 0.9;
}

#date {
    color: var(--nab-color-clock);
    font-size: 45px;
    margin-top: 6px;
}

#clock {
    color: var(--nab-color-clock);
    font-size: 95px;
    font-weight: 850;
    margin-top: 2px;
}

#ramadhanCountdown {
    color: var(--nab-color-ramadhan-text);
    font-size: 55px;
}

#center-box {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transition: all .5s ease-in-out;
}

#next-name {
    color: var(--nab-color-next-prayer);
    font-size: 55px;
    font-weight: 900;
}

#next-time {
    color: var(--nab-color-next-prayer);
    font-size: 80px;
    font-weight: 700;
    text-shadow: 0 0 30px rgba(0,0,0,0.45);
}

#countdown {
    font-size: 140px;
    font-weight: 850;
    color: var(--nab-color-title);
    text-shadow: 0 0 25px rgba(0,255,160,0.6);
    margin-top: 1px;
}

#petugas {
    font-size: 25px;
    margin-top: 8px;
    opacity: .92;
}

#enable-sound {
    margin-top: 20px;
    font-size: 18px;
    padding: 12px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--nab-sound-start), var(--nab-sound-end));
    box-shadow: 0 0 18px rgba(0,255,190,0.4);
    font-weight: 600;
}

#enable-sound:hover {
    transform: scale(1.05);
}

#progress-panel {
    width: min(72vw, 1380px);
    box-sizing: border-box;
    padding: 12px 16px 14px;
    border: 1px solid var(--nab-glass-border);
    border-radius: 20px;
    background: linear-gradient(
        180deg,
        var(--nab-glass-bg-top),
        var(--nab-glass-bg-bottom)
    );
    box-shadow: 0 10px 30px var(--nab-glass-shadow),
        inset 0 1px 1px var(--nab-glass-inset);
    backdrop-filter: blur(12px) saturate(135%);
}

.ramadhan-bar {
    background: linear-gradient(90deg,#ffd700,#ffae00);
}

.glow-green {
    box-shadow: 0 0 10px #00ff99,
                0 0 20px #00ff99,
                0 0 30px #00ff99;
}

.glow-orange {
    box-shadow: 0 0 10px #ff9900,
                0 0 20px #ff6600,
                0 0 30px #ff3300;
}

.glow-red {
    box-shadow: 0 0 10px #ff0000,
                0 0 20px #ff0000,
                0 0 40px #ff0000;
    animation: pulseRed 1s infinite alternate;
}

@keyframes pulseRed {
    from {
        box-shadow: 0 0 10px #ff0000;
    }

    to {
        box-shadow: 0 0 40px #ff0000;
    }

}

#adzan-overlay {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: radial-gradient(circle at center, #ffefc6 0%, #b88a44 55%, #5f431d 100%);
    z-index: 9999;
    color: white;
    text-align: center;
    opacity: 0;
    filter: blur(10px);
    transition: opacity .8s ease, filter .8s ease;
}

#adzan-overlay.show {
    display: flex;
    opacity: 1;
    filter: blur(0);
}

.adzan-title {
    font-size: 110px;
    font-weight: 900;
    letter-spacing: 4px;
    text-shadow: 0 0 30px rgba(255,255,210,0.9);
    margin-bottom: 20px;
}

.adzan-subtitle {
    font-size: 34px;
    max-width: 70%;
    line-height: 1.4;
    text-shadow: 0 0 18px rgba(0,0,0,0.7);
}

#jamaah-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    color: white;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px;
    text-align: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(18px) saturate(200%);
}

#jamaah-overlay.show {
    display: flex;
}

#jamaah-overlay .title {
    font-size: 90px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 25px;
    text-shadow: 0 0 25px rgba(0,255,160,0.9);
}

#jamaah-overlay .aq {
    font-size: 48px;
    max-width: 80%;
    line-height: 1.5;
    opacity: 0.95;
}

#jamaah-overlay .hadits {
    font-size: 36px;
    max-width: 80%;
    line-height: 1.5;
    opacity: 0.95;
}

#jamaah-overlay .hadits span {
    display: block;
    margin-top: 10px;
    font-size: 26px;
    opacity: 0.9;
}

#running-box {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

#running-text {
    display: inline-block;
    padding-left: 100%;
    animation: runText 28s linear infinite;
    font-size: 42px;
    color: #ffffff;
    opacity: 0.95;
}

@keyframes runText {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }

}

.ramadhan-overlay {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: radial-gradient(circle at center, #ffd36b 0%, #b67a20 60%, #4e3212 100%);
    color: white;
    z-index: 99999;
    text-align: center;
    opacity: 0;
    transition: opacity .8s ease;
}

.ramadhan-overlay.show {
    display: flex;
    opacity: 1;
}

.ro-title {
    font-size: 70px;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 0 0 25px white;
}

.ro-main {
    font-size: 130px;
    font-weight: 900;
    margin-bottom: 10px;
}

.ro-sub {
    font-size: 40px;
    max-width: 70%;
    line-height: 1.4;
    opacity: 0.95;
}

.ramadhan-ui {
    background: radial-gradient(circle at top, #004d40 0%, #001c14 60%, #000 100%) !important;
}

.glow-soft {
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0% {
        text-shadow: 0 0 12px rgba(0,255,160,0.3);
    }

    50% {
        text-shadow: 0 0 24px rgba(0,255,160,0.7);
    }

    100% {
        text-shadow: 0 0 12px rgba(0,255,160,0.3);
    }

}

.prayer-progress-info {
    width: 100%;
    margin: 0;
}

.progress-label {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 10px;
    font-size: clamp(15px, 1.15vw, 22px);
    font-weight: 800;
    color: #fff7a8;
}

.progress-label span:first-child {
    text-align: left;
    font-size: inherit;
    color: #8dffd0;
}

.progress-label span:nth-child(2) {
    text-align: center;
    min-width: 72px;
    padding: 4px 18px;
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 999px;
    color: #ffe85c;
    background: rgba(255, 215, 0, 0.10);
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.08);
}

.progress-label span:last-child {
    text-align: right;
    font-size: inherit;
    color: #fff06f;
}

#footer-info {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(96vw, 1840px);
    padding: 14px 18px 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: linear-gradient(
            180deg,
            rgba(0,25,22,.70),
            rgba(0,8,10,.62)
        );
    box-shadow: 0 12px 35px rgba(0,0,0,.32),
        inset 0 1px 1px rgba(255,255,255,.08);
    backdrop-filter: blur(14px)
        saturate(140%);
    z-index: 30;
}

#footer-jadwal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin-bottom: 10px;
    font-size: clamp(20px, 1.8vw, 34px);
    font-weight: 650;
}

#footer-jadwal span {
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

#footer-jadwal span.jadwal-aktif {
    border-color: rgba(123, 255, 187, 0.52);
    background: linear-gradient(
        180deg,
        rgba(0, 255, 153, 0.16),
        rgba(0, 120, 86, 0.10)
    );
    box-shadow: 0 0 16px rgba(0, 255, 153, 0.24),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    transition: transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

#footer-jadwal span.jadwal-aktif b {
    color: #b9ff8f;
    text-shadow: 0 0 8px rgba(123, 255, 187, 0.70),
        0 0 16px rgba(0, 255, 153, 0.35);
}

#footer-jadwal .jadwal-imsyak.jadwal-aktif {
    border-color: rgba(125, 223, 255, 0.58);
    background: rgba(125, 223, 255, 0.13);
    box-shadow: 0 0 16px rgba(125, 223, 255, 0.28);
}

#footer-jadwal .jadwal-imsyak.jadwal-aktif b {
    color: var(--nab-color-imsyak-active);
    text-shadow: 0 0 14px rgba(125, 223, 255, 0.60);
}

#footer-jadwal .jadwal-syuruk.jadwal-aktif {
    border-color: rgba(255, 200, 87, 0.62);
    background: rgba(255, 200, 87, 0.13);
    box-shadow: 0 0 16px rgba(255, 200, 87, 0.30);
}

#footer-jadwal .jadwal-syuruk.jadwal-aktif b {
    color: var(--nab-color-syuruk-active);
    text-shadow: 0 0 14px rgba(255, 200, 87, 0.60);
}

#footer-jadwal b {
    display: block;
    margin-top: 2px;
    color: var(--nab-color-schedule-time);
    font-size: 1.08em;
}

#footer-jadwal .jadwal-imsyak {
    color: var(--nab-color-imsyak);
}

#footer-jadwal .jadwal-imsyak b {
    color: var(--nab-color-imsyak);
    text-shadow: 0 0 10px rgba(125, 223, 255, 0.35);
}

#footer-jadwal .jadwal-syuruk {
    color: var(--nab-color-syuruk);
}

#footer-jadwal .jadwal-syuruk b {
    color: var(--nab-color-syuruk);
    text-shadow: 0 0 10px rgba(255, 200, 87, 0.35);
}

#running-text {
    font-size: clamp(22px, 2vw, 38px);
    color: rgba(255,255,255,.95);
    text-shadow: 0 0 12px rgba(0,0,0,.55);
}

.prayer-progress-track {
    width: 100%;
    height: 20px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.46);
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.38);
}

.prayer-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--nab-progress-default-start),
        var(--nab-progress-default-end)
    );
    transition: width 1s linear;
}

#runtime-status {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

#runtime-status .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #31f29b;
    box-shadow: 0 0 10px rgba(49,242,155,.9);
}

#runtime-status.offline .dot {
    background: #ff5252;
    box-shadow: 0 0 10px rgba(255,82,82,.85);
}

html, body {
    width: 100%;
    min-height: 100%;
}

.overlay, #header-block, #center-box, #progress-panel, #footer-info {
    box-sizing: border-box;
}

#header-block, #center-box {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

#masjid-title, #date, #next-name, #countdown, #petugas {
    max-width: 100%;
}

@media (max-width: 1024px) {
    .overlay {
        padding-top: clamp(18px, 3vh, 32px);
    }

    #header-block {
        gap: 5px;
    }

    #masjid-title {
        font-size: clamp(24px, 4vw, 34px);
        letter-spacing: 1px;
    }

    #date {
        font-size: clamp(23px, 4.3vw, 38px);
        margin-top: 2px;
    }

    #clock {
        font-size: clamp(52px, 10vw, 82px);
        line-height: 1;
    }

    #ramadhanCountdown {
        font-size: clamp(25px, 5vw, 44px);
    }

    #center-box {
        margin-top: clamp(18px, 4vh, 38px);
        gap: clamp(9px, 2vh, 18px);
    }

    #next-name {
        font-size: clamp(30px, 6vw, 50px);
        line-height: 1.12;
    }

    #next-time {
        font-size: clamp(42px, 8vw, 68px);
        line-height: 1;
    }

    #countdown {
        font-size: clamp(66px, 14vw, 118px);
        line-height: .95;
    }

    #petugas {
        font-size: clamp(16px, 2.7vw, 23px) !important;
        margin-top: 2px !important;
    }

    #progress-panel {
        width: min(88vw, 900px);
        padding: 9px 12px 11px;
        border-radius: 16px;
    }

    .progress-label {
        margin-bottom: 7px;
        font-size: clamp(13px, 2vw, 18px);
    }

    .progress-label span:nth-child(2) {
        min-width: 58px;
        padding: 3px 12px;
    }

    .prayer-progress-track {
        height: 15px;
    }

    #footer-info {
        width: calc(100vw - 24px);
        bottom: 10px;
        padding: 10px 10px 8px;
        border-radius: 18px;
    }

    #footer-jadwal {
        gap: 6px;
        margin-bottom: 7px;
        font-size: clamp(13px, 2.2vw, 22px);
    }

    #footer-jadwal span {
        padding: 6px 4px;
        border-radius: 10px;
    }

    #running-text {
        font-size: clamp(16px, 2.7vw, 25px);
    }

    .adzan-title {
        font-size: clamp(48px, 10vw, 90px);
    }

    .adzan-subtitle {
        font-size: clamp(22px, 4vw, 32px);
        max-width: 88%;
    }

    #jamaah-overlay {
        padding: 24px;
    }

    #jamaah-overlay .title {
        font-size: clamp(45px, 9vw, 78px);
    }

    #jamaah-overlay .aq {
        font-size: clamp(28px, 5vw, 44px);
        max-width: 92%;
    }

    #jamaah-overlay .hadits {
        font-size: clamp(22px, 4vw, 32px);
        max-width: 92%;
    }

    #jamaah-overlay .hadits span {
        font-size: clamp(17px, 3vw, 24px);
    }

    .ro-title {
        font-size: clamp(34px, 7vw, 60px);
    }

    .ro-main {
        font-size: clamp(65px, 13vw, 110px);
    }

    .ro-sub {
        font-size: clamp(22px, 4vw, 34px);
        max-width: 88%;
    }

}

@media (max-width: 600px) {
    .overlay {
        padding-top: 12px;
    }

    #header-block {
        gap: 2px;
    }

    #masjid-title {
        font-size: clamp(19px, 6vw, 28px);
        letter-spacing: 0;
        white-space: nowrap;
    }

    #masjid-title a {
        font-size: .8em;
    }

    #date {
        font-size: clamp(17px, 5.2vw, 25px);
        margin-top: 1px;
        line-height: 1.15;
    }

    #clock {
        font-size: clamp(44px, 15vw, 68px);
        margin-top: 0;
    }

    #ramadhanCountdown {
        font-size: clamp(18px, 5vw, 28px);
    }

    #center-box {
        margin-top: clamp(10px, 2.5vh, 22px);
        gap: clamp(6px, 1.3vh, 11px);
    }

    #next-name {
        font-size: clamp(25px, 8vw, 38px);
    }

    #next-time {
        font-size: clamp(36px, 11vw, 54px);
    }

    #countdown {
        font-size: clamp(52px, 17vw, 82px);
        margin-top: 0;
    }

    #petugas {
        font-size: clamp(13px, 4vw, 18px) !important;
        line-height: 1.25;
    }

    #enable-sound {
        margin-top: 7px !important;
        font-size: 14px !important;
        padding: 8px 12px !important;
    }

    #progress-panel {
        width: 94vw;
        padding: 7px 8px 8px;
        border-radius: 13px;
    }

    .progress-label {
        font-size: clamp(11px, 3.1vw, 14px);
        margin-bottom: 5px;
    }

    .progress-label span:nth-child(2) {
        min-width: 44px;
        padding: 2px 7px;
    }

    .prayer-progress-track {
        height: 11px;
    }

    #footer-info {
        width: calc(100vw - 10px);
        bottom: 5px;
        padding: 6px 4px 5px;
        border-radius: 13px;
    }

    #footer-jadwal {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 2px;
        margin-bottom: 5px;
        font-size: clamp(8px, 2.5vw, 12px);
    }

    #footer-jadwal span {
        min-width: 0;
        padding: 4px 1px;
        border-radius: 7px;
        overflow: hidden;
    }

    #footer-jadwal b {
        font-size: 1.05em;
        white-space: nowrap;
    }

    #running-text {
        font-size: clamp(13px, 4vw, 18px);
    }

    #runtime-status {
        top: 5px;
        right: 5px;
        gap: 4px;
        padding: 4px 7px;
        font-size: 9px;
        opacity: .82;
    }

    #runtime-status .dot {
        width: 6px;
        height: 6px;
    }

    #adzan-overlay, #jamaah-overlay, .ramadhan-overlay {
        box-sizing: border-box;
        padding: 18px 12px;
    }

    .adzan-title {
        font-size: clamp(34px, 11vw, 58px);
        letter-spacing: 1px;
    }

    .adzan-subtitle {
        font-size: clamp(17px, 5vw, 24px);
        max-width: 95%;
    }

    #jamaah-overlay .title {
        font-size: clamp(34px, 10vw, 54px);
        letter-spacing: 1px;
        margin-bottom: 14px;
    }

    #jamaah-overlay .aq {
        font-size: clamp(22px, 6vw, 32px);
        max-width: 96%;
    }

    #jamaah-overlay .hadits {
        font-size: clamp(17px, 4.7vw, 24px);
        max-width: 96%;
    }

    #jamaah-overlay .hadits span {
        font-size: clamp(14px, 4vw, 19px);
    }

    .ro-title {
        font-size: clamp(25px, 7vw, 38px);
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .ro-main {
        font-size: clamp(48px, 14vw, 72px);
    }

    .ro-sub {
        font-size: clamp(17px, 5vw, 24px);
        max-width: 96%;
    }

}

@media (max-height: 650px) {
    .overlay {
        padding-top: 8px;
    }

    #header-block {
        gap: 1px;
    }

    #masjid-title {
        font-size: clamp(18px, 3.2vh, 28px);
    }

    #date {
        font-size: clamp(15px, 3.5vh, 24px);
        margin-top: 0;
    }

    #clock {
        font-size: clamp(38px, 9vh, 66px);
        line-height: .95;
    }

    #ramadhanCountdown {
        font-size: clamp(16px, 4vh, 26px);
    }

    #center-box {
        margin-top: clamp(5px, 2vh, 14px);
        gap: clamp(3px, 1.2vh, 8px);
    }

    #next-name {
        font-size: clamp(22px, 5vh, 36px);
    }

    #next-time {
        font-size: clamp(30px, 7vh, 48px);
    }

    #countdown {
        font-size: clamp(44px, 12vh, 76px);
        line-height: .9;
    }

    #petugas {
        font-size: clamp(12px, 3vh, 18px) !important;
        margin-top: 0 !important;
    }

    #progress-panel {
        padding: 5px 9px 6px;
    }

    .progress-label {
        margin-bottom: 3px;
    }

    .prayer-progress-track {
        height: 9px;
    }

    #footer-info {
        bottom: 4px;
        padding: 5px 7px 4px;
    }

    #footer-jadwal {
        margin-bottom: 3px;
    }

    #footer-jadwal span {
        padding-top: 3px;
        padding-bottom: 3px;
    }

}

@media (max-width: 600px) and (orientation: portrait) {
    .overlay {
        padding-top: 18px;
    }

    #header-block {
        gap: 5px;
        padding-left: 14px;
        padding-right: 14px;
    }

    #masjid-title {
        font-size: clamp(22px, 6.5vw, 29px);
        line-height: 1.1;
        letter-spacing: .2px;
    }

    #date {
        max-width: 96vw;
        font-size: clamp(17px, 5vw, 23px);
        line-height: 1.25;
        margin-top: 2px;
    }

    #clock {
        font-size: clamp(54px, 15.5vw, 72px);
        line-height: .98;
        margin-top: 7px;
        margin-bottom: 2px;
    }

    #center-box {
        width: 100%;
        margin-top: clamp(24px, 4vh, 36px);
        gap: clamp(12px, 1.9vh, 18px);
        padding-left: 12px;
        padding-right: 12px;
    }

    #next-name {
        max-width: 94vw;
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.16;
        letter-spacing: .2px;
        text-wrap: balance;
    }

    #next-time {
        font-size: clamp(40px, 11vw, 56px);
        line-height: 1;
    }

    #countdown {
        font-size: clamp(60px, 17vw, 86px);
        line-height: .96;
        margin: 2px 0 3px;
        letter-spacing: -1px;
    }

    #petugas {
        max-width: 92vw;
        font-size: clamp(14px, 4vw, 18px) !important;
        line-height: 1.35;
        margin-top: 1px !important;
    }

    #progress-panel {
        width: calc(100vw - 28px);
        margin-top: 5px;
        padding: 9px 10px 10px;
        border-radius: 15px;
    }

    .progress-label {
        margin-bottom: 7px;
        font-size: clamp(11px, 3.2vw, 14px);
        line-height: 1.15;
    }

    .progress-label span:nth-child(2) {
        min-width: 48px;
        padding: 3px 9px;
    }

    .prayer-progress-track {
        height: 11px;
    }

    #footer-info {
        width: calc(100vw - 14px);
        bottom: 7px;
        padding: 7px 5px 6px;
        border-radius: 15px;
    }

    #footer-jadwal {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px;
        margin-bottom: 7px;
        font-size: clamp(8.5px, 2.55vw, 12px);
    }

    #footer-jadwal span {
        min-width: 0;
        padding: 5px 1px 6px;
        border-radius: 8px;
        line-height: 1.15;
    }

    #footer-jadwal b {
        margin-top: 3px;
        font-size: 1.08em;
    }

    #running-box {
        padding-top: 1px;
    }

    #running-text {
        font-size: clamp(13px, 3.8vw, 17px);
        line-height: 1.25;
    }

    #runtime-status {
        top: 6px;
        right: 6px;
        gap: 4px;
        padding: 4px 7px;
        font-size: 9px;
    }

}

@media (max-width: 600px) and (orientation: portrait) and (min-height: 740px) {
    #center-box {
        margin-top: clamp(28px, 4.4vh, 40px);
        gap: clamp(14px, 2.15vh, 20px);
    }

    #progress-panel {
        margin-top: 7px;
    }

}

@media (max-width: 390px) and (orientation: portrait) {
    .overlay {
        padding-top: 14px;
    }

    #masjid-title {
        font-size: clamp(20px, 6.4vw, 25px);
    }

    #date {
        font-size: clamp(15px, 4.8vw, 20px);
    }

    #clock {
        font-size: clamp(48px, 15vw, 62px);
    }

    #center-box {
        margin-top: 20px;
        gap: 10px;
    }

    #next-name {
        font-size: clamp(25px, 7.7vw, 33px);
    }

    #countdown {
        font-size: clamp(55px, 16.5vw, 72px);
    }

    #progress-panel {
        width: calc(100vw - 20px);
    }

    #footer-info {
        width: calc(100vw - 8px);
    }

    #footer-jadwal {
        gap: 2px;
        font-size: clamp(7.5px, 2.4vw, 10px);
    }

}

@media (max-width: 600px) and (max-height: 700px) {
    .overlay {
        padding-top: 8px;
    }

    #header-block {
        gap: 1px;
    }

    #clock {
        margin-top: 2px;
    }

    #center-box {
        margin-top: 9px;
        gap: 6px;
    }

    #progress-panel {
        margin-top: 1px;
        padding-top: 6px;
        padding-bottom: 7px;
    }

    #footer-info {
        bottom: 4px;
    }

}

@media (max-width: 600px) and (orientation: portrait) {
    body {
        background: radial-gradient(circle at top, #063d2f 0%, #021b18 48%, #00110f 100%);
    }

    .overlay {
        padding-top: 18px;
    }

    #header-block {
        width: calc(100vw - 28px);
        gap: 7px;
        padding: 0;
        position: relative;
    }

    #masjid-title {
        font-size: clamp(24px, 7vw, 31px);
        font-weight: 850;
        line-height: 1.08;
        letter-spacing: .1px;
        text-shadow: 0 0 18px rgba(123,255,187,.18);
    }

    #masjid-title a {
        display: inline-block;
        margin: 0 5px;
        color: #f6d35d;
        text-decoration: none;
        filter: drop-shadow(0 0 6px rgba(246,211,93,.25));
    }

    #date {
        font-size: clamp(16px, 4.65vw, 21px);
        line-height: 1.28;
        margin-top: 1px;
        color: rgba(255,255,255,.94);
    }

    #header-block::after {
        content: "";
        display: block;
        width: min(58vw, 240px);
        height: 1px;
        margin: 7px auto 2px;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255,210,72,.82),
            transparent
        );
        box-shadow: 0 0 8px rgba(255,210,72,.14);
    }

    #clock {
        width: calc(100vw - 42px);
        box-sizing: border-box;
        margin: 13px auto 0;
        padding: 13px 8px 14px;
        border: 1px solid rgba(236,197,70,.75);
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(0,70,52,.44), rgba(0,24,22,.72));
        box-shadow: 0 12px 26px rgba(0,0,0,.24),
            inset 0 1px 1px rgba(255,255,255,.08),
            0 0 18px rgba(255,210,72,.08);
        backdrop-filter: blur(10px) saturate(130%);
        font-size: clamp(57px, 16.5vw, 78px);
        line-height: 1;
        letter-spacing: -1px;
        color: #7bff9c;
        text-shadow: 0 0 12px rgba(80,255,160,.32),
            0 0 24px rgba(80,255,160,.16);
    }

    #center-box {
        width: calc(100vw - 34px);
        margin-top: 24px;
        padding: 22px 12px 15px;
        gap: 11px;
        border: 1px solid rgba(236,197,70,.45);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(0,38,34,.52), rgba(0,19,18,.36));
        box-shadow: 0 12px 28px rgba(0,0,0,.20),
            inset 0 1px 1px rgba(255,255,255,.045);
        backdrop-filter: blur(7px) saturate(120%);
    }

    #next-name {
        max-width: 92%;
        margin: 0 auto;
        font-size: clamp(27px, 8.2vw, 38px);
        line-height: 1.14;
        letter-spacing: .35px;
        color: #ffdc59;
        text-shadow: 0 0 10px rgba(255,220,89,.13);
    }

    #countdown {
        width: calc(100% - 10px);
        box-sizing: border-box;
        margin: 7px auto 5px;
        padding: 11px 4px 12px;
        border: 1px solid rgba(67,235,162,.34);
        border-radius: 17px;
        background: linear-gradient(180deg, rgba(0,73,52,.30), rgba(0,31,27,.42));
        box-shadow: inset 0 0 20px rgba(0,255,153,.035);
        font-size: clamp(58px, 16.3vw, 78px);
        line-height: 1;
        letter-spacing: -1px;
        color: #79f5a4;
        text-shadow: 0 0 11px rgba(91,255,169,.32),
            0 0 24px rgba(91,255,169,.14);
    }

    #petugas {
        margin-top: 1px !important;
    }

    #progress-panel {
        width: calc(100% - 2px);
        margin: 7px auto 0;
        padding: 10px 11px 11px;
        border-radius: 15px;
        border-color: rgba(255,213,79,.28);
        background: linear-gradient(180deg, rgba(0,44,39,.84), rgba(0,19,19,.76));
        box-shadow: 0 8px 20px rgba(0,0,0,.18),
            inset 0 1px 1px rgba(255,255,255,.05);
    }

    .progress-label {
        font-size: clamp(11px, 3.3vw, 14px);
        margin-bottom: 7px;
    }

    .progress-label span:nth-child(2) {
        min-width: 52px;
        padding: 3px 9px;
        border-color: rgba(255,215,0,.46);
        background: rgba(255,215,0,.11);
    }

    .prayer-progress-track {
        height: 10px;
        border-color: rgba(255,255,255,.13);
    }

    #footer-info {
        width: calc(100vw - 18px);
        bottom: 8px;
        padding: 8px 6px 7px;
        border-radius: 17px;
        border-color: rgba(236,197,70,.34);
        background: linear-gradient(180deg, rgba(0,42,37,.88), rgba(0,14,15,.90));
        box-shadow: 0 10px 25px rgba(0,0,0,.30),
            inset 0 1px 1px rgba(255,255,255,.05);
    }

    #footer-jadwal {
        grid-template-columns: repeat(7, minmax(0,1fr));
        gap: 3px;
        margin-bottom: 8px;
        font-size: clamp(8px, 2.45vw, 11px);
    }

    #footer-jadwal span {
        padding: 7px 1px 6px;
        border-radius: 10px;
        border-color: rgba(236,197,70,.28);
        background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
        box-shadow: inset 0 1px 1px rgba(255,255,255,.025);
    }

    #footer-jadwal span::before {
        display: block;
        margin-bottom: 3px;
        font-size: clamp(10px, 3vw, 14px);
        line-height: 1;
        opacity: .95;
    }

    #footer-jadwal span[data-jadwal="imsyak"]::before {
        content: "◷";
        color: #7ddfff;
    }

    #footer-jadwal span[data-jadwal="subuh"]::before {
        content: "☼";
        color: #8cff9a;
    }

    #footer-jadwal span[data-jadwal="syuruk"]::before {
        content: "☀";
        color: #ffc857;
    }

    #footer-jadwal span[data-jadwal="dzuhur"]::before {
        content: "☀";
        color: #fff08a;
    }

    #footer-jadwal span[data-jadwal="ashar"]::before {
        content: "☀";
        color: #dfff7a;
    }

    #footer-jadwal span[data-jadwal="maghrib"]::before {
        content: "☀";
        color: #ff9a62;
    }

    #footer-jadwal span[data-jadwal="isya"]::before {
        content: "☾";
        color: #87e7ff;
    }

    #footer-jadwal b {
        margin-top: 3px;
        font-size: 1.1em;
    }

    #footer-jadwal span.jadwal-aktif {
        transform: translateY(-2px);
        border-color: rgba(123,255,187,.72);
        box-shadow: 0 0 13px rgba(0,255,153,.16),
            inset 0 1px 1px rgba(255,255,255,.06);
    }

    #running-box {
        border-top: 1px solid rgba(255,215,0,.18);
        padding: 7px 2px 0;
    }

    #running-box::before {
        content: "🔊";
        position: absolute;
        left: 12px;
        bottom: 8px;
        font-size: 14px;
        z-index: 2;
    }

    #running-text {
        font-size: clamp(12px, 3.65vw, 16px);
        line-height: 1.3;
    }

    #runtime-status {
        top: 7px;
        right: 7px;
        padding: 4px 7px;
        font-size: 8.5px;
        opacity: .92;
        border-color: rgba(93,255,175,.28);
        background: rgba(0,39,31,.70);
    }

}

@media (max-width: 600px) and (orientation: portrait) and (max-height: 820px) {
    #clock {
        margin-top: 8px;
        padding-top: 10px;
        padding-bottom: 11px;
    }

    #center-box {
        margin-top: 17px;
        padding-top: 16px;
        gap: 8px;
    }

    #countdown {
        padding-top: 8px;
        padding-bottom: 9px;
    }

    #footer-jadwal span::before {
        margin-bottom: 2px;
    }

    #footer-jadwal span {
        padding-top: 5px;
        padding-bottom: 5px;
    }

}

@media (max-width: 390px) and (orientation: portrait) {
    #header-block {
        width: calc(100vw - 20px);
    }

    #masjid-title {
        font-size: clamp(20px, 6.3vw, 25px);
    }

    #clock {
        width: calc(100vw - 28px);
        font-size: clamp(50px, 15.6vw, 63px);
    }

    #center-box {
        width: calc(100vw - 22px);
    }

    #next-name {
        font-size: clamp(24px, 7.7vw, 31px);
    }

    #countdown {
        font-size: clamp(51px, 15.8vw, 66px);
    }

    #footer-info {
        width: calc(100vw - 8px);
    }

    #footer-jadwal {
        gap: 2px;
        font-size: clamp(7px, 2.35vw, 9.5px);
    }

    #footer-jadwal span::before {
        font-size: 10px;
    }

}

@media (min-width: 1025px) {
    .overlay {
        padding-top: clamp(18px, 2.6vh, 30px);
    }

    #header-block {
        width: min(94vw, 1500px);
        padding: 0;
        gap: clamp(5px, .7vh, 9px);
        position: relative;
    }

    #masjid-title {
        font-size: clamp(30px, 2.25vw, 43px);
        line-height: 1.05;
        letter-spacing: 1px;
        text-shadow: 0 0 18px rgba(123,255,187,.18);
    }

    #masjid-title a {
        display: inline-block;
        margin: 0 8px;
        color: #f6d35d;
        text-decoration: none;
        filter: drop-shadow(0 0 7px rgba(246,211,93,.24));
    }

    #date {
        font-size: clamp(26px, 2.2vw, 40px);
        line-height: 1.16;
        margin-top: 1px;
        color: rgba(255,255,255,.94);
    }

    #header-block::after {
        content: "";
        display: block;
        width: min(34vw, 560px);
        height: 1px;
        margin: clamp(5px, .7vh, 9px) auto 0;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255,210,72,.82),
            transparent
        );
        box-shadow: 0 0 10px rgba(255,210,72,.14);
    }

    #clock {
        width: min(58vw, 980px);
        box-sizing: border-box;
        margin: clamp(8px, 1.2vh, 14px) auto 0;
        padding: clamp(10px, 1.4vh, 16px) 24px clamp(12px, 1.6vh, 18px);
        border: 1px solid rgba(236,197,70,.72);
        border-radius: 30px;
        background: linear-gradient(180deg, rgba(0,70,52,.42), rgba(0,24,22,.70));
        box-shadow: 0 14px 34px rgba(0,0,0,.24),
            inset 0 1px 1px rgba(255,255,255,.08),
            0 0 22px rgba(255,210,72,.07);
        backdrop-filter: blur(11px) saturate(130%);
        font-size: clamp(72px, 6.8vw, 112px);
        line-height: .98;
        letter-spacing: -2px;
        color: #7bff9c;
        text-shadow: 0 0 13px rgba(80,255,160,.30),
            0 0 28px rgba(80,255,160,.14);
    }

    #center-box {
        width: min(72vw, 1220px);
        box-sizing: border-box;
        margin-top: clamp(18px, 2.5vh, 28px);
        padding: clamp(18px, 2.1vh, 25px) clamp(24px, 2.3vw, 40px) clamp(16px, 2vh, 23px);
        gap: clamp(8px, 1.15vh, 13px);
        border: 1px solid rgba(236,197,70,.46);
        border-radius: 32px;
        background: linear-gradient(180deg, rgba(0,38,34,.54), rgba(0,19,18,.38));
        box-shadow: 0 15px 34px rgba(0,0,0,.22),
            inset 0 1px 1px rgba(255,255,255,.045);
        backdrop-filter: blur(8px) saturate(120%);
    }

    #next-name {
        max-width: 94%;
        margin: 0 auto;
        font-size: clamp(38px, 3.35vw, 58px);
        line-height: 1.08;
        letter-spacing: .5px;
        color: #ffdc59;
        text-shadow: 0 0 12px rgba(255,220,89,.13);
    }

    #next-time {
        font-size: clamp(54px, 4.4vw, 76px);
        line-height: 1;
    }

    #countdown {
        width: min(92%, 1030px);
        box-sizing: border-box;
        margin: clamp(4px, .7vh, 8px) auto clamp(2px, .5vh, 5px);
        padding: clamp(8px, 1.1vh, 13px) 14px clamp(10px, 1.25vh, 15px);
        border: 1px solid rgba(67,235,162,.34);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(0,73,52,.30), rgba(0,31,27,.42));
        box-shadow: inset 0 0 24px rgba(0,255,153,.035);
        font-size: clamp(86px, 7.7vw, 130px);
        line-height: .95;
        letter-spacing: -2px;
        color: #79f5a4;
        text-shadow: 0 0 13px rgba(91,255,169,.30),
            0 0 30px rgba(91,255,169,.14);
    }

    #petugas {
        max-width: 94%;
        margin-top: 1px !important;
        font-size: clamp(19px, 1.55vw, 27px) !important;
        line-height: 1.25;
    }

    #progress-panel {
        width: 96%;
        margin: clamp(4px, .6vh, 7px) auto 0;
        padding: 10px 16px 12px;
        border-radius: 18px;
        border-color: rgba(255,213,79,.28);
        background: linear-gradient(180deg, rgba(0,44,39,.84), rgba(0,19,19,.76));
        box-shadow: 0 8px 20px rgba(0,0,0,.18),
            inset 0 1px 1px rgba(255,255,255,.05);
    }

    .progress-label {
        margin-bottom: 8px;
        font-size: clamp(15px, 1.25vw, 21px);
    }

    .progress-label span:nth-child(2) {
        min-width: 72px;
        padding: 4px 18px;
        border-color: rgba(255,215,0,.46);
        background: rgba(255,215,0,.11);
    }

    .prayer-progress-track {
        height: clamp(12px, 1.25vh, 17px);
    }

    #footer-info {
        width: min(96vw, 1840px);
        bottom: clamp(8px, 1.3vh, 15px);
        padding: 11px 14px 9px;
        border-radius: 24px;
        border-color: rgba(236,197,70,.33);
        background: linear-gradient(180deg, rgba(0,42,37,.87), rgba(0,14,15,.89));
        box-shadow: 0 12px 30px rgba(0,0,0,.30),
            inset 0 1px 1px rgba(255,255,255,.05);
    }

    #footer-jadwal {
        grid-template-columns: repeat(7, minmax(0,1fr));
        gap: clamp(7px, .75vw, 14px);
        margin-bottom: 9px;
        font-size: clamp(18px, 1.45vw, 27px);
    }

    #footer-jadwal span {
        min-width: 0;
        padding: 8px 6px 9px;
        border-radius: 15px;
        border-color: rgba(236,197,70,.26);
        background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
        box-shadow: inset 0 1px 1px rgba(255,255,255,.025);
    }

    #footer-jadwal span::before {
        display: block;
        margin-bottom: 4px;
        font-size: clamp(17px, 1.35vw, 24px);
        line-height: 1;
        opacity: .96;
    }

    #footer-jadwal span[data-jadwal="imsyak"]::before {
        content: "◷";
        color: #7ddfff;
    }

    #footer-jadwal span[data-jadwal="subuh"]::before {
        content: "☼";
        color: #8cff9a;
    }

    #footer-jadwal span[data-jadwal="syuruk"]::before {
        content: "☀";
        color: #ffc857;
    }

    #footer-jadwal span[data-jadwal="dzuhur"]::before {
        content: "☀";
        color: #fff08a;
    }

    #footer-jadwal span[data-jadwal="ashar"]::before {
        content: "☀";
        color: #dfff7a;
    }

    #footer-jadwal span[data-jadwal="maghrib"]::before {
        content: "☀";
        color: #ff9a62;
    }

    #footer-jadwal span[data-jadwal="isya"]::before {
        content: "☾";
        color: #87e7ff;
    }

    #footer-jadwal b {
        margin-top: 3px;
        font-size: 1.08em;
    }

    #footer-jadwal span.jadwal-aktif {
        transform: translateY(-2px);
        border-color: rgba(123,255,187,.72);
        box-shadow: 0 0 16px rgba(0,255,153,.17),
            inset 0 1px 1px rgba(255,255,255,.06);
    }

    #running-box {
        position: relative;
        border-top: 1px solid rgba(255,215,0,.17);
        padding-top: 7px;
    }

    #running-box::before {
        content: "🔊";
        position: absolute;
        left: 8px;
        top: 7px;
        z-index: 2;
        font-size: clamp(18px, 1.3vw, 24px);
    }

    #running-text {
        font-size: clamp(20px, 1.65vw, 31px);
        line-height: 1.25;
    }

    #runtime-status {
        top: 16px;
        right: 18px;
        border-color: rgba(93,255,175,.28);
        background: rgba(0,39,31,.70);
    }

}

@media (min-width: 1025px) and (max-height: 950px) {
    .overlay {
        padding-top: 13px;
    }

    #header-block {
        gap: 3px;
    }

    #masjid-title {
        font-size: clamp(27px, 2vw, 36px);
    }

    #date {
        font-size: clamp(23px, 1.9vw, 33px);
    }

    #header-block::after {
        margin-top: 4px;
    }

    #clock {
        width: min(54vw, 900px);
        margin-top: 6px;
        padding-top: 7px;
        padding-bottom: 9px;
        font-size: clamp(64px, 6vw, 94px);
        border-radius: 25px;
    }

    #center-box {
        width: min(72vw, 1180px);
        margin-top: 13px;
        padding-top: 13px;
        padding-bottom: 12px;
        gap: 6px;
        border-radius: 27px;
    }

    #next-name {
        font-size: clamp(34px, 3vw, 49px);
    }

    #countdown {
        width: 91%;
        padding-top: 5px;
        padding-bottom: 7px;
        font-size: clamp(76px, 7vw, 108px);
        border-radius: 20px;
    }

    #progress-panel {
        margin-top: 2px;
        padding-top: 7px;
        padding-bottom: 8px;
    }

    .progress-label {
        margin-bottom: 5px;
    }

    .prayer-progress-track {
        height: 11px;
    }

    #footer-info {
        bottom: 7px;
        padding-top: 7px;
        padding-bottom: 6px;
    }

    #footer-jadwal {
        gap: 7px;
        margin-bottom: 6px;
        font-size: clamp(16px, 1.25vw, 23px);
    }

    #footer-jadwal span {
        padding-top: 5px;
        padding-bottom: 6px;
    }

    #footer-jadwal span::before {
        margin-bottom: 2px;
        font-size: clamp(14px, 1.1vw, 20px);
    }

    #running-box {
        padding-top: 5px;
    }

    #running-box::before {
        top: 5px;
    }

    #running-text {
        font-size: clamp(18px, 1.45vw, 26px);
    }

}

@media (min-width: 1800px) and (min-height: 951px) {
    #clock {
        width: min(54vw, 1040px);
    }

    #center-box {
        width: min(68vw, 1320px);
    }

}

@media (min-width: 1025px) {
    #center-box {
        width: min(72vw, 1220px);
        margin-top: clamp(20px, 2.7vh, 30px);
        padding: 0;
        gap: clamp(10px, 1.35vh, 15px);
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    #next-name {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 18px;
        font-size: clamp(40px, 3.45vw, 60px);
        line-height: 1.08;
        color: #ffdc59;
        text-shadow: 0 2px 2px rgba(0,0,0,.30),
            0 0 15px rgba(255,220,89,.16);
    }

    #countdown {
        width: auto;
        max-width: 100%;
        margin: clamp(2px, .45vh, 6px) auto clamp(5px, .7vh, 9px);
        padding: 0 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: clamp(92px, 8vw, 138px);
        line-height: .94;
        letter-spacing: -2px;
        color: #79f5a4;
        text-shadow: 0 0 14px rgba(91,255,169,.34),
            0 0 30px rgba(91,255,169,.15);
    }

    #progress-panel {
        width: min(82%, 1050px);
        margin: clamp(6px, .8vh, 10px) auto 0;
        padding: 10px 16px 12px;
        border: 1px solid rgba(123,255,187,.28);
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(0,44,39,.82), rgba(0,19,19,.76));
        box-shadow: 0 8px 20px rgba(0,0,0,.18),
            inset 0 1px 1px rgba(255,255,255,.05);
        backdrop-filter: blur(8px) saturate(120%);
    }

}

@media (min-width: 1025px) and (max-height: 950px) {
    #center-box {
        margin-top: 14px;
        gap: 7px;
    }

    #next-name {
        font-size: clamp(35px, 3.05vw, 50px);
    }

    #countdown {
        margin-top: 0;
        margin-bottom: 3px;
        font-size: clamp(80px, 7.15vw, 112px);
    }

    #progress-panel {
        width: min(82%, 1030px);
        margin-top: 3px;
        padding-top: 7px;
        padding-bottom: 8px;
    }

}

@media (min-width: 1800px) and (min-height: 951px) {
    #center-box {
        width: min(68vw, 1260px);
    }

    #progress-panel {
        width: min(80%, 1080px);
    }

}

@media (min-width: 1025px) {
    .overlay {
        padding-top: clamp(20px, 3vh, 34px);
    }

    #header-block {
        gap: clamp(7px, .9vh, 12px);
    }

    #header-block::after {
        margin-top: clamp(8px, 1vh, 12px);
    }

    #clock {
        margin-top: clamp(14px, 1.8vh, 20px);
    }

    #center-box {
        width: min(74vw, 1260px);
        margin-top: clamp(28px, 3.6vh, 40px);
        gap: clamp(17px, 2.1vh, 24px);
    }

    #next-name {
        margin-bottom: clamp(2px, .4vh, 5px);
    }

    #countdown {
        margin-top: clamp(3px, .5vh, 7px);
        margin-bottom: clamp(8px, 1vh, 13px);
    }

    #progress-panel {
        width: min(84%, 1080px);
        margin-top: clamp(10px, 1.3vh, 15px);
        padding-top: 11px;
        padding-bottom: 13px;
    }

    #footer-info {
        bottom: clamp(12px, 1.7vh, 20px);
        padding-top: 12px;
        padding-bottom: 10px;
    }

    #footer-jadwal {
        margin-bottom: 11px;
    }

    #running-box {
        padding-top: 9px;
    }

}

@media (min-width: 1025px) and (max-height: 950px) {
    .overlay {
        padding-top: 16px;
    }

    #header-block {
        gap: 4px;
    }

    #header-block::after {
        margin-top: 5px;
    }

    #clock {
        margin-top: 9px;
    }

    #center-box {
        margin-top: 22px;
        gap: 12px;
    }

    #next-name {
        margin-bottom: 1px;
    }

    #countdown {
        margin-top: 1px;
        margin-bottom: 7px;
    }

    #progress-panel {
        width: min(83%, 1060px);
        margin-top: 7px;
        padding-top: 8px;
        padding-bottom: 9px;
    }

    #footer-info {
        bottom: 10px;
    }

    #footer-jadwal {
        margin-bottom: 8px;
    }

    #running-box {
        padding-top: 6px;
    }

}

@media (min-width: 1025px) and (min-height: 951px) {
    #center-box {
        margin-top: clamp(30px, 4vh, 46px);
    }

    #progress-panel {
        margin-top: clamp(12px, 1.5vh, 18px);
    }

}

:root {
    --nab-adaptive-glass-top: rgba(5, 12, 16, 0.46);
    --nab-adaptive-glass-bottom: rgba(0, 6, 10, 0.64);
    --nab-adaptive-glass-soft: rgba(4, 10, 14, 0.40);
    --nab-adaptive-border: color-mix(
        in srgb,
        var(--nab-color-title) 42%,
        rgba(255,255,255,.14)
    );
    --nab-adaptive-border-soft: color-mix(
        in srgb,
        var(--nab-color-title) 24%,
        rgba(255,255,255,.10)
    );
    --nab-adaptive-glow: color-mix(
        in srgb,
        var(--nab-color-title) 18%,
        transparent
    );
}

#clock {
    background: linear-gradient(
            180deg,
            var(--nab-adaptive-glass-top),
            var(--nab-adaptive-glass-bottom)
        );
    border-color: var(--nab-adaptive-border);
    box-shadow: 0 14px 34px rgba(0,0,0,.28),
        inset 0 1px 1px rgba(255,255,255,.08),
        0 0 22px var(--nab-adaptive-glow);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
}

#progress-panel {
    background: linear-gradient(
            180deg,
            rgba(7, 13, 16, .50),
            rgba(0, 6, 9, .68)
        );
    border-color: var(--nab-adaptive-border-soft);
    box-shadow: 0 8px 22px rgba(0,0,0,.22),
        inset 0 1px 1px rgba(255,255,255,.055),
        0 0 12px var(--nab-adaptive-glow);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

#footer-info {
    background: linear-gradient(
            180deg,
            rgba(6, 12, 15, .56),
            rgba(0, 5, 8, .72)
        );
    border-color: var(--nab-adaptive-border-soft);
    box-shadow: 0 12px 30px rgba(0,0,0,.30),
        inset 0 1px 1px rgba(255,255,255,.05),
        0 0 16px var(--nab-adaptive-glow);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
}

#footer-jadwal span {
    background: linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(0,0,0,.12)
        );
    border-color: var(--nab-adaptive-border-soft);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.035);
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
}

#footer-jadwal span.jadwal-aktif {
    background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--nab-color-title) 13%, transparent),
            rgba(0,0,0,.12)
        );
    border-color: color-mix(
        in srgb,
        var(--nab-color-title) 60%,
        rgba(255,255,255,.15)
    );
    box-shadow: 0 0 16px color-mix(
            in srgb,
            var(--nab-color-title) 20%,
            transparent
        ),
        inset 0 1px 1px rgba(255,255,255,.06);
}

#running-box {
    border-top-color: color-mix(
        in srgb,
        var(--nab-color-title) 20%,
        rgba(255,255,255,.06)
    );
}

@media (max-width: 600px) and (orientation: portrait) {
    #center-box {
        background: linear-gradient(
                180deg,
                rgba(6,12,15,.38),
                rgba(0,5,8,.52)
            );
        border-color: var(--nab-adaptive-border-soft);
        box-shadow: 0 12px 28px rgba(0,0,0,.20),
            inset 0 1px 1px rgba(255,255,255,.045),
            0 0 14px var(--nab-adaptive-glow);
        backdrop-filter: blur(9px) saturate(120%);
        -webkit-backdrop-filter: blur(9px) saturate(120%);
    }

    #countdown {
        background: linear-gradient(
                180deg,
                rgba(255,255,255,.025),
                rgba(0,0,0,.12)
            );
        border-color: var(--nab-adaptive-border-soft);
    }

}

@supports not (color: color-mix(in srgb, white 50%, black)) {
    :root {
        --nab-adaptive-border: rgba(123,255,187,.42);
        --nab-adaptive-border-soft: rgba(123,255,187,.24);
        --nab-adaptive-glow: rgba(123,255,187,.12);
    }

}

#clock {
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--nab-color-clock);
    text-shadow: 0 0 10px rgba(80,255,160,.36),
        0 0 26px rgba(80,255,160,.18) !important;
}

#footer-info {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#center-box {
    border-color: transparent;
}

#progress-panel {
    background: linear-gradient(
            180deg,
            rgba(5, 12, 16, .52),
            rgba(0, 6, 10, .70)
        ) !important;
    border: 1px solid var(--nab-adaptive-border-soft) !important;
    border-radius: 18px;
    box-shadow: 0 9px 24px rgba(0,0,0,.24),
        inset 0 1px 1px rgba(255,255,255,.055),
        0 0 12px var(--nab-adaptive-glow) !important;
    backdrop-filter: blur(11px) saturate(122%) !important;
    -webkit-backdrop-filter: blur(11px) saturate(122%) !important;
}

#footer-jadwal span {
    background: linear-gradient(
            180deg,
            rgba(7, 13, 16, .52),
            rgba(0, 5, 8, .62)
        ) !important;
    border: 1px solid var(--nab-adaptive-border-soft) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.045),
        0 5px 12px rgba(0,0,0,.10) !important;
    backdrop-filter: blur(8px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(118%) !important;
}

#footer-jadwal span.jadwal-aktif {
    background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--nab-color-title) 12%, rgba(5,12,16,.48)),
            rgba(0,5,8,.62)
        ) !important;
    border-color: color-mix(
        in srgb,
        var(--nab-color-title) 62%,
        rgba(255,255,255,.14)
    ) !important;
    box-shadow: 0 0 15px color-mix(
            in srgb,
            var(--nab-color-title) 18%,
            transparent
        ),
        inset 0 1px 1px rgba(255,255,255,.06) !important;
}

#running-box {
    background: transparent !important;
    border-top: 1px solid color-mix(
        in srgb,
        var(--nab-color-title) 17%,
        rgba(255,255,255,.08)
    ) !important;
}

@media (min-width: 1025px) {
    #clock {
        margin-top: clamp(18px, 2.2vh, 26px) !important;
        font-size: clamp(78px, 7vw, 116px);
        line-height: .96;
    }

    #center-box {
        width: min(76vw, 1300px);
        margin-top: clamp(34px, 4.2vh, 48px);
        padding: 0 !important;
        gap: clamp(17px, 2.1vh, 24px);
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #next-name {
        margin: 0 auto;
        padding: 0;
    }

    #countdown {
        width: auto !important;
        max-width: 100%;
        margin: clamp(5px, .7vh, 8px) auto clamp(10px, 1.2vh, 15px) !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #progress-panel {
        width: min(82%, 1080px);
        margin-top: clamp(12px, 1.5vh, 18px);
    }

    #footer-info {
        width: min(96vw, 1840px);
        bottom: clamp(10px, 1.5vh, 18px);
        padding: 0 10px 2px !important;
    }

    #footer-jadwal {
        gap: clamp(8px, .8vw, 15px);
        margin-bottom: 11px;
    }

    #running-box {
        padding-top: 8px;
    }

}

@media (min-width: 1025px) and (max-height: 950px) {
    #clock {
        margin-top: 12px !important;
        font-size: clamp(68px, 6.2vw, 98px);
    }

    #center-box {
        margin-top: 25px;
        gap: 12px;
    }

    #countdown {
        margin-bottom: 7px !important;
    }

    #progress-panel {
        margin-top: 8px;
    }

    #footer-info {
        bottom: 8px;
    }

    #footer-jadwal {
        margin-bottom: 7px;
    }

    #running-box {
        padding-top: 5px;
    }

}

@media (min-width: 601px) and (max-width: 1024px) {
    #clock {
        margin-top: clamp(12px, 2vh, 18px) !important;
    }

    #center-box {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #countdown {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #footer-info {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

}

@media (max-width: 600px) and (orientation: portrait) {
    #clock {
        width: auto !important;
        margin: 15px auto 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #center-box {
        width: calc(100vw - 22px);
        margin-top: 27px;
        padding: 0 8px !important;
        gap: 12px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #countdown {
        width: auto !important;
        max-width: 100%;
        margin: 5px auto 7px !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #progress-panel {
        width: calc(100vw - 34px);
        margin-top: 8px;
        padding: 9px 10px 10px;
        border-radius: 15px;
    }

    #footer-info {
        width: calc(100vw - 10px);
        bottom: 5px;
        padding: 0 3px 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #footer-jadwal {
        gap: 3px;
        margin-bottom: 7px;
    }

    #footer-jadwal span {
        border-radius: 9px;
    }

    #running-box {
        padding-top: 5px;
    }

}

@media (max-width: 600px) and (orientation: portrait) and (max-height: 820px) {
    #clock {
        margin-top: 9px !important;
    }

    #center-box {
        margin-top: 19px;
        gap: 8px;
    }

    #progress-panel {
        margin-top: 4px;
    }

    #footer-jadwal {
        margin-bottom: 5px;
    }

}

@media (max-width: 390px) and (orientation: portrait) {
    #center-box {
        width: calc(100vw - 14px);
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    #progress-panel {
        width: calc(100vw - 22px);
    }

    #footer-info {
        width: calc(100vw - 4px);
    }

}

@media (max-height: 650px) {
    #clock {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #center-box {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #countdown {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #footer-info {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

}

@supports not (color: color-mix(in srgb, white 50%, black)) {
    #footer-jadwal span.jadwal-aktif {
        border-color: rgba(123,255,187,.60) !important;
        background: linear-gradient(
                180deg,
                rgba(123,255,187,.10),
                rgba(0,5,8,.62)
            ) !important;
    }

    #running-box {
        border-top-color: rgba(123,255,187,.15) !important;
    }

}

#masjid-title {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.4vw, 28px);
    width: auto !important;
    max-width: 96vw !important;
    white-space: nowrap;
    overflow: visible;
}

#masjid-title > a {
    display: none !important;
}

#masjid-title::before,
#masjid-title::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: clamp(44px, 3.8vw, 70px);
    height: clamp(44px, 3.8vw, 70px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 8px rgba(255,211,78,.30));
}

#masjid-title::before {
    background-image: url("../icons/mosque-gold.svg");
}

#masjid-title::after {
    background-image: url("../icons/crescent-star-gold.svg");
}

.next-prayer-title {
    margin: 0;
    color: rgba(255,255,255,.94);
    font-size: clamp(23px, 2vw, 34px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,.48),
        0 0 12px rgba(255,220,90,.08);
}

.next-prayer-name-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 1.5vw, 28px);
    width: min(92vw, 760px);
    margin: 1px auto 0;
}

#next-name {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffdc59 !important;
    font-size: clamp(48px, 4vw, 70px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    text-shadow: 0 0 8px rgba(255,220,89,.24),
        0 3px 12px rgba(0,0,0,.40) !important;
}

.next-ornament {
    display: inline-block;
    flex: 0 0 auto;
    width: clamp(52px, 4.4vw, 80px);
    height: clamp(24px, 2.1vw, 38px);
    background: url("../icons/leaf-gold.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(255,211,78,.26));
}

.next-ornament-right {
    transform: scaleX(-1);
}

#center-box {
    gap: clamp(10px, 1.35vh, 16px) !important;
}

#footer-jadwal span::before {
    content: "" !important;
    display: block !important;
    width: 1.25em;
    height: 1.25em;
    margin: 0 auto .24em !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .98;
}

#footer-jadwal span[data-jadwal="imsyak"]::before {
    background-image: url("../icons/imsyak.svg");
}

#footer-jadwal span[data-jadwal="subuh"]::before {
    background-image: url("../icons/subuh.svg");
}

#footer-jadwal span[data-jadwal="syuruk"]::before {
    background-image: url("../icons/syuruk.svg");
}

#footer-jadwal span[data-jadwal="dzuhur"]::before {
    background-image: url("../icons/dzuhur.svg");
}

#footer-jadwal span[data-jadwal="ashar"]::before {
    background-image: url("../icons/ashar.svg");
}

#footer-jadwal span[data-jadwal="maghrib"]::before {
    background-image: url("../icons/maghrib.svg");
}

#footer-jadwal span[data-jadwal="isya"]::before {
    background-image: url("../icons/isya.svg");
}

#footer-jadwal span.jadwal-aktif::before {
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 0 .42em rgba(123,255,187,.48));
}

@media (min-width: 1025px) {
    #footer-jadwal span::before {
        width: clamp(22px, 1.65vw, 31px);
        height: clamp(22px, 1.65vw, 31px);
        margin-bottom: 5px !important;
    }

}

@media (min-width: 601px) and (max-width: 1024px) {
    #masjid-title::before,
    #masjid-title::after {
        width: clamp(34px, 5vw, 50px);
        height: clamp(34px, 5vw, 50px);
    }

    .next-prayer-title {
        font-size: clamp(19px, 3.4vw, 28px);
    }

    #next-name {
        font-size: clamp(38px, 6vw, 54px) !important;
    }

    .next-ornament {
        width: clamp(40px, 7vw, 62px);
        height: clamp(19px, 3.2vw, 29px);
    }

    #footer-jadwal span::before {
        width: clamp(17px, 2.8vw, 24px);
        height: clamp(17px, 2.8vw, 24px);
        margin-bottom: 4px !important;
    }

}

@media (max-width: 600px) and (orientation: portrait) {
    #masjid-title {
        gap: clamp(6px, 1.7vw, 9px);
        max-width: calc(100vw - 10px) !important;
    }

    #masjid-title::before,
    #masjid-title::after {
        width: clamp(21px, 6.4vw, 28px);
        height: clamp(21px, 6.4vw, 28px);
    }

    .next-prayer-title {
        font-size: clamp(15px, 4.2vw, 19px);
        font-weight: 500;
        letter-spacing: .8px;
    }

    .next-prayer-name-wrap {
        width: 94vw;
        gap: clamp(9px, 2.7vw, 14px);
    }

    #next-name {
        font-size: clamp(33px, 9.4vw, 43px) !important;
    }

    .next-ornament {
        width: clamp(30px, 9vw, 42px);
        height: clamp(14px, 4.3vw, 20px);
    }

    #footer-jadwal span::before {
        width: clamp(12px, 3.6vw, 16px);
        height: clamp(12px, 3.6vw, 16px);
        margin-bottom: 3px !important;
    }

}

@media (max-width: 390px) and (orientation: portrait) {
    #masjid-title::before,
    #masjid-title::after {
        width: 18px;
        height: 18px;
    }

    .next-prayer-title {
        font-size: 14px;
    }

    #next-name {
        font-size: clamp(29px, 9vw, 36px) !important;
    }

    .next-ornament {
        width: 27px;
        height: 13px;
    }

    #footer-jadwal span::before {
        width: 11px;
        height: 11px;
        margin-bottom: 2px !important;
    }

}

@media (max-height: 650px) {
    .next-prayer-title {
        font-size: clamp(14px, 3.2vh, 19px);
    }

    #next-name {
        font-size: clamp(28px, 6.4vh, 42px) !important;
    }

    .next-ornament {
        width: clamp(26px, 7vh, 42px);
        height: clamp(13px, 3.6vh, 20px);
    }

    #footer-jadwal span::before {
        width: clamp(11px, 2.6vh, 18px);
        height: clamp(11px, 2.6vh, 18px);
        margin-bottom: 2px !important;
    }

}

.next-prayer-title {
    color: #fff4cf !important;
    font-weight: 800 !important;
    font-size: clamp(25px, 2.15vw, 36px) !important;
    line-height: 1 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,.55),
        0 0 8px rgba(255,224,130,.22),
        0 0 18px rgba(255,214,76,.12) !important;
}

.next-prayer-name-wrap {
    gap: clamp(14px, 1.35vw, 24px) !important;
}

.next-ornament {
    width: clamp(64px, 5.2vw, 94px) !important;
    height: clamp(30px, 2.55vw, 46px) !important;
    background-image: url("../icons/leaf-gold-bold.svg") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    filter: drop-shadow(0 0 4px rgba(255,215,88,.32))
        drop-shadow(0 2px 4px rgba(0,0,0,.22)) !important;
    opacity: 1 !important;
}

.next-ornament-left {
    transform: none !important;
}

.next-ornament-right {
    transform: scaleX(-1) !important;
}

@media (max-width: 600px) and (orientation: portrait) {
    .next-prayer-title {
        font-size: clamp(17px, 4.8vw, 21px) !important;
        font-weight: 800 !important;
        letter-spacing: 1px !important;
    }

    .next-prayer-name-wrap {
        gap: clamp(8px, 2.2vw, 12px) !important;
    }

    .next-ornament {
        width: clamp(42px, 12vw, 54px) !important;
        height: clamp(21px, 6vw, 28px) !important;
    }

}

@media (max-width: 390px) and (orientation: portrait) {
    .next-prayer-title {
        font-size: 16px !important;
    }

    .next-ornament {
        width: 38px !important;
        height: 20px !important;
    }

}

@media (max-height: 650px) {
    .next-prayer-title {
        font-size: clamp(15px, 3.7vh, 21px) !important;
    }

    .next-ornament {
        width: clamp(36px, 8vh, 52px) !important;
        height: clamp(18px, 4vh, 26px) !important;
    }

}

#header-block {
    gap: 7px !important;
}

#masjid-title {
    font-weight: 900 !important;
    color: #caffb1 !important;
    letter-spacing: .4px !important;
    text-shadow: 0 0 10px rgba(117,255,155,.38),
        0 2px 2px rgba(0,0,0,.45) !important;
    gap: clamp(12px, 1.2vw, 22px) !important;
}

#masjid-title::before,
#masjid-title::after {
    width: clamp(56px, 4.8vw, 86px) !important;
    height: clamp(56px, 4.8vw, 86px) !important;
    filter: drop-shadow(0 0 5px rgba(255,209,70,.45))
        drop-shadow(0 4px 5px rgba(0,0,0,.30)) !important;
}

#date {
    color: rgba(255,255,255,.97) !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.50) !important;
}

#header-block::after {
    content: "" !important;
    display: block !important;
    width: min(62vw, 520px) !important;
    height: 2px !important;
    margin: 7px auto 2px !important;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(232,180,45,.35) 12%,
            #f1c13f 42%,
            #ffe078 50%,
            #f1c13f 58%,
            rgba(232,180,45,.35) 88%,
            transparent 100%
        ) !important;
    box-shadow: 0 0 8px rgba(255,204,56,.20) !important;
}

#clock {
    width: auto !important;
    max-width: 96vw !important;
    padding: 0 !important;
    margin: clamp(10px,1.5vh,18px) auto 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #95ff72 !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
    text-shadow: 0 0 8px rgba(113,255,96,.28),
        0 0 20px rgba(63,255,121,.24),
        0 5px 8px rgba(0,0,0,.30) !important;
}

#center-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.next-prayer-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px,1.1vw,18px);
    color: #fff4dc !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.55),
        0 0 8px rgba(255,223,156,.15) !important;
}

.next-prayer-title::before,
.next-prayer-title::after {
    content: "";
    display: block;
    width: clamp(52px, 5vw, 92px);
    height: 4px;
    flex: 0 0 auto;
    background: linear-gradient(
            90deg,
            transparent 0%,
            #dfac31 32%,
            #ffe06a 72%,
            #ffe98d 100%
        );
    clip-path: polygon(0 38%, 76% 38%, 83% 0, 90% 50%, 83% 100%, 76% 62%, 0 62%);
    filter: drop-shadow(0 0 4px rgba(255,211,74,.20));
}

.next-prayer-title::after {
    transform: scaleX(-1);
}

#next-name {
    color: #ffd44d !important;
    font-weight: 950 !important;
    letter-spacing: .2px !important;
    text-shadow: 0 2px 0 #a66d00,
        0 4px 2px rgba(0,0,0,.36),
        0 0 10px rgba(255,205,50,.16) !important;
}

.next-prayer-name-wrap {
    gap: clamp(14px,1.35vw,24px) !important;
}

.next-ornament {
    width: clamp(82px, 6.6vw, 120px) !important;
    height: clamp(40px, 3.2vw, 58px) !important;
    background-image: url("../icons/leaf-gold-bold.svg") !important;
    filter: drop-shadow(0 0 5px rgba(255,213,67,.32))
        drop-shadow(0 3px 3px rgba(0,0,0,.28)) !important;
}

#countdown {
    width: auto !important;
    padding: 0 !important;
    margin: 3px auto 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9bff7a !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
    text-shadow: 0 0 9px rgba(115,255,108,.30),
        0 0 20px rgba(76,255,118,.20),
        0 5px 8px rgba(0,0,0,.28) !important;
}

#progress-panel {
    width: min(84vw, 1120px) !important;
    margin-top: clamp(10px,1.25vh,16px) !important;
    padding: 13px 18px 15px !important;
    border: 1px solid rgba(235,188,52,.70) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(0,31,27,.86), rgba(0,11,15,.92)) !important;
    box-shadow: 0 9px 26px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.045),
        0 0 14px rgba(255,205,55,.07) !important;
    backdrop-filter: blur(8px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
}

.progress-label {
    font-weight: 800 !important;
}

.progress-label span:nth-child(2) {
    border-color: rgba(255,210,42,.72) !important;
    color: #ffe24c !important;
    background: rgba(128,103,0,.12) !important;
}

.prayer-progress-track {
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(0,0,0,.58) !important;
}

#footer-info {
    width: min(92vw, 1420px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#footer-jadwal {
    gap: clamp(8px,.8vw,14px) !important;
    margin-bottom: 12px !important;
}

#footer-jadwal span {
    padding: clamp(10px,1.1vh,15px) clamp(6px,.65vw,10px) !important;
    border: 1px solid rgba(227,177,48,.70) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(0,32,28,.92), rgba(0,13,18,.94)) !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.03) !important;
}

#footer-jadwal span.jadwal-aktif {
    border-color: rgba(130,255,115,.92) !important;
    background: linear-gradient(180deg, rgba(0,65,36,.92), rgba(0,23,22,.96)) !important;
    box-shadow: 0 0 18px rgba(80,255,113,.24),
        inset 0 0 16px rgba(80,255,113,.06) !important;
    transform: translateY(-2px) !important;
}

#running-box {
    position: relative !important;
    box-sizing: border-box;
    min-height: 62px;
    padding: 12px 18px 12px 82px !important;
    border: 1px solid rgba(227,177,48,.68) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(0,32,28,.90), rgba(0,13,18,.94)) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.03) !important;
    overflow: hidden !important;
}

#running-box::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    background: url("../icons/speaker-green.svg") center / contain no-repeat !important;
    z-index: 2;
}

#running-text {
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.44) !important;
}

@media (min-width: 1025px) {
    #masjid-title {
        font-size: clamp(40px, 3.2vw, 58px) !important;
    }

    #date {
        font-size: clamp(22px, 1.8vw, 32px) !important;
    }

    /* #clock {
        font-size: clamp(108px, 9vw, 160px) !important;
    } */

    #clock {
        font-size: clamp(90px, 7.2vw, 125px) !important;
    }

    #center-box {
        margin-top: clamp(22px,3vh,38px) !important;
        gap: clamp(10px,1.2vh,16px) !important;
    }

    .next-prayer-title {
        font-size: clamp(31px,2.5vw,44px) !important;
    }

    #next-name {
        font-size: clamp(74px,5.8vw,104px) !important;
    }

    #countdown {
        font-size: clamp(104px,8.1vw,150px) !important;
    }

    #footer-jadwal {
        font-size: clamp(20px,1.55vw,28px) !important;
    }

}

@media (max-width: 600px) and (orientation: portrait) {
    #header-block {
        width: calc(100vw - 18px) !important;
        gap: 4px !important;
    }

    #masjid-title {
        font-size: clamp(25px, 7.5vw, 33px) !important;
        gap: 6px !important;
    }

    #masjid-title::before,
    #masjid-title::after {
        width: clamp(28px,8vw,36px) !important;
        height: clamp(28px,8vw,36px) !important;
    }

    #date {
        max-width: 96vw !important;
        font-size: clamp(16px,4.9vw,21px) !important;
        line-height: 1.2 !important;
    }

    #header-block::after {
        width: min(68vw,260px) !important;
        margin-top: 5px !important;
    }

    #clock {
        font-size: clamp(64px,18.5vw,86px) !important;
        margin-top: 11px !important;
    }

    #center-box {
        width: calc(100vw - 16px) !important;
        margin-top: clamp(24px,3.3vh,32px) !important;
        gap: 9px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .next-prayer-title {
        font-size: clamp(20px,5.7vw,25px) !important;
        letter-spacing: .4px !important;
        gap: 7px !important;
    }

    .next-prayer-title::before,
    .next-prayer-title::after {
        width: clamp(34px,9vw,46px) !important;
        height: 3px !important;
    }

    #next-name {
        font-size: clamp(48px,13.6vw,62px) !important;
    }

    .next-prayer-name-wrap {
        width: 98vw !important;
        gap: 7px !important;
    }

    .next-ornament {
        width: clamp(54px,15vw,70px) !important;
        height: clamp(28px,7.8vw,36px) !important;
    }

    #countdown {
        font-size: clamp(72px,20.5vw,96px) !important;
        line-height: .95 !important;
    }

    #progress-panel {
        width: calc(100vw - 34px) !important;
        padding: 9px 10px 10px !important;
        border-radius: 15px !important;
        margin-top: 7px !important;
    }

    .progress-label {
        font-size: clamp(11px,3.2vw,14px) !important;
        margin-bottom: 6px !important;
    }

    .prayer-progress-track {
        height: 10px !important;
    }

    #footer-info {
        width: calc(100vw - 12px) !important;
        bottom: 5px !important;
        padding: 0 !important;
    }

    #footer-jadwal {
        gap: 3px !important;
        margin-bottom: 6px !important;
        font-size: clamp(8px,2.45vw,11px) !important;
    }

    #footer-jadwal span {
        padding: 6px 1px 6px !important;
        border-radius: 8px !important;
    }

    #footer-jadwal span::before {
        width: clamp(14px,4vw,18px) !important;
        height: clamp(14px,4vw,18px) !important;
        margin-bottom: 3px !important;
    }

    #running-box {
        min-height: 34px !important;
        padding: 6px 6px 6px 38px !important;
        border-radius: 10px !important;
    }

    #running-box::before {
        left: 6px !important;
        width: 27px !important;
        height: 27px !important;
    }

    #running-text {
        font-size: clamp(11px,3.2vw,14px) !important;
    }

}

@media (max-width: 390px) and (orientation: portrait) {
    #masjid-title {
        font-size: clamp(22px,7.2vw,28px) !important;
    }

    #masjid-title::before,
    #masjid-title::after {
        width: 24px !important;
        height: 24px !important;
    }

    .next-prayer-title {
        font-size: 18px !important;
    }

    #next-name {
        font-size: clamp(42px,13vw,54px) !important;
    }

    .next-ornament {
        width: 46px !important;
        height: 24px !important;
    }

    #countdown {
        font-size: clamp(64px,19vw,82px) !important;
    }

}

@media (max-height: 700px) {
    #center-box {
        margin-top: 12px !important;
        gap: 6px !important;
    }

    #clock {
        margin-top: 5px !important;
    }

    .next-prayer-title {
        font-size: clamp(15px,3.3vh,20px) !important;
    }

    #next-name {
        font-size: clamp(34px,7.4vh,48px) !important;
    }

    .next-ornament {
        width: clamp(38px,8vh,52px) !important;
        height: clamp(20px,4vh,28px) !important;
    }

    #countdown {
        font-size: clamp(54px,12.5vh,76px) !important;
    }

    #progress-panel {
        margin-top: 4px !important;
    }

}

.next-prayer-name-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

#next-name {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    box-sizing: border-box !important;
}

.next-prayer-name-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 96vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: clamp(14px, 1.4vw, 24px) !important;
    box-sizing: border-box !important;
}

#next-name {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: min(76vw, 1100px) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.next-ornament {
    flex: 0 0 auto !important;
    width: clamp(64px, 5vw, 92px) !important;
    height: clamp(30px, 2.5vw, 46px) !important;
}

@media (max-width: 600px) {
    .next-prayer-name-wrap {
        width: fit-content !important;
        max-width: 96vw !important;
        gap: 8px !important;
    }

    #next-name {
        max-width: 72vw !important;
    }

    .next-ornament {
        width: clamp(32px, 9vw, 44px) !important;
        height: clamp(16px, 4.5vw, 22px) !important;
    }

}

.next-prayer-name-wrap {
    position: relative !important;
    display: block !important;
    width: fit-content !important;
    max-width: min(76vw, 1100px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-self: center !important;
    text-align: center !important;
}

#next-name {
    display: block !important;
    width: fit-content !important;
    max-width: min(76vw, 1100px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    box-sizing: border-box !important;
}

.next-ornament {
    position: absolute !important;
    top: 50% !important;
    width: clamp(64px, 5vw, 92px) !important;
    height: clamp(30px, 2.5vw, 46px) !important;
    margin: 0 !important;
    flex: none !important;
    pointer-events: none !important;
}

.next-ornament-left {
    right: calc(100% + clamp(12px, 1.2vw, 22px)) !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}

.next-ornament-right {
    left: calc(100% + clamp(12px, 1.2vw, 22px)) !important;
    right: auto !important;
    transform: translateY(-50%) scaleX(-1) !important;
}

@media (max-width: 600px) and (orientation: portrait) {
    .next-prayer-name-wrap {
        width: fit-content !important;
        max-width: 68vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

    #next-name {
        width: fit-content !important;
        max-width: 68vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .next-ornament {
        width: clamp(30px, 8vw, 40px) !important;
        height: clamp(15px, 4vw, 20px) !important;
    }

    .next-ornament-left {
        right: calc(100% + 6px) !important;
        transform: translateY(-50%) !important;
    }

    .next-ornament-right {
        left: calc(100% + 6px) !important;
        transform: translateY(-50%) scaleX(-1) !important;
    }

}

@media (max-width: 390px) and (orientation: portrait) {
    .next-prayer-name-wrap,
    #next-name {
        max-width: 66vw !important;
    }

    .next-ornament {
        width: 27px !important;
        height: 14px !important;
    }

    .next-ornament-left {
        right: calc(100% + 4px) !important;
    }

    .next-ornament-right {
        left: calc(100% + 4px) !important;
    }

}

#center-box.state-adzan .next-prayer-name-wrap,
#center-box.state-wait-iqomah .next-prayer-name-wrap,
#center-box.state-iqomah .next-prayer-name-wrap,
#center-box.state-jamaah .next-prayer-name-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    text-align: center !important;
}

#center-box.state-adzan #next-name,
#center-box.state-wait-iqomah #next-name,
#center-box.state-iqomah #next-name,
#center-box.state-jamaah #next-name {
    display: block !important;
    width: 100% !important;
    max-width: min(92vw, 1100px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.08 !important;
    box-sizing: border-box !important;
}

#center-box.state-adzan .next-ornament,
#center-box.state-wait-iqomah .next-ornament,
#center-box.state-iqomah .next-ornament,
#center-box.state-jamaah .next-ornament {
    display: none !important;
}

@media (max-width: 600px) and (orientation: portrait) {
    #center-box.state-wait-iqomah .next-prayer-name-wrap,
    #center-box.state-adzan .next-prayer-name-wrap,
    #center-box.state-iqomah .next-prayer-name-wrap,
    #center-box.state-jamaah .next-prayer-name-wrap {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

    #center-box.state-wait-iqomah #next-name,
    #center-box.state-adzan #next-name,
    #center-box.state-iqomah #next-name,
    #center-box.state-jamaah #next-name {
        width: 100% !important;
        max-width: 90vw !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        text-align: center !important;
        font-size: clamp(27px, 7.6vw, 38px) !important;
        line-height: 1.12 !important;
        letter-spacing: .2px !important;
    }

}

@media (max-width: 390px) and (orientation: portrait) {
    #center-box.state-wait-iqomah #next-name,
    #center-box.state-adzan #next-name,
    #center-box.state-iqomah #next-name,
    #center-box.state-jamaah #next-name {
        max-width: 92vw !important;
        font-size: clamp(24px, 7.2vw, 32px) !important;
    }

}

@media (min-width: 1025px) {
    #center-box.state-adzan,
    #center-box.state-wait-iqomah,
    #center-box.state-iqomah,
    #center-box.state-jamaah {
        width: min(76vw, 1300px) !important;
        margin-top: clamp(18px, 2.3vh, 28px) !important;
        gap: clamp(8px, 1.05vh, 13px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #center-box.state-adzan #next-name,
    #center-box.state-wait-iqomah #next-name,
    #center-box.state-iqomah #next-name,
    #center-box.state-jamaah #next-name {
        width: 100% !important;
        max-width: min(70vw, 1080px) !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
        font-size: clamp(48px, 4.15vw, 72px) !important;
        line-height: 1.03 !important;
        letter-spacing: .2px !important;
        text-align: center !important;
        white-space: normal !important;
        text-wrap: balance !important;
    }

    #center-box.state-adzan #countdown,
    #center-box.state-wait-iqomah #countdown,
    #center-box.state-iqomah #countdown,
    #center-box.state-jamaah #countdown {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: clamp(76px, 6.5vw, 112px) !important;
        line-height: .92 !important;
        letter-spacing: -1px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #center-box.state-adzan #progress-panel,
    #center-box.state-wait-iqomah #progress-panel,
    #center-box.state-iqomah #progress-panel,
    #center-box.state-jamaah #progress-panel {
        width: min(76%, 980px) !important;
        margin-top: clamp(4px, .55vh, 8px) !important;
        padding-top: 8px !important;
        padding-bottom: 9px !important;
    }

    #center-box.state-adzan #petugas,
    #center-box.state-wait-iqomah #petugas,
    #center-box.state-iqomah #petugas,
    #center-box.state-jamaah #petugas {
        margin-top: 0 !important;
        font-size: clamp(17px, 1.35vw, 23px) !important;
        line-height: 1.15 !important;
    }

}

@media (min-width: 1025px) and (max-height: 950px) {
    #center-box.state-adzan,
    #center-box.state-wait-iqomah,
    #center-box.state-iqomah,
    #center-box.state-jamaah {
        margin-top: 10px !important;
        gap: 5px !important;
    }

    #center-box.state-adzan #next-name,
    #center-box.state-wait-iqomah #next-name,
    #center-box.state-iqomah #next-name,
    #center-box.state-jamaah #next-name {
        max-width: min(72vw, 1050px) !important;
        font-size: clamp(42px, 3.7vw, 60px) !important;
        line-height: .98 !important;
    }

    #center-box.state-adzan #countdown,
    #center-box.state-wait-iqomah #countdown,
    #center-box.state-iqomah #countdown,
    #center-box.state-jamaah #countdown {
        font-size: clamp(66px, 5.7vw, 92px) !important;
        line-height: .90 !important;
    }

    #center-box.state-adzan #progress-panel,
    #center-box.state-wait-iqomah #progress-panel,
    #center-box.state-iqomah #progress-panel,
    #center-box.state-jamaah #progress-panel {
        margin-top: 2px !important;
        padding-top: 6px !important;
        padding-bottom: 7px !important;
    }

}

@media (min-width: 1025px) and (max-height: 780px) {
    #center-box.state-adzan,
    #center-box.state-wait-iqomah,
    #center-box.state-iqomah,
    #center-box.state-jamaah {
        margin-top: 5px !important;
        gap: 3px !important;
    }

    #center-box.state-adzan #next-name,
    #center-box.state-wait-iqomah #next-name,
    #center-box.state-iqomah #next-name,
    #center-box.state-jamaah #next-name {
        font-size: clamp(36px, 3.2vw, 52px) !important;
    }

    #center-box.state-adzan #countdown,
    #center-box.state-wait-iqomah #countdown,
    #center-box.state-iqomah #countdown,
    #center-box.state-jamaah #countdown {
        font-size: clamp(58px, 5vw, 80px) !important;
    }

    #center-box.state-adzan #progress-panel,
    #center-box.state-wait-iqomah #progress-panel,
    #center-box.state-iqomah #progress-panel,
    #center-box.state-jamaah #progress-panel {
        width: min(72%, 930px) !important;
        padding-top: 5px !important;
        padding-bottom: 6px !important;
    }

    #center-box.state-adzan #petugas,
    #center-box.state-wait-iqomah #petugas,
    #center-box.state-iqomah #petugas,
    #center-box.state-jamaah #petugas {
        font-size: clamp(15px, 1.2vw, 20px) !important;
    }

}

@media (min-width: 1025px) {
    #center-box.state-countdown {
        width: min(76vw, 1300px) !important;
        margin-top: clamp(20px, 2.6vh, 30px) !important;
        padding: 0 !important;
        gap: clamp(10px, 1.25vh, 15px) !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #center-box.state-countdown .next-prayer-title {
        margin: 0 !important;
        line-height: 1 !important;
    }

    #center-box.state-countdown .next-prayer-name-wrap {
        width: fit-content !important;
        max-width: min(76vw, 1100px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #center-box.state-countdown #next-name {
        width: fit-content !important;
        max-width: min(68vw, 1000px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1 !important;
    }

    #center-box.state-countdown #countdown {
        width: auto !important;
        max-width: 100% !important;
        margin: clamp(2px, .35vh, 5px) auto 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: clamp(88px, 7.4vw, 126px) !important;
        line-height: .90 !important;
    }

    #center-box.state-countdown #progress-panel {
        width: min(82%, 1040px) !important;
        margin: clamp(5px, .65vh, 9px) auto 0 !important;
    }

}

@media (min-width: 1025px) and (max-height: 950px) {
    #center-box.state-countdown {
        margin-top: 12px !important;
        gap: 7px !important;
    }

    #center-box.state-countdown .next-prayer-title {
        font-size: clamp(26px, 2vw, 34px) !important;
    }

    #center-box.state-countdown #next-name {
        font-size: clamp(48px, 4vw, 66px) !important;
    }

    #center-box.state-countdown .next-ornament {
        width: clamp(56px, 4.6vw, 82px) !important;
        height: clamp(27px, 2.25vw, 40px) !important;
    }

    #center-box.state-countdown #countdown {
        font-size: clamp(76px, 6.4vw, 106px) !important;
        line-height: .88 !important;
    }

    #center-box.state-countdown #progress-panel {
        width: min(80%, 1000px) !important;
        margin-top: 3px !important;
        padding-top: 7px !important;
        padding-bottom: 8px !important;
    }

}

@media (min-width: 1025px) and (max-height: 780px) {
    #center-box.state-countdown {
        margin-top: 7px !important;
        gap: 4px !important;
    }

    #center-box.state-countdown .next-prayer-title {
        font-size: clamp(22px, 1.75vw, 29px) !important;
    }

    #center-box.state-countdown #next-name {
        font-size: clamp(42px, 3.5vw, 56px) !important;
    }

    #center-box.state-countdown .next-ornament {
        width: clamp(48px, 4vw, 68px) !important;
        height: clamp(23px, 2vw, 34px) !important;
    }

    #center-box.state-countdown #countdown {
        font-size: clamp(66px, 5.6vw, 90px) !important;
    }

    #center-box.state-countdown #progress-panel {
        width: min(76%, 940px) !important;
        margin-top: 2px !important;
        padding-top: 5px !important;
        padding-bottom: 6px !important;
    }

}

@media (min-width: 1025px) {
    #footer-info {
        width: calc(100vw - 28px);
        max-width: none;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 12px 8px;
        bottom: 10px;
        box-sizing: border-box;
    }

    #footer-jadwal {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: clamp(6px, .55vw, 10px);
        margin-bottom: 8px;
        font-size: clamp(21px, 1.65vw, 32px);
    }

    #footer-jadwal span {
        min-width: 0;
        padding: clamp(8px, 1vh, 11px)
            clamp(3px, .4vw, 7px)
            clamp(9px, 1.1vh, 12px);
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.12;
    }

    #footer-jadwal span {
        font-weight: 700;
    }

    #footer-jadwal b {
        display: block;
        margin-top: 5px;
        font-size: 1.16em;
        font-weight: 850;
        line-height: 1;
        white-space: nowrap;
    }

    #footer-jadwal span::before {
        font-size: clamp(23px, 1.75vw, 34px);
        line-height: 1;
        margin-bottom: 5px;
    }

    #running-box {
        width: 100%;
    }

    #running-text {
        font-size: clamp(22px, 1.65vw, 31px);
    }

}

@media (min-width: 1025px) {
    #footer-info {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 8px !important;
        padding: 8px 8px 7px !important;
        box-sizing: border-box !important;
    }

    #footer-jadwal {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: clamp(5px, .42vw, 8px) !important;
        margin: 0 0 7px 0 !important;
        font-size: clamp(23px, 1.82vw, 35px) !important;
        font-weight: 750 !important;
    }

    #footer-jadwal span {
        width: auto !important;
        min-width: 0 !important;
        padding: clamp(8px, .9vh, 11px)
            clamp(3px, .3vw, 6px)
            clamp(9px, 1vh, 12px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.06 !important;
        box-sizing: border-box !important;
    }

    /* #footer-jadwal b {
        display: block !important;
        margin-top: clamp(4px, .45vh, 6px) !important;
        font-size: 1.22em !important;
        font-weight: 900 !important;
        line-height: .98 !important;
        white-space: nowrap !important;
    } */

    #footer-jadwal b {
        display: block !important;
        margin-top: clamp(4px, .45vh, 6px) !important;

        font-size: 1.38em !important;   /* sebelumnya 1.22em */

        font-weight: 900 !important;
        line-height: .98 !important;
        white-space: nowrap !important;
    }

    #footer-jadwal span::before {
        width: clamp(27px, 2vw, 38px) !important;
        height: clamp(27px, 2vw, 38px) !important;
        margin-bottom: clamp(4px, .45vh, 6px) !important;
        background-size: contain !important;
    }

    #running-box {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    #running-text {
        font-size: clamp(23px, 1.7vw, 32px) !important;
    }

}

@media (min-width: 1025px) and (max-height: 900px) {
    #footer-info {
        bottom: 5px !important;
        padding-top: 6px !important;
        padding-bottom: 5px !important;
    }

    #footer-jadwal {
        gap: 5px !important;
        margin-bottom: 5px !important;
        font-size: clamp(21px, 1.68vw, 31px) !important;
    }

    #footer-jadwal span {
        padding-top: 6px !important;
        padding-bottom: 7px !important;
    }

    #footer-jadwal b {
        margin-top: 3px !important;
    }

    #footer-jadwal span::before {
        width: clamp(23px, 1.7vw, 32px) !important;
        height: clamp(23px, 1.7vw, 32px) !important;
        margin-bottom: 3px !important;
    }

    #running-text {
        font-size: clamp(20px, 1.55vw, 28px) !important;
    }

}